<template>
	<view class="company_container">
		<up-navbar placeholder :leftIconSize="0" bgColor="transparent" />
		<view class="work_box">
			<!-- 头部导航 -->
			<view class="nav_header">
				<view class="nav_item" :class="{ active: expertActive === 0 }" @click="expertActive = 0">待处理保单</view>
				<view class="colLine"></view>
				<view class="nav_item" :class="{ active: expertActive === 1 }" @click="expertActive = 1">已承接保单</view>
				<view class="colLine"></view>
				<view class="nav_item" :class="{ active: expertActive === 2 }" @click="expertActive = 2">已完结保单</view>
			</view>
			<!-- 内容模块 -->
			<view class="expert_content">
				<swiper class="swiper" circular :current="expertActive" @animationfinish="toggleSwiper">
					<swiper-item>
						<view class="swiper-item">
							<scroll-view scroll-y="true" class="scroll-history">
								<view class="work_list">
									<carCard v-for="carItem in List" :key="carItem.taskId" :tipContent="carItem.orderProgress" :carInfo="carItem">
										<template #header>
											<navTop :carNum="carItem.licensePlateNumber" />
										</template>
										<template #center>
											<wordInfo :phone="carItem.phone" :userName="carItem.name" :company="carItem.sysDeptName" />
										</template>
										<template #footer>
											<centerLine v-if="carItem.orderProgress === '已承接'" leftContent="承接回馈" rightContent="疑难件" @leftComfirn="handleFeedback(carItem.taskId)" @rightComfirn="handleTroubleshooting(carItem.taskId)"></centerLine>
											<centerLine v-else leftContent="承接" rightContent="转办" @leftComfirn="handleContinue(carItem.taskId)" @rightComfirn="handleSharing(carItem.taskId)"></centerLine>
										</template>
									</carCard>
									<up-empty
										:show="List.length == 0"
										mode="list"
										text="暂无待办事项"
									/>
									<!-- 分页器 -->
									<view v-show="List.length > 0">
										<uni-pagination  :total="allTotal" v-model="queryParams.pageNum" :pageSize="queryParams.pageSize" @change="getList" />
									</view>
								</view>
							</scroll-view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<scroll-view scroll-y="true" class="scroll-history">
								<view class="work_list">
									<carCard v-for="(carItem, index) in ProcessedList" :key="index" tipContent="查看详情" :carInfo="carItem">
										<template #header>
											<navTop :carNum="carItem.licensePlateNumber" />
										</template>
										<template #center>
											<wordInfo :phone="carItem.phone" :userName="carItem.name" :company="carItem.sysDeptName" />
										</template>
										<template #footer>
											<centerLine leftContent="承接回馈" rightContent="疑难件" @leftComfirn="handleFeedback(carItem.taskId)" @rightComfirn="handleTroubleshooting(carItem.taskId)"></centerLine>
										</template>
									</carCard>
									<up-empty
										:show="ProcessedList.length == 0"
										mode="list"
										text="暂无数据"
									/>
									<!-- 分页器 -->
									<view v-show="ProcessedList.length > 0">
										<uni-pagination :total="allTotal" v-model="continueQueryParams.pageNum" :pageSize="continueQueryParams.pageSize" @change="getProcessedList"	/>
									</view>
								</view>
							</scroll-view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<scroll-view scroll-y="true" class="scroll-history">
								<view class="work_list">
									<carCard v-for="(carItem, index) in EndedList" :key="index" :tipContent="carItem.policyStatus" :carInfo="carItem">
										<template #header>
											<navTop :carNum="carItem.licensePlateNumber" />
										</template>
										<template #center>
											<wordInfo :phone="carItem.phone" :userName="carItem.name" :company="carItem.sysDeptName" />
										</template>
										<template #footer>
											<view class="delInfo">
												<text @click="lookRemark(carItem.processInstanceId)">查看回馈</text>
											</view>
										</template>
									</carCard>
									<up-empty
										:show="EndedList.length == 0"
										mode="list"
										text="暂无数据"
									/>
									<!-- 分页器 -->
									<view v-show="EndedList.length > 0">
										<uni-pagination  :total="allTotal" v-model="queryParams.pageNum" :pageSize="queryParams.pageSize" @change="getEndedList" />
									</view>
								</view>
							</scroll-view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
		</view>
		<!-- 填写承接回馈弹出框 -->
		<up-modal :show="showFeedback" showCancelButton title="填写回馈及单号" @confirm="submitFeedback" @cancel="showFeedback = false">
			<up-form :model="FeedbackForm" labelWidth="80">
				<up-form-item label="承保单号" prop="name">
					<up-input v-model="FeedbackForm.policynumber" />
				</up-form-item>
				<up-form-item label="回馈内容" prop="name">
					<up-textarea v-model="FeedbackForm.message" placeholder="请输入内容" ></up-textarea>
				</up-form-item>
			</up-form>
		</up-modal>
		<!-- 查看回馈弹出框 -->
		<up-modal :show="showRemark" title="回馈内容" @confirm="showRemark = false">
			<up-form :model="remarkForm" labelWidth="80">
				<up-form-item label="承保单号" prop="name">
					<up-input v-model="remarkForm.policyNumber" />
				</up-form-item>
				<up-form-item label="回馈内容" prop="name">
					<up-parse :content="remarkForm.message"></up-parse>
				</up-form-item>
			</up-form>
		</up-modal>
		<!-- 转办弹出框 -->
		<up-modal :show="showSharing" showCancelButton title="选择转办人员" @confirm="submitSharing" @cancel="showSharing = false">
			<up-radio-group v-model="transferForm.username">
				<up-radio
					v-for="(item, index) in transferOptions"
					:key="index"
					:label="item.userName"
					:name="item.userName"
				/>
			</up-radio-group>
		</up-modal>
		<!-- 底部导航栏 -->
		<up-tabbar
			:value="useTabbar.employeeCurrent"
			activeColor="#3680FE"
			inactiveColor="#707070"
		>
			<up-tabbar-item text="主页" icon="home" :badge="useTabbar.companyTotal"></up-tabbar-item>
			<up-tabbar-item text="我的" icon="account" @click="goRouter">
				<template #active-icon>
					<image style="width: 48rpx;" class="u-page__item__slot-icon" src="@/static/tabbarIcon/my-active.png" mode="widthFix"></image>
				</template>
				<template #inactive-icon>
					<image style="width: 48rpx;" class="u-page__item__slot-icon" src="@/static/tabbarIcon/my.png" mode="widthFix"></image>
				</template>
			</up-tabbar-item>
		</up-tabbar>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import carCard from '@/components/carCard.vue';
	import centerLine from '@/components/centerLine.vue';
	import wordInfo from '@/components/wordInfo.vue';
	import navTop from '@/components/navTop.vue';
	import { queryMyList, queryContinueList, queryEndedList ,disposeUser, getUserList, transfer, queryResult } from '@/api/work.js'
	import ownerInfo from '@/components/ownerInfo.vue';
	import useTabbarStore from '@/store/modules/tabbar.js'
	const useTabbar = useTabbarStore()
	const List = ref([]) // 待办列表
	const ProcessedList = ref([]) // 已处理列表
	const EndedList = ref([]) // 已完结列表
	const expertActive = ref(0)
	const allTotal = ref(0)
	const transferForm = ref({
		username: '',
		taskId: ''
	})
	const transferOptions = ref([]);
	const showFeedback = ref(false)
	const showSharing = ref(false)
	const showRemark = ref(false)
	const remarkForm = ref({
		message: "",
		policyNumber: ""
	})
	const FeedbackForm = ref({
		policystatus: "2",
		message: "",
		policynumber: ""
	})
	const queryParams = reactive({
	  pageNum: 1,
	  pageSize: 10
	});
	const continueQueryParams = reactive({
	  pageNum: 1,
	  pageSize: 10,
		orderprogress: 1,
		policystatus: 0
	});
	// 检测手机滑动
	const toggleSwiper = (event) => {
		expertActive.value = event.detail?.current
		if(event.detail?.current === 0) {
			getList()
		}else if(event.detail?.current === 1) {
			getProcessedList()
		} else {
			getEndedList()
		}
	}
	// 删除车主信息
	const delOwnerInfo = (id) => {
		uni.showModal({
			title: '删除车主信息',
			content: '是否删除车主信息，该操作不可逆？',
			success: function (res) {
				if (res.confirm) {
					uni.$u.toast('删除成功')
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}
	
	// 获取待办任务
	const getList = async () => {
	  const { data } = await queryMyList(queryParams);
	  List.value = data.rows;
		allTotal.value = data.total
	  useTabbar.companyTotal = data.total;
	};
	
	// 获取已承接保单
	const getProcessedList = async () => {
	  const { rows, total } = await queryContinueList(continueQueryParams);
	  ProcessedList.value = rows;
		allTotal.value = total
	  useTabbar.companyTotal = total;
	};
	// 获取已完结保单
	const getEndedList = async () => {
	  const { rows, total } = await queryEndedList(queryParams);
	  EndedList.value = rows;
		allTotal.value = total
	  useTabbar.companyTotal = total;
	};
	
	// 承接
	const handleContinue = (taskId) => {
		uni.showModal({
			content: '是否要承接该保单',
			success: function (res) {
				if (res.confirm) {
					disposeUser({}, taskId).then((res) => {
						uni.$u.toast('承接成功')
					  getList();
					});
				} else if (res.cancel) {
					uni.$u.toast('已取消')
				}
			}
		})
	}	
	
	// 转办
	const handleSharing = async (taskId) => {
		const { data } = await getUserList();
		transferForm.value.taskId = taskId
		transferOptions.value = data;
		showSharing.value = true
	}
	
	// 承接回馈
	const handleFeedback = (taskId) => {
		FeedbackForm.value.taskId = taskId
		showFeedback.value = true
	}
	// 疑难件
	const handleTroubleshooting = (taskId) => {
		const data = {
			policystatus: "1"
		};
		disposeUser(data, FeedbackForm.value.taskId).then((res) => {
			showFeedback.value = false
			getList();
		});
	}
	
	// 提交保单回馈
	const submitFeedback = () => {
		const data = {
			policystatus: "2",
			message: FeedbackForm.value.message,
			policynumber: FeedbackForm.value.policynumber,
		};
		disposeUser(data, FeedbackForm.value.taskId).then((res) => {
			showFeedback.value = false
			getList();
			proxy.$modal.msgSuccess("回馈成功");
		});
	}
	
	// 提交转办
	const submitSharing = () => {
		const data = {
		    username: transferForm.value.username,
		  };
		  const taskId = transferForm.value.taskId;
		  transfer(data, taskId).then((res) => {
		    showSharing.value = false;
		    getList();
		    proxy.$modal.msgSuccess("保单已分配成功");
		  });
	}
	
	const goRouter = (index) => {
		useTabbar.employeeCurrent = index
		uni.redirectTo({
			url: '/pages/companyMy/companyMy'
		})
	}
	/**查看保单回馈 */
	const lookRemark = (processInstanceId) => {
	  queryResult({ processInstanceId }).then((res) => {
	    remarkForm.value.policyNumber = res?.data?.policyNumber;
	    remarkForm.value.message = res?.data?.message;
	    showRemark.value = true;
	  });
	}
	getList()
</script>

<style lang="scss" scoped>
.company_container{
	width: 100%;
	height: 100vh;
	background: url('http://bxhd.crgx.net/profile/avatar/2024/09/25/bg-index_20240925113012A004.png') no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
	.work_box{
		height: calc(100vh - 88rpx);
		background-color: #F8F9FF;
		.nav_header{
			display: flex;
			align-items: center;
			width: 100%;
			height: 80rpx;
			background: #FFFFFF;
			.nav_item{
				flex: 1;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				color: #999;
				&.active{
					font-weight: 500;
					color: #333;
				}
			}
			.colLine{
				width: 2rpx;
				height: 40rpx;
				background: #D8D8D8;
			}
		}
	
		.work_list{
			padding: 20rpx 30rpx 200rpx;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
		}
	}
}
.delInfo{
	font-size: 20rpx;
	line-height: 26rpx;
	color: #3680FE;
}
.scroll-history {
	height: calc(100vh - 256rpx);
}
.swiper {
	height: calc(100vh - 256rpx);
}
</style>