<template>
	<view class="company_container">
		<up-navbar placeholder leftIconColor="#fff" autoBack bgColor="transparent" />
		<!-- 头部筛选 -->
		<view class="nav_header">
			<view class="nav_item" :class="{ active: queryParams.type === 0 }" @click="changeList(0)">个人车险</view>
			<view class="colLine"></view>
			<view class="nav_item" :class="{ active: queryParams.type === 1 }" @click="changeList(1)">企业车险</view>
		</view>
		<view class="work_box">
			<view class="work_list">
				<carCard v-for="carItem in List" :key="carItem.taskId" :tipContent="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>
						<operateList v-if="typeId === 0" :carInfo="carItem" @refreshList="getList"/>
						<view style="display: flex;align-items: center;gap: 30rpx;">
							<view class="btn" @click="lookDetail(carItem.businessKey)">查看详情</view>
							<view v-if="typeId === 3" class="btn" @click="lookFeedback(carItem.processInstanceId)">查看回馈</view>
							<view v-if="typeId === 4" class="btn" @click="lookRemark(carItem.processInstanceId)">查看备注</view>
						</view>
					</template>
				</carCard>
				<up-empty
					:show="List.length == 0"
					mode="list"
					text="暂无待办事项"
				/>
			</view>
			<!-- 分页器 -->
			<view v-show="List.length > 0">
				<uni-pagination :total="allTotal" v-model="queryParams.pageNum" :pageSize="queryParams.pageSize" @change="getList(typeId)"/>
				</view>
			</view>
		<!-- 保单回馈 -->
		<up-modal :show="showFeedback" title="保单回馈" @confirm="showFeedback = false" >
			<up-parse :content="feedbakcForm.message"></up-parse>
		</up-modal>
		<!-- 作废备注 -->
		<up-modal :show="showDefeat" title="作废备注" @confirm="showDefeat = false" >
			<up-parse :content="defeatForm.message"></up-parse>
		</up-modal>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
	import { queryMyList, queryProcessedList, queryOngoingList, queryEndedList, queryDeprecatedList, queryDefeatContent, queryResult } from '@/api/work.js'
	import carCard from '@/components/carCard.vue';
	import navTop from '@/components/navTop.vue';
	import wordInfo from '@/components/wordInfo.vue';
	import operateList from '@/components/operateList.vue';
	const List = ref([])
	const allTotal = ref(0)
	const typeId = ref(0)
	const showFeedback = ref(false)
	const showDefeat = ref(false)
	const feedbakcForm = ref({
		policyNumber: '',
		message: ''
	})
	const defeatForm = ref({
		message: ''
	})
	const titleStyle = {
		fontSize: '36rpx',
		color: '#fff',
		fontWeight: 500
	}
	const queryParams = reactive({
	  pageNum: 1,
	  pageSize: 10,
		type: 0,
	});
	const tipContent = ref('')
	// 初始加载数据
	onLoad((options) => {
		typeId.value = Number(options.type)
		getList(typeId.value)
	})
	
	// 用户下拉刷新
	onPullDownRefresh(async () => {
		queryParams.pageNum = 1
		List.value = []
		getList(typeId.value)
	})
	
	const getList = (id) => {
		//调用获取数据方法
		switch (id) {
			case 0:
				tipContent.value = '待处理'
				queryMyList(queryParams).then(res => {
					List.value = res.data.rows || []
					allTotal.value = res.data.total
					uni.stopPullDownRefresh()
				})
				break; 
			case 1:
				tipContent.value = '已处理'
				queryProcessedList(queryParams).then(res => {
					List.value = res.rows || []
					allTotal.value = res.total
					uni.stopPullDownRefresh()
				})
				break; 
			case 2:
				tipContent.value = '进行中'
				queryOngoingList(queryParams).then(res => {
					List.value = res.rows || []
					allTotal.value = res.total
					uni.stopPullDownRefresh()
				})
				break;
			case 3:
				tipContent.value = '已完结'
				queryEndedList(queryParams).then(res => {
					List.value = res.rows || []
					allTotal.value = res.total
					uni.stopPullDownRefresh()
				})
				break;
			case 4:
				tipContent.value = '已作废'
				queryDeprecatedList(queryParams).then(res => {
					List.value = res.rows || []
					allTotal.value = res.total
					uni.stopPullDownRefresh()
				})
				break;
		}
	}
	
	// 查看详情
	const lookDetail = (id) => {
		uni.navigateTo({
			url: `/pages/carDetail/carDetail?carInfoId=${id}`
		})
	}
	// 查看回馈
	const lookFeedback = (processInstanceId) => {
		queryResult({ processInstanceId}).then((res) => {
			feedbakcForm.value.policyNumber = res?.data?.policyNumber;
			feedbakcForm.value.message = res?.data?.message;
			showFeedback.value = true;
		});
	}
	// 查看备注
	const lookRemark = (processInstanceId) => {
		queryDefeatContent({ processInstanceId, type: 2}).then((res) => {
			defeatForm.value.message = res?.data?.message;
			showDefeat.value = true;
		});
	}
	// 切换类型
	const changeList = (index) => {
		queryParams.type = index
		getList(typeId.value)
	}
</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{
		padding: 20rpx 30rpx;
		height: calc(100vh - 288rpx);
		background-color: #F8F9FF;
		overflow-y: scroll;
		.work_list{
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			margin-bottom: 30rpx;
		}
	}
}
.btn {
	width: 100rpx;
	height: 40rpx;
	line-height: 40rpx;
	font-size: 24rpx;
	text-align: center;
	color: #3c9cff;
}

// 头部筛选
.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;
	}
}
</style>