hotline-web/src/components/OrderDetail/index.vue

<template>
	<el-button link type="primary" @click="onOrderDetail" title="点击查看工单详情">
		<slot>工单详情</slot>
	</el-button>
	<el-dialog
		v-model="state.dialogVisible"
		class="order-detail-dialog"
		draggable
		ref="dialogRef"
		width="80%"
		append-to-body
		destroy-on-close
		@close="close"
	>
		<template #header>
			<el-tabs v-model="state.activeName" @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>
		</template>
		<!-- 工单详情 -->
		<el-collapse v-model="state.collapseArr" v-show="state.activeName === '0'" 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">
					<el-form label-width="100px" ref="ruleFormRef">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.transferPhone">
								<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-button
										plain
										title="录音文件"
										size="small"
										type="primary"
										class="ml8"
										@click="recordFile(state.ruleForm.recordingFileUrl)"
										v-if="state.ruleForm.recordingFileUrl"
										>录音文件</el-button
									>
								</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 class="ml5"> {{ 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.fromGenderText }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.contact">
								<el-form-item label="联系电话">
									<span v-if="showMaskNumber"> {{ state.ruleForm.contactMask }}</span>
									<span v-else>{{ state.ruleForm.contact }}</span>
									<el-button plain title="外呼" size="small" type="primary" class="ml8" @click="callPhone(state.ruleForm.contact)">外呼</el-button>
									<el-button plain title="查看号码" size="small" type="primary" class="ml8" @click="showMaskNumber = !showMaskNumber">{{
										showMaskNumber ? '查看号码' : '隐藏号码'
									}}</el-button>
								</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">
								<el-form-item label="受理短信"> {{ state.ruleForm.smsSendedText }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" 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="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm?.incidentPurpose">
								<el-form-item label="事发目的"> {{ state.ruleForm.incidentPurpose }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.enterpriseName">
								<el-form-item label="企业名称"> {{ state.ruleForm.enterpriseName }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" v-if="state.ruleForm.zhuanBanMingCheng">
								<el-form-item label="专班名称"> {{ state.ruleForm.zhuanBanMingCheng }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-form-item label="事发地址"> {{ state.ruleForm.address }} </el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-collapse-item>
			<el-collapse-item name="2">
				<template #title>
					<p class="pl20">
						<b class="font14">工单信息</b>
					</p>
				</template>
				<div class="collapse-container">
					<el-form label-width="100px" ref="ruleFormRef">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="来源方式"> {{ state.ruleForm.sourceChannel }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="受理类型"> {{ state.ruleForm.acceptType }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="工单编码">
									{{ state.ruleForm.no }} <span v-if="state.ruleForm.password"> 【{{ state.ruleForm.password }}】</span>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.provinceNo">
								<el-form-item label="省工单编码"> {{ state.ruleForm.provinceNo }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-if="state.ruleForm?.orderExtension?.orderTypeCode">
								<el-form-item label="工单类型">
									{{ state.ruleForm.orderExtension?.orderType }}
									<el-button link type="primary" class="ml10" @click="showExpandInfo"><SvgIcon name="ele-Document" class="mr2" /> 拓展信息</el-button>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="是否重复">
									{{
										state.ruleForm.duplicateIds && state.ruleForm.duplicateIds.length > 0 ? '是(' + state.ruleForm.duplicateIds.length + '次)' : '否'
									}}
									<el-button
										plain
										title="查看重复工单"
										size="small"
										type="primary"
										class="ml8"
										@click="showRepeatInfo"
										v-if="state.ruleForm.duplicateIds && state.ruleForm.duplicateIds.length > 0"
										>查看重复工单</el-button
									>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="紧急程度"> {{ state.ruleForm.emergencyLevelText }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="热点分类"> {{ state.ruleForm.hotspotSpliceName }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="受理人">
									<span
										>{{ state.ruleForm?.acceptorName }}
										<span v-if="state.ruleForm?.acceptorStaffNo">[{{ state.ruleForm?.acceptorStaffNo }}]</span></span
									>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.startTime">
								<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.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.title }} <el-tag class="ml10" v-if="state.ruleForm?.workflowId">{{ state.ruleForm.statusText }}</el-tag>
								</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="附件">
									<annex-list name="附件列表" readonly :businessId="state.ruleForm.id" classify="查看附件" v-model="state.ruleForm.files" />
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-collapse-item>
			<el-collapse-item name="3">
				<template #title>
					<p class="pl20">
						<b class="font14">结果信息</b>
					</p>
				</template>
				<div class="collapse-container">
					<el-form label-width="100px" ref="ruleFormRef">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
								<el-form-item label="交办部门"> 热线中心 </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="交办时间"> {{ formatDate(state.ruleForm.centerToOrgTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="办理部门"> {{ state.ruleForm.actualHandleOrgName }}</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="办理时间"> {{ formatDate(state.ruleForm.actualHandleTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="工单办理期限"> {{ state.ruleForm.timeLimit }}</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="工单期满时间"> {{ formatDate(state.ruleForm.expiredTime, '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="办理结果"> {{ state.ruleForm.actualOpinion }} </el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-collapse-item>
			<el-collapse-item name="4" v-if="state.supplements && state.supplements.length">
				<template #title>
					<p class="pl20">
						<b class="font14">补充信息</b>
					</p>
				</template>
				<div class="collapse-container">
					<div v-for="i in state.supplements" :key="i" class="plug-container">
						<el-form label-width="100px" ref="ruleFormRef" class="pt10 pb10">
							<el-row :gutter="10">
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="补充部门">
										{{ i.creator.organization }}
									</el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="补充时间"> {{ formatDate(i.creationTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
								</el-col>
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
									<el-form-item label="补充人">
										{{ i.creator.name }} <span v-if="i.creator.staffNo">[{{ i.creator.staffNo }} ]</span></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-row>
						</el-form>
					</div>
				</div>
			</el-collapse-item>
			<el-collapse-item name="5" v-if="state.workflow.assignOrgs">
				<template #title>
					<p class="pl20">
						<b class="font14">重办信息</b>
					</p>
				</template>
				<div class="collapse-container">
					<el-form label-width="100px" ref="ruleFormRef">
						<el-row :gutter="10">
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="被重办部门"> {{ state.workflow.assignOrgs }}</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :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="6" :xl="6">
								<el-form-item label="重办理由"> {{ state.workflow.timeLimit }} </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>
		<!-- 历史工单 -->
		<div v-show="state.activeName === '1'">
			<history-order :ruleForm="state.ruleForm" :orderId="state.orderId" ref="historyOrderRef" readonly :maxHeight="500" />
		</div>
		<!-- 回访记录 -->
		<div v-show="state.activeName === '2'">
			<!--			<el-table :data="state.ruleForm.orderVisits">
				<el-table-column prop="visitStateText" label="回访状态" show-overflow-tooltip width="100"></el-table-column>
				<el-table-column prop="visitTypeText" label="回访方式" show-overflow-tooltip width="100"></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="employeeName" label="回访人" show-overflow-tooltip></el-table-column>
				<el-table-column prop="visitTime" label="回访时间" show-overflow-tooltip width="170">
					<template #default="{ row }">
						<span>{{ formatDate(row.visitTime, 'YYYY-mm-dd HH:MM:SS') }}</span>
					</template>
				</el-table-column>
				<el-table-column label="语音评价" show-overflow-tooltip>
					<template #default="{ row }">
						<span v-for="item in row.orderVisitDetails">
							<span v-if="item.visitTarget === 10">{{ item.voiceEvaluateText }}</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column label="话务员满意度" show-overflow-tooltip>
					<template #default="{ row }">
						<span v-for="item in row.orderVisitDetails">
							<span v-if="item.visitTarget === 10">{{ item.seatEvaluateText }}</span>
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="statusText" label="操作" width="100" fixed="right" align="center">
					<template #default="{ row }">
						<el-button @click="onVisitDetail(row)" link type="primary"> 查看 </el-button>
					</template>
				</el-table-column>
				<template #empty>
					<Empty />
				</template>
			</el-table>-->
			<el-form
				label-width="120px"
				label-position="left"
				v-if="state.ruleForm.orderVisits && state.ruleForm.orderVisits.length"
				class="show-info-form"
			>
				<el-row :gutter="10">
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="回访状态">
							{{ state.ruleForm?.orderVisits[0]?.visitStateText }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="回访方式">
							{{ state.ruleForm?.orderVisits[0]?.visitTypeText }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="当前回访人">
							{{ state.ruleForm?.orderVisits[0]?.employeeName }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="回访任务创建时间" label-width="130px">
							{{ formatDate(state.ruleForm?.orderVisits[0]?.creationTime, 'YYYY-mm-dd HH:MM:SS') }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="回访时间">
							{{ formatDate(state.ruleForm?.orderVisits[0]?.visitTime, 'YYYY-mm-dd HH:MM:SS') }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
						<el-form-item label="回访标签">
							<span v-if="state.ruleForm?.orderVisits[0]?.isPutThrough !== null">{{
								state.ruleForm?.orderVisits[0]?.isPutThrough ? '已接通' : '未接通'
							}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-for="item in state.ruleForm?.orderVisits[0]?.orderVisitDetails" :key="item.id" :gutter="10">
					<!-- 务员评价 -->
					<template v-if="item.visitTarget === 10">
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-divider content-position="left">
								<el-text tag="b" size="large"> 话务员回访 </el-text>
							</el-divider>
						</el-col>
						<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="语音评价">
								{{ item.voiceEvaluateText }}
							</el-form-item>
						</el-col>
						<el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
							<el-form-item label="话务员评价">
								{{ item.seatEvaluateText }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="话务员回访内容">
								{{ item.visitContent }}
							</el-form-item>
						</el-col>
					</template>
					<!-- 部门评价 -->
					<template v-if="item.visitTarget === 20">
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-divider content-position="left">
								<el-text tag="b" size="large"> {{ item.visitOrgName }} </el-text>
							</el-divider>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
							<el-form-item label="部门办件结果">
								{{ item.orgProcessingResults?.value }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
							<el-form-item label="不满意原因">
								{{ item.orgNoSatisfiedReason?.map((item) => item.value).join(',') }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
							<el-form-item label="部门办件态度">
								{{ item.orgHandledAttitude?.value }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="部门回访内容">
								{{ item.visitContent }}
							</el-form-item>
						</el-col>
					</template>
				</el-row>
			</el-form>
			<Empty v-else />
		</div>
		<!-- 市民画像 -->
		<div v-show="state.activeName === '3'" class="flex-center-center">
			<div style="max-width: 800px">
				<citizen-portrait :orderInfo="state.ruleForm" ref="citizenPortraitRef" :editable="false" />
			</div>
		</div>

		<template #footer>
			<span class="dialog-footer">
				<!-- 单会签中+未到汇总节点 -->
				<!--				<el-button type="primary" @click="onCloseCountersignature" :loading="state.loading" v-auth="'business:order:closeCountersignature'"
					>结束会签</el-button
				>-->
				<!-- 有流程信息就可以查询明细 -->
				<el-button type="primary" @click="onRecord" :loading="state.loading" v-if="state.ruleForm?.workflowId">流程明细</el-button>
				<!-- 有流程信息就可以撤回 -->
				<el-button type="primary" @click="onSpecialHandle" :loading="state.loading" v-if="state.ruleForm?.workflowId" v-auth="'business:order:teti'"
					>撤 回（特提）</el-button
				>
				<!-- 办理中和会签中，可以督办 -->
				<el-button
					type="primary"
					@click="onSupervise"
					:loading="state.loading"
					v-if="[100, 200].includes(state.ruleForm?.status)"
					v-auth="'business:order:supervise:apply'"
					>督 办</el-button
				>
				<!-- 办理中和会签中，可以催办 -->
				<el-button
					type="primary"
					@click="onUrge"
					:loading="state.loading"
					v-if="[100, 200].includes(state.ruleForm?.status)"
					v-auth="'business:order:urge:apply'"
				>
					催 办</el-button
				>
				<!-- 办理中和会签中，可以延期申请 -->
				<el-button
					type="primary"
					@click="onSubmit('延期申请', '延期附件')"
					:loading="state.loading"
					v-if="[100, 200].includes(state.ruleForm?.status)"
					v-auth="'business:order:delay'"
					>延 期</el-button
				>
				<!-- 办理中和会签中并且应该自己办理 -->
				<el-button
					type="primary"
					@click="onSubmit('工单办理')"
					:loading="state.loading"
					v-if="[100, 200].includes(state.ruleForm?.status) && state.workflow.canHandle"
					v-auth="'business:order:handle'"
					>办 理</el-button
				>
				<!-- 流程结束之后不展示补充按钮 -->
				<!--				<el-button type="primary" @click="onSupply" :loading="state.loading" v-if="[0].includes(state.workflow.status)"
          >补 充</el-button
        >-->
				<!--				<el-button type="primary" @click="onRevoke" :loading="state.loading">撤 销</el-button>-->
				<!-- 工单未归档都可以撤回 -->
				<!--				<el-button
          type="primary"
          @click="onSubmit('工单撤回')"
          :loading="state.loading"
          v-if="[0].includes(state.ruleForm.workflow?.status)"
          >撤 回（特提）</el-button
        >-->
				<!-- 办理中和会签中并且应该自己办理 -->
				<el-button
					type="primary"
					@click="onSubmit('工单退回', '退回附件')"
					:loading="state.loading"
					v-if="[100, 200].includes(state.ruleForm?.status) && state.workflow.canHandle"
					v-auth="'business:order:return'"
					>退 回</el-button
				>
			</span>
		</template>
	</el-dialog>
	<!-- 扩展信息 -->
	<order-expand-detail ref="orderExpandDetailRef" />
	<!-- 流转记录 -->
	<audit-record ref="AuditRecordRef">
		<template #header>
			<el-form label-width="90px" ref="ruleFormRef">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
						<el-form-item label="工单编码"> {{ state.ruleForm.no }} </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16">
						<el-form-item label="工单标题"> {{ state.ruleForm.title }} </el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</template>
	</audit-record>
	<!-- 工单补充 -->
	<order-supply ref="orderSupplyRef" @onSupplySuccess="onSupplySuccess" />
	<!-- 工单撤销 -->
	<order-revoke ref="orderRevokeRef" @onRevokeSuccess="onRevokeSuccess" />
	<!-- 工单督办 -->
	<order-supervise ref="orderSuperviseRef" @updateList="onSuperviseSuccess" />
	<!-- 工单催办 -->
	<order-urge ref="orderUrgeRef" @updateList="onSuperviseSuccess" />
	<!-- 流程审批 -->
	<process-audit ref="processAuditRef" @orderProcessSuccess="orderProcessSuccess" />
	<!-- 重复工单 -->
	<order-repeat ref="orderRepeatRef" />
	<!--  特提 -->
	<special-handle-order ref="specialHandleOrderRef" @updateList="onSpecialHandleSuccess" />
	<!-- 播放录音 -->
	<play-record ref="playRecordRef" />
</template>

<script setup lang="ts" name="orderDetail">
import { defineAsyncComponent, PropType, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { throttle, transformFile } from '@/utils/tools';
import { orderDetail } from '@/api/business/order';
import { ElButton, ElMessage, ElMessageBox } from 'element-plus';
import { ola } from '@/utils/ola_api';
import { formatDate } from '@/utils/formatTime';
import Empty from '@/components/Empty/index.vue';

// 引入组件
const OrderExpandDetail = defineAsyncComponent(() => import('@/views/business/order/components/Order-expand-detail.vue')); // 扩展信息
const OrderSupply = defineAsyncComponent(() => import('@/views/business/order/components/Order-supply.vue')); // 工单补充
const OrderRevoke = defineAsyncComponent(() => import('@/views/business/order/components/Order-revoke.vue')); // 工单撤销
const OrderSupervise = defineAsyncComponent(() => import('@/views/business/supervise/components/Order-supervise.vue')); // 工单督办
const OrderUrge = defineAsyncComponent(() => import('@/views/query/urge/components/Order-urge.vue')); // 工单催办
const OrderRepeat = defineAsyncComponent(() => import('@/views/business/order/components/Order-repeat.vue')); // 重复工单
const AuditRecord = defineAsyncComponent(() => import('@/components/AuditRecord/index.vue')); // 审核记录
const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表
const ProcessAudit = defineAsyncComponent(() => import('@/components/ProcessAudit/index.vue')); // 流程审批
const HistoryOrder = defineAsyncComponent(() => import('@/views/todo/seats/accept/History.vue')); // 历史工单
const CitizenPortrait = defineAsyncComponent(() => import('@/views/todo/seats/accept/Citizen-portrait.vue')); // 市民坏画像
const SpecialHandleOrder = defineAsyncComponent(() => import('@/views/business/special/components/Special-apply-order.vue')); // 特提申请
const PlayRecord = defineAsyncComponent(() => import('@/views/tels/callLog/component/Play-record.vue')); // 播放录音

const props = defineProps({
	order: {
		type: Object as PropType<any>,
		default: {},
		required: true,
	},
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 弹窗显示隐藏
	ruleForm: {
		// 表单数据
	},
	activeName: '0', // tab切换
	tabPaneList: [
		// tab列表
		{
			label: '工单详情',
			value: '0',
		},
		{
			label: '历史工单',
			value: '1',
		},
		{
			label: '回访详情',
			value: '2',
		},
		{
			label: '市民画像',
			value: '3',
		},
	],
	collapseArr: ['1', '2', '3'], //展开列表
	loading: false,
	supplements: [], // 补充内容
	workflow: {}, // 工单流程内容
	orderId: '', //工单id
});
const showMaskNumber = ref<boolean>(true); // 是否展示号码
const ruleFormRef = ref<RefType>(); // 表单ref
const router = useRouter(); // 路由
// 查看工单详情
const getOrderDetail = async (id: string) => {
	state.loading = true;
	try {
		const res: any = await orderDetail(id);
		state.ruleForm = res.result;
		state.ruleForm.files = transformFile(state.ruleForm.files);
		state.workflow = state.ruleForm?.workflow ?? {};
		state.supplements = res.result?.workflow?.supplements ?? [];
		state.loading = false;
		state.dialogVisible = true;
	} catch (error) {
		state.loading = false;
		state.dialogVisible = false;
	}
};
// 查询历史工单
const historyOrderRef = ref<RefType>(); // 历史工单
const getHistoryList = async (id: string) => {
	state.loading = true;
	try {
		historyOrderRef.value.searchHistory();
		state.dialogVisible = true;
		state.loading = false;
	} catch (error) {
		state.loading = false;
		state.dialogVisible = false;
	}
};
// 查询市民画像
const citizenPortraitRef = ref<RefType>(); // 市民画像
const getPortraitList = async (id: string) => {
	state.loading = true;
	try {
		citizenPortraitRef.value?.getCitizen(state.ruleForm);
		state.dialogVisible = true;
		state.loading = false;
	} catch (error) {
		console.log(error, '2');
		state.loading = false;
		state.dialogVisible = false;
	}
};
// 打开弹窗
const openDialog = (val: any) => {
	if (!val || !val.id) {
		ElMessage.error('工单id不能为空');
		return;
	}
	state.orderId = val.id;
	if (val.activeName) {
		state.activeName = val.activeName; //传入查询tab
		handleClick(val.activeName);
	} else {
		getOrderDetail(state.orderId);
	}
};
const close = () => {
	state.activeName = '0';
	currentVisitObj.value = null;
};
// 切换tab 查询列表
const handleClick = (val: string) => {
	switch (val) {
		case '0': //工单详情
			getOrderDetail(state.orderId);
			break;
		case '1': // 历史工单
			getHistoryList(state.orderId);
			break;
		case '2': // 回访记录
			break;
		case '3': // 市民画像
			getPortraitList(state.orderId);
			break;
		default:
			getOrderDetail(state.orderId);
			break;
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 查看录音文件
const playRecordRef = ref<RefType>();
const recordFile = (url: string) => {
	playRecordRef.value.openDialog(url);
};
// 电话外呼
const callPhone = (number: number | string) => {
	ola.dial(number);
};
const orderRepeatRef = ref<RefType>();
// 展示重复工单列表
const showRepeatInfo = () => {
	orderRepeatRef.value.openDialog(state.ruleForm);
};
// 展示扩展表单
const orderExpandDetailRef = ref<RefType>(); // 扩展信息
const showExpandInfo = () => {
	orderExpandDetailRef.value.openDialog(state.ruleForm.orderExtension);
};
// 流转记录
const AuditRecordRef = ref<RefType>(); // 流转记录
const onRecord = () => {
	const params = {
		dialogTitle: '流转记录',
		...state.ruleForm,
	};
	AuditRecordRef.value.openDialog(params);
};
// 提交流程
const processAuditRef = ref<RefType>(); // 处理流程
const onSubmit = throttle((val: string, annexName: string = '办理附件', classify: string = '办理附件') => {
	const params = {
		id: state.ruleForm.workflowId,
		processType: val,
		orderDetail: state.ruleForm,
		extra: {
			dialogTitle: val,
			inputPlaceholder: '办理意见',
			annexName,
			classify,
		},
	};
	processAuditRef.value.openDialog(params);
}, 300);
// 流程提交成功
const orderProcessSuccess = () => {
	closeDialog();
	emit('updateList');
};
// 补充信息
const orderSupplyRef = ref<RefType>(); // 工单补充
const onSupply = () => {
	// 穿入当前流程id
	orderSupplyRef.value.openDialog(state.ruleForm);
};
// 补充意见提交成功
const onSupplySuccess = () => {
	handleClick(state.activeName);
	emit('updateList');
};
// 撤销
const orderRevokeRef = ref<RefType>(); // 工单撤销
const onRevoke = () => {
	orderRevokeRef.value.openDialog(state.ruleForm);
};
// 撤销提交成功
const onRevokeSuccess = () => {
	handleClick(state.activeName);
	emit('updateList');
};
// 督办
const orderSuperviseRef = ref<RefType>(); // 工单督办
const onSupervise = () => {
	orderSuperviseRef.value.openDialog(state.ruleForm);
};
// 催办
const orderUrgeRef = ref<RefType>(); // 工单催办
const onUrge = () => {
	orderUrgeRef.value.openDialog(state.ruleForm);
};
// 督办提交成功
const onSuperviseSuccess = () => {
	handleClick(state.activeName);
	emit('updateList');
};
// 查看回访详情
const currentVisitObj = ref<any>();
const onVisitDetail = (row: any) => {
	currentVisitObj.value = row;
};
// 特提
const specialHandleOrderRef = ref<RefType>(); // 特提
const onSpecialHandle = () => {
	specialHandleOrderRef.value.openDialog(state.ruleForm);
};
// 特提提交成功
const onSpecialHandleSuccess = () => {
	handleClick(state.activeName);
	emit('updateList');
};
// 结束会签
const onCloseCountersignature = () => {
	ElMessageBox.confirm(`当前工单正在会签中，是否确认结束会签?`, '提示', {
		confirmButtonText: '结束会签',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			handleClick(state.activeName);
			emit('updateList');
		})
		.catch(() => {});
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
// 工单详情
const onOrderDetail = () => {
	openDialog(props.order);
};
</script>
<style lang="scss" scoped>
.order-detail-container {
	display: inline-flex;
}
.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: 10px !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;
			}
		}
	}
}
:deep(.el-tabs__item) {
	font-size: var(--el-font-size-base);
}
</style>