<template>
	<div class="system-timeLimit-add-container">
		<el-dialog v-model="state.dialogVisible" width="60%" draggable title="时限详情">
			<div v-loading="state.loading">
				<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="100px" scroll-to-error>
					<el-row :gutter="5">
						<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
							<el-form-item label="配置名称" prop="timeLimitName">
								{{ state.ruleForm.timeLimitName }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
							<el-form-item label="业务名称" prop="workflowObj">
								{{ state.ruleForm.workflowName }}
								<template v-if="state.ruleForm.workflowCode === 'Order'">
									<el-tooltip placement="top-start">
										<SvgIcon name="ele-InfoFilled" class="ml5" size="24px" color="var(--el-color-primary)" />
										<template #content>
											说明：时限计算优先级依次为指定优先级、组合、时限最短。<br />
											若已配置指定参数优先级的，则先按指定的优先级计算办理期限；
											<br />无指定优先级的，默认按组合最短时限计算办理期限；<br />
											无组合配置的，则默认按已配置的参数最短时限计算办理期限；未配置时限的参数，默认为无时限要求。
										</template>
									</el-tooltip>
								</template>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
							<el-form-item label="状态" prop="workflowObj">
								{{ state.ruleForm.workflowName }}
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8">
							<el-form-item label="创建人" prop="workflowObj">
								{{ state.ruleForm.workflowName }}
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
				<el-collapse v-model="state.collapseArr" class="collapse-box" v-loading="state.loading" v-if="state.ruleForm.workflowCode === 'Order'">
					<el-collapse-item name="1">
						<template #title>
							<p class="pl10">
								<b class="font14">参数信息</b>
							</p>
						</template>
						<div class="parameter pl20 pr20">
							<!-- 已选列表 -->
							<div class="mt20 parameter-choose">
								<el-row>
									<el-col v-for="(item, index) in state.paramArr" :key="index" :xs="24" :sm="8" :md="8" :lg="6" :xl="4">
										<div class="parameter-choose-one text-no-wrap" :class="{ active: item.active }" @click="chooseParameter(item)">
											{{ item.name }}<span v-if="item.paramValue.length">({{ item.paramValue.length }})</span>
										</div>
									</el-col>
								</el-row>
							</div>
							<!-- 参数表格 -->
							<el-table :data="state.currentParam.paramValue" class="mt20" v-if="state.currentParam">
								<el-table-column label="序号" type="index" width="70" align="center"></el-table-column>
								<el-table-column :label="state.currentParam.name" prop="paramTypeValue" align="center" show-overflow-tooltip>
									<template #default="{row}">
										{{ row.paramTypeName }}
									</template>
								</el-table-column>
								<el-table-column label="时限" prop="timeLimitValue" width="150" align="center">
									<template #default="{row}">
										{{ row.timeLimitValue }}
									</template>
								</el-table-column>
								<el-table-column label="单位" prop="timeLimitType" width="150" align="center">
									<template #default="{row}">
										{{ row.timeLimitType }}
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div class="mt20"></div>
					</el-collapse-item>
					<el-collapse-item name="2">
						<template #title>
							<p class="pl10">
								<b class="font14">已配置参数</b>
							</p>
						</template>
						<div class="parameter-stop pd20">
							<el-row>
								<el-col v-for="(item, index) in state.paramSelect" :key="index" :xs="24" :sm="8" :md="8" :lg="6" :xl="4" :title="item.name">
									<div class="parameter-stop-one mb10 text-no-wrap" :class="{ active: item.active }">
										{{ item.name }}
									</div>
								</el-col>
							</el-row>
						</div>
					</el-collapse-item>
					<el-collapse-item name="3">
						<template #title>
							<p class="flex-center-align pl10">
								<b class="font14">指定优先级</b>
								<el-tooltip placement="top-start" content="选中已配置参数，可自定义优先级，参数越靠前优先级越高。" trigger="hover">
									<SvgIcon name="ele-QuestionFilled" size="16px" color="var(--el-color-info)" class="ml5"></SvgIcon>
								</el-tooltip>
							</p>
						</template>
						<div class="pd20">
							<div class="parameter-sort">
								<div v-for="(item, index) in state.priority" :key="index">
									<div class="parameter-sort-one" :title="item.timeLimitValue">
										<el-tag class="mr20"> {{ index + 1 }}. {{ item.name }} </el-tag>
									</div>
								</div>
							</div>
						</div>
					</el-collapse-item>
					<p class="pl10 mt20">
						<b class="font14" style="color: var(--hotline-color-text-main)">参数组合</b>
					</p>
					<!-- 组合参数表格 -->
					<div class="pd20">
						<el-table :data="state.combination">
							<el-table-column label="序号" type="index" width="70"></el-table-column>
							<el-table-column label="组合名称" prop="combinationName" align="center" width="300">
								<template #default="{ row }">
									{{ row.combinationName }}
								</template>
							</el-table-column>
							<el-table-column label="参数" prop="combinationDisplayParam" align="center" width="400">
								<template #default="{ row }">
									<div class="flex-center-align">
										<span class="omit text-no-wrap" :title="row.combinationDisplayParam">{{ row.combinationDisplayParam }}</span>
										<el-button class="ml3" text title="查看组合详情" type="primary" @click="viewCombination(row)">
											<SvgIcon name="ele-Document" size="16px" />
										</el-button>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="时限" prop="timeLimitValue" align="center">
								<template #default="{ row }">
									{{ row.timeLimitValue }}
								</template>
							</el-table-column>
							<el-table-column label="单位" prop="hourObj">
								<template #default="{ row }">
									{{ row.timeLimit }}
								</template>
							</el-table-column>
						</el-table>
					</div>
				</el-collapse>
			</div>

			<template #footer>
				<span class="dialog-footer">
					<el-button class="default-button" @click="state.dialogVisible = false">关闭</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog v-model="state.paramDialog" draggable title="组合查看">
			<el-form :model="state.paramForm" ref="paramFormRef" label-width="80px">
				<el-row :gutter="5">
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="组合名称" prop="combinationName" class="mb10">
							{{ state.paramForm.combinationName }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="参数" prop="combinationDisplayParam" class="mb10">
							{{ state.paramForm.combinationDisplayParam }}
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
						<el-form-item label="时限" prop="timeLimitValue" class="mb10">
							{{ state.paramForm.timeLimitValue }} {{ state.paramForm.timeLimit }}
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button class="default-button" @click="state.paramDialog = false">关 闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="addTimeLimit">
import { reactive } from 'vue';
import { timeLimitDetail } from '/@/api/system/timeLimit';
import { removeDuplicate } from '/@/utils/arrayOperation';
import other from '/@/utils/other';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList', 'openDialog', 'closeDialog']);
const paramTypeNameType: any = {
	AcceptType: '受理类型',
	HotPots: '热点分类',
	SourceChannel: '来源渠道',
	IdentityType: '来电人身份',
	OrderType: '工单类型',
	LicenceType: '证件类型',
	EmergencyLevel: '紧急程度',
	DefaultTime: '默认参数',
};
// 定义变量内容
const state = reactive<any>({
	ruleForm: {},
	paramForm: {},
	paramDialog: false,
	dialogVisible: false,
	baseData: [], // 基础数据
	parameterList: [], //选择基础数据
	paramArr: [], //参数列表信息
	currentParam: null as any, // 当前参数
	collapseArr: ['1', '2', '3'], //展开列表
	result: {}, //所有基础数据
	selectArray: [], // 可选数据
	paramSelect: [], // 已配置的数据 （可选择）
	priority: [], // 排序参数
	combination: [], // 组合
	loading: false,
	timeLimitId: null as any,
});
// 打开弹窗
const openDialog = (val: any, baseData: any) => {
	state.dialogVisible = true;
	state.loading = true;
	state.result = baseData; //基础数据
	state.baseData = baseData.baseData ?? []; //基础数据 复选框
	state.timeLimitId = val.id;
	timeLimitDetail(val.id)
		.then((res: any) => {
			// 表单数据
			state.ruleForm.timeLimitName = res.result.timeLimitName;
			state.ruleForm.workflowObj = {
				key: res.result.workflowCode,
				value: res.result.workflowName,
			};
			state.ruleForm.workflowCode = res.result.workflowCode;
			state.ruleForm.workflowName = res.result.workflowName;
			// 参数
			for (let i of res.result.paramArr) {
				for (let j of state.baseData) {
					if (i.paramType === j.typeCode) {
						state.parameterList.push({
							...j,
						});
						state.parameterList = removeDuplicate(state.parameterList, 'typeCode');
						parameterChange(true, j);
					}
				}
				for (let k of state.paramArr) {
					if (i.paramType === k.paramType) {
						k.paramValue.push({
							paramTypeObj: {
								key: i.paramTypeValue,
								value: i.paramTypeName,
							},
							hourObj: {
								key: i.timeLimitType,
							},
							...i,
						});
						if (i.hotParamParent) state.hotspotExternal = i.hotParamParent.split(',');
					}
				}
			}
			// 配置参数
			getSelectedParam();
			for (let i of state.paramSelect) {
				for (let j of res.result.priority) {
					if (i.id === j.code) {
						i.active = true;
					}
				}
			}
			state.priority = res.result.priority;
			state.priority = state.priority.map((v: any) => {
				return {
					...v,
					name: paramTypeNameType[v.paramType] + '-' + v.paramTypeName,
				};
			});

			// 组合
			state.combination = res.result.combination;
			state.combination = state.combination.map((v: any) => {
				return {
					...v,
					hourObj: {
						key: v.timeLimit,
					},
				};
			});

			state.loading = false;
		})
		.catch(() => {
			state.loading = false;
			state.dialogVisible = false;
		});
};
// 关闭弹窗
const closeDialog = () => {
	state.dialogVisible = false;
	emit('closeDialog');
};
// 选择参数
const parameterChange = (value: string | number | boolean, item: any) => {
	let arr: any = other.deepClone(state.parameterList);
	state.paramArr = arr.map((v: any) => {
		let j = state.paramArr.find((j: any) => j.paramType === v.typeCode);
		if (j) {
			v.paramValue = j.paramValue;
		}
		return {
			...v,
			paramType: v.typeCode,
			paramValue: v.paramValue ?? [],
		};
	});
	if (value) {
		//新增选中新增的
		chooseParameter(item);
	} else {
		// 取消选中最后一个
		chooseParameter(state.paramArr[state.paramArr.length - 1]);
	}
};
// 选择参数 切换当前
const chooseParameter = (item: any) => {
	switch (item?.typeCode) {
		case 'AcceptType':
			state.selectArray = state.result.acceptType;
			break;
		case 'HotPots': // 热点
			state.selectArray = [];
			break;
		case 'SourceChannel':
			state.selectArray = state.result.sourceChannel;
			break;
		case 'IdentityType':
			state.selectArray = state.result.identityType;
			break;
		case 'OrderType':
			state.selectArray = state.result.orderType;
			break;
		case 'LicenceType': //证件类型
			state.selectArray = state.result.certType.map((item: any) => {
				return {
					key: item.dicDataValue,
					value: item.dicDataName,
				};
			});
			break;
		case 'EmergencyLevel':
			state.selectArray = state.result.emergencyLevel;
			break;
		case 'DefaultTime': //默认参数
			state.selectArray = [];
			break;
		default:
			break;
	}
	// state.selectArray = state.result[state.currentParam.typeCode];
	state.paramArr.forEach((v: any) => {
		if (item.typeCode === v.paramType) {
			v.active = true;
			state.currentParam = v;
		} else {
			v.active = false;
		}
	});
	getSelectedParam();
};
// 获取已经配置的列表
// 获取已经配置的列表
const getSelectedParam = () => {
	const arr = state.paramArr.flatMap((i: any) => i.paramValue).filter((j: any) => j.paramTypeName && j.id && j.timeLimitType);
	state.paramSelect = arr.map((v: any) => {
		const { id } = v;
		const selected = state.paramSelect.find((j: any) => j.id === id);
		return {
			...v,
			active: selected?.active ?? false,
			name: paramTypeNameType[v.paramType] + '-' + v.paramTypeName,
		};
	});
};
// 查看组合参数
const viewCombination = (row: any) => {
	state.paramForm = row;
	state.paramDialog = true;
};
//暴漏变量和方法
defineExpose({ closeDialog, openDialog });
</script>
<style lang="scss" scoped>
.system-timeLimit-add-container {
	.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);
				}
			}
		}
	}
	:deep(.el-collapse-item__wrap) {
		border-bottom: 0;
	}
	:deep(.el-collapse) {
		border-bottom: 0;
	}
	:deep(.el-tabs__nav-wrap::after) {
		height: 100% !important;
	}
	.parameter-choose {
		&-one {
			cursor: pointer;
			text-align: center;
			height: 34px;
			line-height: 34px;
			color: var(--el-color-primary);
			width: calc(100% - 10px);
			padding: 0 5px;
			border: 1px solid transparent;
		}
		.active {
			border: 1px solid var(--el-color-primary);
			border-radius: var(--el-border-radius-base);
		}
	}
	.parameter-stop {
		&-one {
			cursor: pointer;
			text-align: center;
			height: 34px;
			line-height: 34px;
			width: calc(100% - 10px);
			padding: 0 5px;
		}
		.active {
			border: 1px solid var(--el-color-success);
			border-radius: var(--el-border-radius-base);
			color: var(--el-color-success);
		}
	}
	.parameter-sort {
		display: flex;
		flex-wrap: wrap;
		&-one {
			cursor: pointer;
			text-align: center;
			height: 34px;
			line-height: 34px;
		}
	}
	.omit {
		display: inline-block;
	}
}
</style>
