<template>
	<el-button link :type="props.type" @click.stop="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
		title="工单详情"
	>
		<!-- 工单详情 -->
		<el-collapse v-model="state.collapseArr" 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.fromPhone">
								<el-form-item label="来电号码">
									{{ state.ruleForm.fromPhone }}
									<el-button
										plain
										title="录音文件"
										size="small"
										type="primary"
										class="ml8"
										@click="recordFile(state.ruleForm)"
										v-if="
											['ZiGong'].includes(themeConfig.appScope)
												? state.ruleForm?.recordingAbsolutePath && userInfos.isCenter
												: 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" v-if="state.ruleForm.contact">
								<el-form-item label="联系电话">
									<span> {{ state.ruleForm.contact }}</span>
								</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"> 【{{ state.ruleForm.password }}】</span>
								</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" v-if="state.ruleForm.eventTypeSpliceName">
								<el-form-item label="事项类型"> {{ state.ruleForm.eventTypeSpliceName }} </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">
								<el-form-item label="生成时间"> {{ formatDate(state.ruleForm?.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="执法部门"> {{ state.ruleForm?.enforcementOrdersHandler?.map((item) => item.key).join(',') }} </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 class="formatted-text" v-html="showKeyWord(state.ruleForm.content, state.ruleForm.sensitive)"></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">
						<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.actualHandleOrgName">
								<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 }}
								</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">
								<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-row>
					</el-form>
				</div>
			</el-collapse-item>
		</el-collapse>
	</el-dialog>
	<!-- 播放录音 -->
	<play-record ref="playRecordRef" />
</template>

<script setup lang="ts" name="orderDetail">
import { defineAsyncComponent, PropType, reactive, ref } from 'vue';
import { transformFile } from '@/utils/tools';
import { ElMessage } from 'element-plus';
import { formatDate } from '@/utils/formatTime';
import { getJudicial } from '@/api/judicial/order';
import { useUserInfo } from '@/stores/userInfo';
import { useThemeConfig } from '@/stores/themeConfig';
import { storeToRefs } from 'pinia';

// 引入组件
const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表
const PlayRecord = defineAsyncComponent(() => import('@/components/PlayRecord/index.vue')); // 播放录音

type ButtonType = '' | 'default' | 'success' | 'warning' | 'info' | 'text' | 'primary' | 'danger';
const props = defineProps({
	order: {
		// 工单详情
		type: [Object, null] as PropType<string | null>,
		// eslint-disable-next-line vue/require-valid-default-prop
		default: {},
		required: true,
	},
	type: {
		type: String as PropType<ButtonType>,
		default: 'primary',
	},
});

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);
const storesUserInfo = useUserInfo();
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);
const { userInfos } = storeToRefs(storesUserInfo); // 用户信息
// 定义变量内容
const state = reactive<any>({
	dialogVisible: false, // 弹窗显示隐藏
	ruleForm: {
		// 表单数据
	},
	collapseArr: ['1', '2', '3'], //展开列表
	loading: false,
	orderId: '', //工单id
});
const ruleFormRef = ref<RefType>(); // 表单ref
// 高亮关键词
const showKeyWord = (val: string[], keywordArr: string[]) => {
	let str = 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 getJudicial(id);
		state.ruleForm = res.result;
		state.ruleForm.files = transformFile(state.ruleForm.files);
		state.loading = false;
	} catch (error) {
		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;
	getOrderDetail(state.orderId);
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
};
// 工单详情
const onOrderDetail = () => {
	openDialog(props.order);
};
// 查看录音文件 播放录音
const playRecordRef = ref<RefType>();
const recordFile = (obj: any) => {
	playRecordRef.value.playRecord(obj.callId);
};
// 暴露变量
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;
}
</style>
