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

<template>
	<el-button class="button-select" link :type="props.order?.canSign ? 'danger' : '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"
		:close-on-click-modal="false"
	>
		<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)"
										v-if="state.ruleForm?.recordingAbsolutePath"
										>录音文件</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 }}
								</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" 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">
								<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.fullAddress }} </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 && userInfos.isCenter"> 【{{ 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="省工单编码">
									<div style="word-break: break-all">{{ state.ruleForm.provinceNo }}</div>
								</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.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>
								</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="12" :md="8" :lg="6" :xl="6" v-if="['ZiGong'].includes(themeConfig.appScope) && state.ruleForm.focusOnEvents">
								<el-form-item label="重点标签">
									<span class="color-danger" v-if="state.ruleForm.isUrgent">紧急，</span>
									<span class="color-danger" v-if="state.ruleForm.is24HoursComplete">24小时办结，</span>
									<span class="color-danger" v-if="state.ruleForm.isThreePartyConference">三方通话</span>
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="['ZiGong'].includes(themeConfig.appScope) && state.ruleForm.orderTag">
								<el-form-item label="工单标签"> {{ state.ruleForm.orderTag }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="['ZiGong'].includes(themeConfig.appScope) && state.ruleForm.company">
								<el-form-item label="工作单位"> {{ state.ruleForm.company }} </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="受理内容">
									<div v-html="showKeyWord(state.ruleForm.content, state.ruleForm.sensitive)" class="formatted-text"></div>
								</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" class="show-info-form">
						<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" v-if="state.ruleForm.centerToOrgTime">
								<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" v-if="state.ruleForm.actualHandleOrgNam">
								<el-form-item label="办理部门"> {{ state.ruleForm.actualHandleOrgName }}</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.actualHandleTime">
								<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" v-if="state.ruleForm.timeLimit">
								<el-form-item label="工单办理期限">
									{{ state.ruleForm.timeLimit }}
									<span class="color-danger" v-if="['ZiGong'].includes(themeConfig.appScope) && state.ruleForm.is24HoursComplete"
										>24小时办结</span
									></el-form-item
								>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.expiredTime">
								<el-form-item label="工单期满时间">
									{{ formatDate(state.ruleForm.expiredTime, '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?.delayString">
								<el-form-item label="信件延期">
									<span class="color-danger">{{ state.ruleForm?.delayString }}</span></el-form-item
								>
							</el-col>
							<!--   只有中心能看到省期满时间 -->
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" v-if="state.ruleForm.expiredTimeProvince && userInfos.isCenter">
								<el-form-item label="省期满时间">
									{{ formatDate(state.ruleForm.expiredTimeProvince, '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.publishState !== null">
								<el-form-item label="是否公开"> {{ state.ruleForm.publishState ? '公开' : '不公开' }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
								<el-form-item label="部门处理结果" class="formatted-text"> {{ state.ruleForm.isResolvedText }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.centerOpinion">
								<el-form-item label="中心意见" class="formatted-text"> {{ state.ruleForm.centerOpinion }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.fileOpinion">
								<el-form-item label="承办意见" class="formatted-text"> {{ state.ruleForm.fileOpinion }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.sendBackOpinion">
								<el-form-item label="退回意见" class="formatted-text"> {{ state.ruleForm.sendBackOpinion }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.sendBackRefuseOpinion">
								<el-form-item label="退回不通过原因" label-width="120px" class="formatted-text">
									{{ state.ruleForm.sendBackRefuseOpinion }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.sendBackAuditTime">
								<el-form-item label="退回审批时间" label-width="120px">
									{{ formatDate(state.ruleForm.sendBackAuditTime, 'YYYY-mm-dd HH:MM:SS') }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" v-if="state.ruleForm.orderRemarks?.length">
								<el-form-item label="备注信息">
									<el-row v-for="(item,index) in state.ruleForm.orderRemarks" class="w100 mb10" :key="index">
										<el-col class="formatted-text">备注信息：{{ item.remark }} </el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">备注人：{{ item.remarkUser }} </el-col>
										<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">备注日期：{{ formatDate(item.remarkTime, 'YYYY-mm-dd HH:MM:SS') }}</el-col>
									</el-row>
								</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="补充详情" class="formatted-text">
										{{ i.opinion }}
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</div>
				</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-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[state.ruleForm?.orderVisits.length - 1]?.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[state.ruleForm?.orderVisits.length - 1]?.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[state.ruleForm?.orderVisits.length - 1]?.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[state.ruleForm?.orderVisits.length - 1]?.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[state.ruleForm?.orderVisits.length - 1]?.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[state.ruleForm?.orderVisits.length - 1]?.isPutThrough ? '已接通' : '未接通'
							}}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row v-for="item in state.ruleForm?.orderVisits[state.ruleForm?.orderVisits.length - 1]?.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" type="primary"> 话务员回访 </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" type="primary"> {{ 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="部门回访内容" class="formatted-text">
								{{ item.visitContent }}
							</el-form-item>
						</el-col>
					</template>
				</el-row>
			</el-form>
			<el-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>
		<!--  副本工单  -->
		<div v-show="state.activeName === '4'">
			<copy-order ref="copyOrderRef" :orderId="state.orderId" />
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-text v-if="['ZiGong'].includes(themeConfig.appScope) && state.ruleForm?.returnDeadline" type="danger" tag="b" class="mr20">
					退回截至时间：{{ formatDate(state.ruleForm?.returnDeadline, 'YYYY-mm-dd HH:MM:SS') }}
				</el-text>
				<!-- 单会签中+未到汇总节点 canEndCountersign 为true表示当前工单正在会签中,可以结束会签-->
				<el-button
					type="primary"
					@click="onCloseCountersignature"
					:loading="state.loading"
					v-auth="'business:order:closeCountersignature'"
					v-if="state.ruleForm?.countersignId"
					>结束会签</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
				>
				<!-- 100-200 表示工单正在办理中，可以督办 -->
				<el-button
					type="primary"
					@click="onSupervise"
					:loading="state.loading"
					v-if="isInRange(state.ruleForm?.status, 100, 200)"
					v-auth="'business:order:supervise:apply'"
					>督 办</el-button
				>
				<!-- 100-200 表示工单正在办理中，可以催办 -->
				<el-button
					type="primary"
					@click="onUrge"
					:loading="state.loading"
					v-if="isInRange(state.ruleForm?.status, 100, 200)"
					v-auth="'business:order:urge:apply'"
				>
					催 办</el-button
				>
				<!-- 100-200 表示工单正在办理中，可以延期申请 -->
				<!-- isCanDelay 为true表示可以发起延期申请并且可以办理工单（当前工单没有发起或者正在延期流程中）-->
				<el-button
					type="primary"
					@click="onSubmit('延期申请', '延期附件')"
					:loading="state.loading"
					v-if="isInRange(state.ruleForm?.status, 100, 200) && state.ruleForm?.isCanDelay"
					v-auth="'business:order:delay'"
					>延 期</el-button
				>
				<!-- 只有发起了延期流程的可以取消延期 -->
				<!-- isCanDelay 为false表示可以发起取消延期申请（当前工单已在延期流程中）-->
				<el-button
					type="primary"
					@click="onCancelDelay"
					:loading="state.loading"
					v-auth="'business:order:cancelDelay'"
					v-if="state.ruleForm?.isCanCancelDelay"
					>取消延期</el-button
				>
				<!-- 100-200 表示工单正在办理中 并且应该自己办理 -->
				<el-button
					type="primary"
					@click="onSubmit('工单办理')"
					:loading="state.loading"
					v-if="isInRange(state.ruleForm?.status, 100, 200) && state.ruleForm?.canHandle"
					v-auth="'business:order:handle'"
					>办 理</el-button
				>
				<!-- 代办可用 canInsteadHandle -->
				<el-button
					type="primary"
					@click="onSubmit('工单代办')"
					:loading="state.loading"
					v-if="state.ruleForm?.canInsteadHandle"
					v-auth="'business:order:handle:instead'"
					>代 办</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>-->
				<!-- 100-200 表示工单正在办理中 并且应该自己办理 -->
				<el-button
					type="primary"
					@click="onSubmit('工单退回', '退回附件')"
					:loading="state.loading"
					v-if="isInRange(state.ruleForm?.status, 100, 200) && state.ruleForm?.canHandle && state.ruleForm?.canPrevious"
					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 { isInRange, transformFile } from '@/utils/tools';
import { cancelDelay, endCounterSign, orderDetail } from '@/api/business/order';
import { ElMessage, ElMessageBox } from 'element-plus';
import { formatDate } from '@/utils/formatTime';
import { callCenterOutbound } from '@/utils/callCenter';
import { useUserInfo } from '@/stores/userInfo';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '@/stores/themeConfig';

// 引入组件
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/business/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('@/components/PlayRecord/index.vue')); // 播放录音
const CopyOrder = defineAsyncComponent(() => import('@/views/todo/seats/accept/Copy.vue')); // 副本工单

type ButtonType = '' | 'default' | 'success' | 'warning' | 'info' | 'text' | 'primary' | 'danger';
const props = defineProps({
	order: {
		// 工单详情
		type: [Object, null] as PropType<Object | null>,
		default: {},
		required: true,
	},
	type: {
		type: String as PropType<ButtonType>,
		default: 'primary',
	},
	source: {
		// 来源（根据来源判断 有特殊逻辑处理）
		type: String,
		default: '',
	},
});
const storesUserInfo = useUserInfo();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { userInfos } = storeToRefs(storesUserInfo); // 用户信息
// 定义子组件向父组件传值/事件
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',
		},
		{
			label: '副本工单',
			value: '4',
		},
	],
	collapseArr: ['1', '2', '3'], //展开列表
	loading: false,
	supplements: [], // 补充内容
	workflow: {}, // 工单流程内容
	orderId: '', //工单id
});
const showMaskNumber = ref<boolean>(true); // 是否展示号码
const ruleFormRef = ref<RefType>(); // 表单ref
// 高亮关键词
const showKeyWord = (val: string[], keywordArr: string[]) => {
	let str: any = val;
	if (keywordArr && keywordArr.length) {
		// 2.定制关键词对应正则
		keywordArr.forEach((e) => {
			let regStr = '' + `(${e})`;
			let reg = new RegExp(regStr, 'g');
			// 3.正则替换，关键词飘红
			str = str.replace(reg, '<span class="color-danger font-bold"">' + e + '</span>');
		});
	}
	return str;
};

// 查看工单详情
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;
	} catch (error) {
		state.loading = false;
		state.dialogVisible = false;
	}
};
// 查询历史工单
const historyOrderRef = ref<RefType>(); // 历史工单
const getHistoryList = async () => {
	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 () => {
	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.dialogVisible = true;
	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();
			break;
		case '2': // 回访记录
			break;
		case '3': // 市民画像
			getPortraitList();
			break;
		case '4': // 副本工单
			getCopyOrder();
			break;
		default:
			getOrderDetail(state.orderId);
			break;
	}
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 查看录音文件 播放录音
const playRecordRef = ref<RefType>();
const recordFile = (obj: any) => {
	playRecordRef.value.openDialog(obj.callId);
};
// 电话外呼
const callPhone = (phoneNumber: number | string) => {
	callCenterOutbound(phoneNumber);
};
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 = (val: string, annexName: string = '办理附件', classify: string = '办理附件') => {
	if (['工单办理', '工单退回'].includes(val) && state.ruleForm.isReturnUnderApproval) {
		ElMessage.warning(`该工单存在正在审核中的退回，不能办理！`);
		return;
	}
	const params = {
		id: state.ruleForm.workflowId,
		processType: val,
		orderDetail: state.ruleForm,
		extra: {
			dialogTitle: val,
			inputPlaceholder: '办理意见',
			annexName,
			classify,
		},
	};
	processAuditRef.value.openDialog(params);
};
// 流程提交成功
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 copyOrderRef = ref<RefType>();
const getCopyOrder = () => {
	copyOrderRef.value.queryList();
};
// 特提
const specialHandleOrderRef = ref<RefType>(); // 特提
const onSpecialHandle = () => {
	if (state.ruleForm.isReturnUnderApproval) {
		ElMessage.warning(`该工单存在正在审核中的退回，不能特提！`);
		return;
	}
	if (state.ruleForm.status == 200) {
		// 会签工单无法进行特提
		ElMessage.warning('工单会签中，请先结束会签！');
		return;
	}
	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(() => {
			endCounterSign({ countersignId: state.ruleForm.countersignId })
				.then(() => {
					ElMessage.success('结束会签成功');
					emit('updateList');
					closeDialog();
				})
				.catch(() => {
					emit('updateList');
				});
		})
		.catch(() => {});
};
// 取消延期
const onCancelDelay = () => {
	ElMessageBox.confirm(`当前工单正在延期中，是否确认取消延期?`, '提示', {
		confirmButtonText: '确定取消',
		cancelButtonText: '取消',
		type: 'warning',
		draggable: true,
		cancelButtonClass: 'default-button',
		autofocus: false,
	})
		.then(() => {
			cancelDelay({ id: state.ruleForm.id })
				.then(() => {
					ElMessage.success('取消延期成功');
					emit('updateList');
					closeDialog();
				})
				.catch(() => {
					emit('updateList');
				});
		})
		.catch(() => {});
};
// 工单详情
const onOrderDetail = () => {
	openDialog(props.order);
};
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</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: 20px;
			}
		}
	}
	.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);
}
:deep(.el-collapse-item__wrap) {
	border-bottom: none;
}
/*.button-select{
   -webkit-user-select:initial;
  -moz-user-select: initial;
  -ms-user-select: initial;
  user-select:initial;
}*/
</style>