<template>
	<el-card shadow="never" class="mb20" style="position: relative" v-loading="state.tableLoading">
		<el-button link type="primary" style="position: absolute; right: 20px; top: 32px; z-index: 2" @click="linkList">
			更多<SvgIcon name="ele-ArrowRight" />
		</el-button>
		<el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange">
			<el-tab-pane :name="item.value" v-for="item in tabsList" :key="item.value" :label="item.label"></el-tab-pane>
		</el-tabs>
		<!-- 表格 -->
		<el-table :data="state.tableList" row-key="id">
			<!-- 工单待办 -->
			<template v-if="activeName === '0'">
				<el-table-column prop="no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
				<el-table-column width="100" label="省/市工单" prop="isProvince">
					<template #default="{ row }">
						<span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="currentStepName" label="当前办理节点" show-overflow-tooltip width="150"></el-table-column>
				<el-table-column label="工单状态" show-overflow-tooltip width="100" prop="statusText"></el-table-column>
				<el-table-column label="标题" show-overflow-tooltip width="300">
					<template #default="{ row }">
						<span class="color-primary">{{ row.title }}</span>
					</template>
				</el-table-column>
				<el-table-column label="受理时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="节点期满时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.stepExpiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="工单期满时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="acceptType" label="受理类型" show-overflow-tooltip></el-table-column>
				<el-table-column label="紧急程度" show-overflow-tooltip prop="emergencyLevelText" width="100"></el-table-column>
				<el-table-column prop="sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
				<el-table-column prop="hotspotName" label="热点分类" show-overflow-tooltip width="100"></el-table-column>
				<el-table-column prop="employeeName" label="受理人" show-overflow-tooltip width="150">
					<template #default="{ row }">
						<span
							>{{ row.acceptorName }} <span v-if="row.acceptorStaffNo">[{{ row.acceptorStaffNo }}]</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100" fixed="right" align="center">
					<template #default="{ row }">
						<el-button link type="primary" @click="onOrderDetail(row)" title="查看工单详情" v-auth="'business:order:detail'"> 工单详情 </el-button>
					</template>
				</el-table-column>
			</template>
			<!-- 延期待办 -->
			<template v-if="activeName === '1'">
				<el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
				<el-table-column width="100" label="省/市工单" prop="isProvince">
					<template #default="{ row }">
						<span>{{ row.order?.isProvince ? '省工单' : '市工单' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="工单标题" show-overflow-tooltip width="300">
					<template #default="{ row }">
						<span class="color-primary">{{ row.order?.title }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="delayStateText" label="延期审批状态" show-overflow-tooltip width="120"></el-table-column>
				<el-table-column prop="expiredTime" label="受理时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.order?.expiredTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="延期申请时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="creatorOrgName" label="延期申请部门" show-overflow-tooltip width="120"></el-table-column>
				<el-table-column prop="creatorName" label="延期申请人" show-overflow-tooltip width="120"></el-table-column>
				<el-table-column prop="delayNum" label="延期申请时限" show-overflow-tooltip width="120"></el-table-column>
				<el-table-column prop="delayUnitText" label="延期申请单位" show-overflow-tooltip width="120"></el-table-column>
				<el-table-column prop="delayReason" label="申请理由" show-overflow-tooltip width="120"></el-table-column>
				<el-table-column label="申请前期满时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.applyDelayTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="通过后期满时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.afterDelay, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="100" fixed="right" align="center">
					<template #default="{ row }">
						<el-button link type="primary" @click="onDelayDetail(row)" title="查看延期详情"> 延期详情 </el-button>
					</template>
				</el-table-column>
			</template>
			<!-- 甄别待办 -->
			<template v-if="activeName === '2'">
        <el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column width="100" label="省/市工单" prop="isProvince">
          <template #default="{ row }">
            <span>{{ row.order?.isProvince ? '省工单' : '市工单' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="工单标题" show-overflow-tooltip width="300">
          <template #default="{ row }">
            <span class="color-primary">{{ row.order?.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="statusText" label="甄别状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="currentStepName" label="当前节点" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
        <el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="expiredTime" label="受理人" show-overflow-tooltip width="170">
          <template #default="{ row }">
							<span
              >{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
							</span>
          </template>
        </el-table-column>
        <el-table-column prop="order.actualHandleOrgName" label="接办部门" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column prop="order.startTime" label="受理时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="creationTime" label="甄别申请时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" label="甄别申请人" show-overflow-tooltip width="170"></el-table-column>
        <el-table-column prop="creatorOrgName" label="甄别申请部门" show-overflow-tooltip width="200"></el-table-column>
        <el-table-column prop="typeDicName" label="甄别申请类型" show-overflow-tooltip width="170"></el-table-column>
        <el-table-column prop="content" label="甄别申请原因" show-overflow-tooltip width="200"></el-table-column>
				<el-table-column label="操作" width="100" fixed="right" align="center">
					<template #default="{ row }">
						<el-button link type="primary" @click="onDiscernDetail(row)" title="查看甄别详情"> 甄别详情 </el-button>
					</template>
				</el-table-column>
			</template>
			<!-- 发布待办 -->
			<template v-if="activeName === '3'">
        <el-table-column prop="no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column width="100" label="省/市工单" prop="isProvince">
          <template #default="{ row }">
            <span>{{ row.isProvince ? '省工单' : '市工单' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="statusText" label="发布状态" show-overflow-tooltip></el-table-column>
        <el-table-column label="工单标题" show-overflow-tooltip width="300">
          <template #default="{ row }">
            <span class="color-primary">{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
        <el-table-column prop="expiredTime" label="受理人" show-overflow-tooltip width="170">
          <template #default="{ row }">
						<span
            >{{ row.acceptorName }} <span v-if="row.acceptorStaffNo">[{{ row.acceptorStaffNo }}]</span>
						</span>
          </template>
        </el-table-column>
        <el-table-column prop="counterSignTypeText" label="中心会签" show-overflow-tooltip width="100"></el-table-column>
				<el-table-column prop="actualHandleOrgName" label="接办部门" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="actualHandleTime" label="接办时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.actualHandleTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="受理时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="办结时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.filedTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
				<el-table-column label="操作" width="140" fixed="right" align="center">
					<template #default="{ row }">
            <el-button link type="primary" @click="onOrderDetail(row)" title="查看工单详情"> 工单详情 </el-button>
            <el-button link type="primary" @click="onRelease(row)" title="发布工单"> 发布 </el-button>
					</template>
				</el-table-column>
			</template>
			<!-- 回访待办 -->
			<template v-if="activeName === '4'">
        <el-table-column prop="order.no" label="工单编码" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column label="工单标题" show-overflow-tooltip width="300">
          <template #default="{ row }">
            <span class="color-primary">{{ row.order?.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="order.sourceChannel" label="来源方式" show-overflow-tooltip></el-table-column>
        <el-table-column prop="visitStateText" label="回访状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="order.acceptType" label="受理类型" show-overflow-tooltip width="120"></el-table-column>
        <el-table-column prop="order.hotspotName" label="热点分类" show-overflow-tooltip width="200"></el-table-column>
        <el-table-column prop="expiredTime" label="受理人" show-overflow-tooltip width="170">
          <template #default="{ row }">
						<span
            >{{ row.order?.acceptorName }} <span v-if="row.order?.acceptorStaffNo">[{{ row.order?.acceptorStaffNo }}]</span>
						</span>
          </template>
        </el-table-column>
        <el-table-column prop="order.orgLevelOneName" label="一级部门" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column prop="order.actualHandleOrgName" label="接办部门" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column prop="order.startTime" label="受理时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.order?.startTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="办结时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.order?.filedTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="发布时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.publishTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="回访任务创建时间" show-overflow-tooltip width="170">
          <template #default="{ row }">
            <span>{{ formatDate(row.creationTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="employeeName" label="回访人" show-overflow-tooltip width="150"></el-table-column>
        <el-table-column label="是否接通" show-overflow-tooltip width="150">
          <template #default="{ row }">
            <span>{{ row.isPutThrough ? '未接通' : '已接通' }}</span>
          </template>
        </el-table-column>
				<el-table-column label="操作" width="100" fixed="right" align="center">
					<template #default="{ row }">
						<el-button link type="primary" @click="onManpower(row)" title="工单回访"> 回访 </el-button>
					</template>
				</el-table-column>
			</template>
			<template #empty>
				<Empty />
			</template>
		</el-table>
		<!-- 工单详情 -->
		<order-detail ref="orderDetailRef"  @updateList="handleChange('0')"/>
    <!--  延期详情  -->
    <delay-detail ref="delayDetailRef" @updateList="handleChange('1')" />
    <!-- 甄别详情 -->
    <discern-detail ref="discernDetailRef" @updateList="handleChange('2')"/>
    <!-- 工单发布详情 -->
    <order-publish ref="orderPublishRef" @updateList="handleChange('3')"/>
    <!-- 回访 -->
    <visit-detail ref="visitDetailRef"  @updateList="handleChange('4')"/>
	</el-card>
</template>
<script setup lang="ts">
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { formatDate } from '/@/utils/formatTime';
import { useRouter } from 'vue-router';
import { orderListTodo } from '/@/api/todo/order';
import { delayList } from '/@/api/todo/delay';
import { screenList } from '/@/api/business/discern';
import { publishList } from '/@/api/todo/publish';
import { visitList } from '/@/api/todo/visit';
import {ElButton} from "element-plus";

const OrderDetail = defineAsyncComponent(() => import('/@/views/business/order/components/Order-detail.vue')); // 工单详情
const DelayDetail = defineAsyncComponent(() => import('/@/views/business/delay/components/Delay-detail.vue')); // 延期详情
const DiscernDetail = defineAsyncComponent(() => import('/@/views/business/discern/components/Discern-detail.vue')); // 甄别详情
const OrderPublish = defineAsyncComponent(() => import('/@/views/business/publish/component/Order-publish.vue')); // 发布详情
const VisitDetail = defineAsyncComponent(() => import('/src/views/business/visit/component/Visit-detail.vue')); // 回访详情
const state = reactive<any>({
	tableLoading: false, // 表格loading
	tableList: [], //表格数据
	queryParams: {
		PageIndex: 1,
		PageSize: 10,
	},
});
const tabsList = ref([
	{
		label: '工单待办',
		name: '0',
	},
	{
		label: '延期待办',
		name: '1',
	},
	{
		label: '甄别待办',
		name: '2',
	},
	{
		label: '发布待办',
		name: '3',
	},
	{
		label: '回访待办',
		name: '4',
	},
]);
const activeName = ref<string>('0'); // tab切换
// 查看工单详情
const orderDetailRef = ref<RefType>();
const onOrderDetail = (row: any) => {
	orderDetailRef.value.openDialog(row);
};
// 查看延期详情
const delayDetailRef = ref<RefType>();
const onDelayDetail = (row: any) => {
  delayDetailRef.value.openDialog(row);
};
// 查看甄别详情
const discernDetailRef = ref<RefType>();
const onDiscernDetail = (row: any) => {
  discernDetailRef.value.openDialog(row);
};
// 发布
const orderPublishRef = ref<RefType>(); // 工单发布详情ref
const onRelease = (row: any) => {
  orderPublishRef.value.openDialog(row);
};
// 工单回访
const visitDetailRef = ref<RefType>(); // 工单回访ref
const onManpower = (row: any) => {
  visitDetailRef.value.openDialog(row);
};
// tab切换
const handleChange = async (tab: any) => {
	state.tableLoading = true;
	switch (tab) {
		case '0': // 工单待办
			try {
				const res: any = await orderListTodo({...state.queryParams,IsApply:'false'});
				state.tableList = res.result?.items ?? [];
				state.tableLoading = false;
			} catch (error) {
				state.tableLoading = false;
			}
			break;
		case '1': // 延期待办
			try {
				const res: any = await delayList({ ...state.queryParams, IsApply: 'false' });
				state.tableList = res.result?.items ?? [];
				state.tableLoading = false;
			} catch (error) {
				state.tableLoading = false;
			}
			break;
		case '2': //甄别待办
			try {
				const res: any = await screenList({ ...state.queryParams, Status: '0' });
				state.tableList = res.result?.items ?? [];
				state.tableLoading = false;
			} catch (error) {
				state.tableLoading = false;
			}
			break;
		case '3': // 发布待办
			try {
				const res: any = await publishList({ ...state.queryParams });
				state.tableList = res.result?.items ?? [];
				state.tableLoading = false;
			} catch (error) {
				state.tableLoading = false;
			}
			break;
		case '4': // 回访待办
			try {
				const res: any = await visitList({ ...state.queryParams, VisitState: '2' });
				state.tableList = res.result?.items ?? [];
				state.tableLoading = false;
			} catch (error) {
				state.tableLoading = false;
			}
			break;
	}
};
// 跳转
const router = useRouter();
// 列表入口
const linkList = () => {
	switch (activeName.value) {
		case '0': // 工单待办
			router.push('/todo/order');
			break;
		case '1': // 延期待办
			router.push('/todo/delay');
			break;
		case '2': //甄别待办
			router.push('/todo/discern');
			break;
		case '3': // 发布待办
			router.push('/todo/publish');
			break;
		case '4': // 回访待办
			router.push('/todo/visit');
			break;
	}
};
onMounted(() => {
	handleChange(activeName.value);
});
</script>
