<template>
	<div>
		<el-dialog v-model="state.isShowDialog" draggable title="工单详情" ref="dialogRef" width="80%" append-to-body>
			<el-tabs v-model="state.activeName" class="demo-tabs" @tab-change="handleClick">
				<el-tab-pane :name="item.value" v-for="item in state.tabPaneList" :key="item.value" :label="item.label"></el-tab-pane>
			</el-tabs>
			<!-- 工单详情 -->
			<el-collapse v-model="state.collapseArr" v-if="state.activeName === 'default'" class="collapse-box" v-loading="state.loading">
				<!-- 来电信息 -->
				<el-collapse-item name="1">
					<template #title>
						<p class="pl20">
							<b class="font14">来电信息</b>
						</p>
					</template>
					<div class="collapse-container pb1">
						<el-form label-width="100px" ref="ruleFormRef">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="来源渠道"> {{ state.ruleForm.channelText }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="转接来源"> {{ state.ruleForm.transferPhone }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.fromPhone">
									<el-form-item label="来电号码">
										{{ state.ruleForm.fromPhone }}
										<el-popover :width="480" trigger="hover">
											<template #reference>
												<el-button link type="primary" class="ml5" title="播放录音"><SvgIcon name="ele-Headset" size="16px" /></el-button>
											</template>
											<!-- 音频播放器 -->
											<!-- <AudioPlayer ref="AudioPlayerRef" :url="state.ruleForm.url" /> -->
										</el-popover>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="服务坐席"> {{ state.ruleForm.employeeName }}[{{ state.ruleForm.employeeStaffNo }}] </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="来电/信人">
										{{ state.ruleForm.fromName }} <span v-if="state.ruleForm.fromGenderText != '未知'"> {{ state.ruleForm.fromGenderText }}</span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="来电/信人身份"> {{ state.ruleForm.identityTypeText }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.licenceType">
									<el-form-item label="证件类型"> {{ state.ruleForm.licenceType }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.licenceNo">
									<el-form-item label="证件号码"> {{ state.ruleForm.licenceNo }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.ageRange">
									<el-form-item label="年龄段"> {{ state.ruleForm.ageRange }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.needContact">
									<el-form-item label="联系电话"> 无需联系 </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-else>
									<el-form-item label="联系电话"> {{ state.ruleForm.contactMask }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="受理短信">
										<span style="color: var(--el-color-danger)" v-if="state.ruleForm.acceptSms"
											>未发送<el-button link type="primary" class="ml5" title="重新发送"
												><SvgIcon name="iconfont icon-zhongxinfasong" size="16px" /></el-button
										></span>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="受理时间"> {{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.company">
									<el-form-item label="工作单位"> {{ state.ruleForm.company }} </el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-collapse-item>
				<!-- 诉求信息 -->
				<el-collapse-item title="Feedback" name="2">
					<template #title>
						<p class="pl20">
							<b class="font14">诉求信息</b>
						</p>
					</template>
					<div class="collapse-container pb1">
						<el-form label-width="100px" ref="ruleFormRef">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item label="工单标题">
										{{ state.ruleForm.title }} <el-tag class="ml10">{{ state.ruleForm.statusText }}</el-tag>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
									<el-form-item label="工单编码"> {{ state.ruleForm.no }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
									<el-form-item label="紧急程度"> {{ state.ruleForm.emergencyLevelText }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
									<el-form-item label="受理类型"> {{ state.ruleForm.acceptTypeText }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
									<el-form-item label="工单类型">
										{{ state.ruleForm.orderTypeText }}
										<!-- 投诉或者建议并且是12315工单才有扩展信息 -->
										<el-button
											link
											type="primary"
											v-if="state.ruleForm.orderType === 1 && (state.ruleForm.acceptType === 5 || state.ruleForm.acceptType === 6)"
											class="ml10"
											@click="showExpandInfo"
											><SvgIcon name="ele-Document" class="mr2" /> 拓展信息</el-button
										>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
									<el-form-item label="热点分类"> {{ state.ruleForm.hotspotSpliceName }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8" v-if="state.ruleForm.incidentTime">
									<el-form-item label="事发时间"> {{ formatDate(state.ruleForm.incidentTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
									<el-form-item label="事发地址"> {{ state.ruleForm.address }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item label="重复工单" v-if="state.ruleForm.duplicateTitle">
										<el-button link type="primary" @click="showduplicateInfo"> {{ state.ruleForm.duplicateTitle }}</el-button>
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.pushType">
									<el-form-item label="推送分类"> {{ state.ruleForm.pushType }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item label="投诉详情">
										{{ state.ruleForm.content }}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item label="附件"> </el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-collapse-item>
				<!-- 补充信息 -->
				<el-collapse-item title="Efficiency" name="3" v-if="state.supplements.length">
					<template #title>
						<p class="pl20">
							<b class="font14">补充信息</b>
						</p>
					</template>
					<div class="collapse-container">
						<div v-for="(i, index) in state.supplements" :key="i" class="plug-container">
							<p class="plug-container-title">第{{ upNumber(index + 1) }}次</p>
							<el-form label-width="100px" ref="ruleFormRef" class="pt10 pb10">
								<el-row :gutter="35">
									<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
										<el-form-item label="补充人"> {{ i.creator.name }}[{{ i.creator.staffNo }} ] </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
										<el-form-item label="补充时间"> {{ formatDate(i.creator.creationTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
										<el-form-item label="补充详情">
											{{ i.opinion }}
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
										<el-form-item label="附件"> </el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</div>
					</div>
				</el-collapse-item>
				<el-collapse-item title="Controllability" name="4" v-if="state.workflow.assignOrgs">
					<template #title>
						<p class="pl20">
							<b class="font14">办件结果</b>
						</p>
					</template>
					<div class="collapse-container pb1">
						<el-form label-width="100px" ref="ruleFormRef">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item label="接办部门"> {{ state.workflow.assignOrgs }}</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
									<el-form-item label="交办时间"> {{ formatDate(state.workflow.assignTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
									<el-form-item label="办理时限"> {{ state.workflow.timeLimit }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
									<el-form-item label="办理期限"> {{ formatDate(state.workflow.expiredTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
									<el-form-item label="办理时间"> {{ formatDate(state.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
								</el-col>
								<!-- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="6">
									<el-form-item label="办理时间">
										{{ formatDate(state.ruleForm.workflow.completeTime, 'YYYY-mm-dd HH:MM:SS') }}
										<el-popover placement="top-start" popper-class="demo-tabs-form" :width="state.yanqiList.length >= 1 ? 400 : 300" trigger="hover">
											<template #reference>
												<el-tag class="ml10" style="cursor: pointer" type="danger">已延期 </el-tag>
											</template>
											<p class="title"><b>延期申请记录</b></p>
											<template v-if="state.yanqiList.length >= 1">
												<el-tabs tab-position="left" v-model="state.yantiState">
													<el-tab-pane :label="'第' + index + '次'" :name="item.id" v-for="(item, index) in state.yanqiList" :key="index">
														<template v-if="state.yantiState === index + 1">
															<el-form label-width="100px" ref="ruleFormRef">
																<el-row :gutter="0">
																	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
																		<el-form-item label="原办理期限">{{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
																	</el-col>
																	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
																		<el-form-item label="申请部门">市场监管部门</el-form-item>
																	</el-col>
																	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
																		<el-form-item label="申请时间">{{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
																	</el-col>
																	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
																		<el-form-item label="申请延期">{{ index + 1 }}个工作日</el-form-item>
																	</el-col>
																	<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
																		<el-form-item label="新办理期限">{{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
																	</el-col>
																</el-row>
															</el-form>
														</template>
													</el-tab-pane>
													<template> </template>
												</el-tabs>
											</template>
											<template v-else>
												<el-form label-width="100px" ref="ruleFormRef">
													<el-form-item label="原办理期限">{{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
													<el-form-item label="申请部门">市场监管部门</el-form-item>
													<el-form-item label="申请时间">{{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
													<el-form-item label="申请延期">3个工作日</el-form-item>
													<el-form-item label="新办理期限">{{ formatDate(state.ruleForm.startTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
												</el-form>
											</template>
										</el-popover>
									</el-form-item>
								</el-col> -->
								<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
									<el-form-item label="办理意见"> {{ state.workflow.opinion }} </el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</el-collapse-item>
			</el-collapse>

			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onRecord" :loading="state.loading">流转记录</el-button>
					<!-- 工单未归档和可以办理展示办理按钮 -->
					<el-button type="primary" @click="onSubmit('提交', 'next')" :loading="state.loading" v-if="state.ruleForm.status != 60 && state.workflow.canHandle">办 理</el-button>
					<!-- <el-button type="primary" @click="onSubmit('延期')" :loading="state.loading">延 期</el-button> -->
					<!-- 流程结束之后不展示补充按钮 -->
					<el-button type="primary" @click="onSupply" :loading="state.loading" v-if="state.workflow.status != 2">补 充</el-button>
					<!-- <el-button type="primary" @click="onSubmit('督办')" :loading="state.loading">督 办</el-button> -->
					<!-- <el-button type="primary" @click="onSubmit('撤销')" :loading="state.loading">撤 销</el-button> -->
					<!-- 工单未归档都可以撤回 -->
					<el-button type="primary" @click="onSubmit('撤回', 'recall')" :loading="state.loading" v-if="state.ruleForm.status != 60">撤 回</el-button>
					<!-- 工单未归档和可以办理展示退回按钮 -->
					<el-button type="primary" @click="onSubmit('退回')" :loading="state.loading" v-if="state.ruleForm.status != 60 && state.workflow.canHandle">退 回</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 处理流程 -->
		<Process ref="processRef" @onSubmitProcess="onSubmitProcess" />
		<!-- 扩展信息 -->
		<ExpandForm ref="ExpandFormRef" />
		<!-- 流转记录 -->
		<CrculationRecord ref="CrculationRecordRef" />
		<!-- 补充信息 -->
		<Supply ref="SupplyRef" @onSupplySubmit="onSupplySubmit" />
	</div>
</template>

<script setup lang="ts" name="orderDetail">
import { defineAsyncComponent, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { throttle, commonEeum, upNumber } from '/@/utils/tools';
import { orderDetail } from '/@/api/business/order';
import { formatDate } from '/@/utils/formatTime';

// 引入组件
const ExpandForm = defineAsyncComponent(() => import('/@/views/business/order/components/Expand.vue'));
const CrculationRecord = defineAsyncComponent(() => import('/@/views/business/order/components/CrculationRecord.vue'));
const Process = defineAsyncComponent(() => import('/@/views/business/order/components/Process.vue'));
const Supply = defineAsyncComponent(() => import('/@/views/business/order/components/Supply.vue'));
const AudioPlayer = defineAsyncComponent(() => import('/@/components/AudioPlayer/index.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList', 'handle']);
// 定义变量内容
const state = reactive<any>({
	isShowDialog: false,
	ruleForm: { url: '' } as any,
	activeName: 'default',
	tabPaneList: [
		{
			label: '工单详情',
			value: 'default',
		},
		{
			label: '回访详情',
			value: 'visit',
		},
		{
			label: '历史工单',
			value: 'history',
		},
		{
			label: '市民画像',
			value: 'image',
		},
		{
			label: '接口日志',
			value: 'log',
		},
	],
	collapseArr: ['1', '2', '3', '4'], //展开列表
	yantiState: 1,
	yanqiList: [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }],
	loading: false,
	supplements: [],
	workflow: {},
	orderId: '',
});
const ruleFormRef = ref();
const processRef = ref();
const ExpandFormRef = ref();
const CrculationRecordRef = ref();
const SupplyRef = ref();
const AudioPlayerRef = ref();
const router = useRouter();
// 打开弹窗
const openDialog = (val: any) => {
	state.orderId = val.id;
	getDeail(val.id);
};
// 查看详情
const getDeail = async (id: string) => {
	state.loading = true;
	try {
		const res: any = await orderDetail(id);
		state.ruleForm = res.result ?? {};
		state.supplements = state.ruleForm?.workflow?.supplements ?? [];
		state.workflow = state.ruleForm?.workflow ?? {};
		state.loading = false;
		state.isShowDialog = true;
	} catch (error) {
		state.loading = false;
		state.isShowDialog = false;
	}
};
// 展示扩展表单
const showExpandInfo = () => {
	let form: any = {};
	if (state.ruleForm.acceptType === 5) {
		// 举报
		form = state.ruleForm.orderReport;
		form.orderTypeText = '12315市场监管局受理单';
		form.acceptTypeText = '举报';
	} else if (state.ruleForm.acceptType === 6) {
		//投诉
		form = state.ruleForm.orderComplain;
		form.orderTypeText = '12315市场监管局受理单';
		form.acceptTypeText = '投诉';
	}
	ExpandFormRef.value.openDialog(form);
};
// 展示重复工单详情
const showduplicateInfo = () => {
	state.isShowDialog = false;
	router.push({
		name: 'repeatOrderDetail',
		params: {
			id: state.ruleForm.duplicateId,
			tagsViewName: '工单详情-' + state.ruleForm.duplicateTitle,
		},
	});
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 切换tab 查询列表
const handleClick = (val: string) => {
	console.log(val);
};
// 流转记录
const onRecord = () => {
	CrculationRecordRef.value.openDialog(state.ruleForm);
};
// 办理 下一步
const onSubmit = throttle((val: string, type?: string) => {
	processRef.value.openDialog({ id: state.ruleForm.workflowId, title: val, processType: type, commonEeum: commonEeum.OrderCirculation });
}, 1000);
// 补充信息
const onSupply = () => {
	// 穿入当前流程id
	SupplyRef.value.openDialog(state.ruleForm);
};
// 补充意见提交成功
const onSupplySubmit = () => {
	getDeail(state.orderId);
};
// 流程保存
const onSubmitProcess = () => {
	state.isShowDialog = false;
	emit('updateList');
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
<style lang="scss" scoped>
.collapse-box {
	:deep(.el-collapse-item__header) {
		background-color: var(--hotline-bg-main-color);
		height: 40px;
		border-radius: var(--el-border-radius-base);
	}
	:deep(.el-collapse-item__content) {
		padding-bottom: 0 !important;
		.el-form-item {
			margin-bottom: 5px;
			.el-form-item__content {
				line-height: 24px;
			}
		}
	}
	.collapse-container {
		padding: 10px;
		.plug-container {
			border: var(--el-border);
			border-radius: var(--el-border-radius-base);
			margin-bottom: 15px;
			&:last-child {
				margin-bottom: 0;
			}
			.plug-container-title {
				padding: 10px 15px;
				font-weight: bold;
				border-bottom: var(--el-border);
				font-size: var(--el-font-size-medium);
			}
		}
	}
}
</style>
<style lang="scss">
.demo-tabs-form {
	.title {
		font-size: var(--el-font-size-medium);
		padding: 10px 15px 20px 15px;
	}
	.el-form-item {
		margin-bottom: 0px !important;
	}
}
</style>
