<template>
	<el-form :model="state.queryParams" ref="queryParamsRef" inline @submit.native.prevent>
		<el-form-item label="关键词" prop="Keyword">
			<el-input v-model="state.queryParams.Keyword" placeholder="工单编码" clearable @keyup.enter="handleQuery" class="keyword-input"/>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="handleQuery" :loading="state.loading"> <SvgIcon name="ele-Search" class="mr5" />查询 </el-button>
			<el-button @click="resetQuery(queryParamsRef)" :loading="state.loading" class="default-button">
				<SvgIcon name="ele-Refresh" class="mr5" />重置
			</el-button>
		</el-form-item>
	</el-form>
	<vxe-table
		border
		:loading="state.loading"
		:data="state.tableData"
		:column-config="{ resizable: true }"
		:row-config="{ isCurrent: true, isHover: true, height: 30,useKey:true }"
		ref="tableRef"
		show-overflow
		:scrollY="{ enabled: true, gt: 100 }"
		max-height="500"
	>
		<vxe-column field="no" title="工单编码">
		</vxe-column>
		<vxe-column field="title" title="工单标题" min-width="200">
			<template #default="{row}">
				<el-button link type="primary" @click="onDetail(row)">{{ row.title }}</el-button>
			</template>
		</vxe-column>
		<vxe-column field="auditTime" title="修改时间" width="160">
			<template #default="{ row }">
				{{ formatDate(row.auditTime, 'YYYY-mm-dd HH:MM:SS') }}
			</template>
		</vxe-column>
	</vxe-table>
	<el-dialog v-model="state.dialogVisible" draggable title="副本工单查看" append-to-body destroy-on-close>
		<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="12" :lg="12" :xl="12">
								<el-form-item label="修改人"> {{ state.ruleForm.auditUserName }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="修改时间"> {{ formatDate(state.ruleForm?.auditTime, 'YYYY-mm-dd HH:MM:SS') }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="工单编号">
									{{ state.ruleForm.no }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="事发地址">
									{{ state.ruleForm.fullAddress }}
								</el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="来源渠道"> {{ state.ruleForm.sourceChannel }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="受理类型"> {{ state.ruleForm.acceptType }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="热点分类"> {{ state.ruleForm.hotspotSpliceName }} </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="12" :lg="12" :xl="12">
								<el-form-item label="来电人"> {{ state.ruleForm.fromName }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="性别"> {{ state.ruleForm.fromGenderText }} </el-form-item>
							</el-col>
							<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
								<el-form-item label="联系电话">
									{{ state.ruleForm.contact }}
								</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="24" :lg="24" :xl="24">
								<el-form-item label="工单标题">
									{{ state.ruleForm.title }}
								</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="办理结果" class="formatted-text"> {{ state.ruleForm.actualOpinion }} </el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-collapse-item>
		</el-collapse>
	</el-dialog>
</template>
<script setup lang="tsx" name="acceptCopyOrder">
import { reactive, ref } from 'vue';
import { formatDate } from '@/utils/formatTime';
import { FormInstance } from 'element-plus';
import { throttle } from '@/utils/tools';
import { copyOrderList } from '@/api/business/order';
// 引入组件
const props = defineProps({
	orderId: {
		// 工单ID
		type: String,
		default: '',
		required: true,
	},
});
// 定义变量内容
const state = reactive<any>({
	queryParams: {
		PageIndex: 1, // 当前页
		PageSize: 10, // 每页条数
		Keyword: null, // 关键字
	},
	tableData: [], //表单
	loading: false, // 加载
	total: 0, // 总数
	dialogVisible: false,
	collapseArr: ['1', '2', '3'], //展开列表
	ruleForm: {},
});
/** 搜索按钮操作 */
const handleQuery = () => {
	state.queryParams.PageIndex = 1;
	queryList();
};
const queryParamsRef = ref<FormInstance>();
/** 重置按钮操作 */
const resetQuery = throttle((formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	handleQuery();
}, 300);
/** 获取列表 */
const queryList = async () => {
	try {
		state.loading = true;
		copyOrderList({ orderId: props.orderId, ...state.queryParams })
			.then((res: any) => {
				state.tableData = res.result.items;
				state.total = res.result.total;
				state.loading = false;
			})
			.catch(() => {
				state.loading = false;
			});
	} catch (e) {
		state.loading = false;
	}
};
// 高亮关键词
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 onDetail = (row: any) => {
	state.ruleForm = row;
	state.dialogVisible = true;
};
defineExpose({
	queryList,
});
</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);
}
</style>
