<route lang="yaml">
  name: damQualityPlan
</route>

<script lang="ts" setup name="damQualityPlan">
import { onBeforeMount, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import useUserStore from "@/store/modules/user";
import { useValidator } from '@/hooks/useValidator';
import { CirclePlus } from '@element-plus/icons-vue';
import {
	getDamList,
	getDamTableRulesList,
	saveDamTableRules,
	getDamTableList,
	getRuleTypeList,
	getSmallCategoryList,
	getLargeCategoryList,
	getRuleConfDetail,
	updateDamTableRule,
	deleteDamTableRule,
	getModelRuleCount,
	saveQualityPlan,
	updateQualityPlan,
	getPlanDetail,
	getPlanFilterDetail
} from "@/api/modules/dataAssetQuality";
import tableRules from './tableRules.vue';
import tableRuleForm from './tableRuleForm.vue';
import { TableColumnWidth } from '@/utils/enum';
import { changeNum } from '@/utils/common';
import filtersSettingBatch from "./filtersSettingBatch.vue";
import useDataAssetStore from "@/store/modules/dataAsset";

const userStore = useUserStore();
const assetStore = useDataAssetStore();
const { proxy } = getCurrentInstance() as any;
const { required } = useValidator();
const router = useRouter();
const route = useRoute();
const fullPath = route.fullPath;
/** 编辑时会有guid */
const planGuid = route.query.guid;
const fullscreenLoading = ref(false);
/** 记录编辑时，规则是否被新增，编辑，删除过。 */
const editedTableRule = ref(false);

const step = ref(0);
const stepsInfo = ref({
	step: step.value,
	list: [
		{ title: '配置数据质量规则', value: 1 },
		{ title: '设置质量规则权重', value: 2 },
		{ title: '执行配置的质量规则', value: 3 }
	]
})

const damListData: any = ref([]);

const damGuid: any = ref('');

/** 规则中显示的表 */
const toSubjectTables: any = ref([]);

/** 资产目录表的原始值 */
const damSubjectTables: any = ref([]);

const ruleType: any = ref('');
const detailRuleInfo: any = ref({});
const tableRuleFormRef = ref();
const drawerInfoLoading = ref(false);
const damInfoFormRef = ref();
const damFormItems = ref([{
	label: '资产名称',
	type: 'select',
	placeholder: '请选择',
	field: 'damGuid',
	default: damGuid.value,
	options: damListData.value,
	props: {
		value: 'guid',
		label: 'damName'
	},
	filterable: true,
	clearable: true,
	required: true,
	visible: true,
	disabled: false
}]);

const damFormRules = ref({
	damGuid: [required('请选择资产名称')]
});

const modelRuleDetailTableInfo = ref({
	id: "model-rule-table",
	loading: false,
	height: '300px',
	fields: [
		{ label: "序号", type: "index", width: 56, align: "center" },
		{ label: "表名称", field: "name", width: 140 },
		{ label: "规则名称", field: "ruleConfName", width: 140 },
		{ label: "规则大类", field: "largeCategoryName", width: 100 },
		{ label: "规则小类", field: "smallCategoryName", width: 140 },
		{ label: "规则类型", field: "ruleName", width: 140 },
		{ label: "规则字段", field: "ruleField", width: 140 }
	],
	data: [],
	showPage: false,
	actionInfo: {
		label: "操作",
		type: "btn",
		width: 110,
		btns: [{
			label: "编辑", value: "edit", click: (scope) => {
				drawerInfo.value.type = 'edit';
				drawerInfo.value.header.title = '编辑规则';
				drawerInfo.value.visible = true;
				drawerInfoLoading.value = true;
				getRuleConfDetail(scope.row.guid).then((res: any) => {
					drawerInfoLoading.value = false;
					if (res.code == proxy.$passCode) {
						let data = res.data || {};
						detailRuleInfo.value = data;
						ruleType.value = detailRuleInfo.value.ruleCode;
						toSubjectTables.value = [{
							guid: detailRuleInfo.value.subjectGuid, //编辑的时候显示的是主题表
							tableName: detailRuleInfo.value.subjectName,
							tableChName: detailRuleInfo.value.subjectZhName,
							label: `${detailRuleInfo.value.subjectName}(${detailRuleInfo.value.subjectZhName})`
						}]
						detailRuleInfo.value.qualityModelGuids = [detailRuleInfo.value.subjectGuid];
					} else {
						proxy.$ElMessage.error(res.msg);
					}
				});
			}
		}, {
			label: "删除", value: "delete", click: (scope) => {
				proxy.$openMessageBox("确定要删除该资产表规则吗?", () => {
					deleteDamTableRule(scope.row.guid, planGuid).then((res: any) => {
						if (res.code == proxy.$passCode) {
							planGuid && (editedTableRule.value = true);
							getDamTableRulesData(damGuid.value);
							proxy.$ElMessage.success('删除该资产表规则成功');
						} else {
							proxy.$ElMessage.error(res.msg);
						}
					});
				}, () => {
					proxy.$ElMessage.info("已取消删除");
				})
			}
		}]
	}
});

const drawerInfo = ref({
	visible: false,
	direction: 'rtl',
	size: 600,
	header: {
		title: '新增规则',
	},
	type: '',
	footer: {
		btns: [
			{ type: 'default', label: '取消', value: 'cancel' },
			{ type: 'primary', label: '确定', value: 'save' },
		]
	}
})

const ruleTypeList = ref([]);
const smallCategoryList = ref([]);
const largeCategoryList = ref([]);

onBeforeMount(() => {
	if (!planGuid) {
		getDamList().then((res: any) => {
			if (res.code == proxy.$passCode) {
				const data = res.data || [];
				damListData.value = data;
				damFormItems.value[0].options = damListData.value;
			} else {
				proxy.$ElMessage.error(res.msg);
			}
		});
	} else {
		fullscreenLoading.value = true;
		getPlanDetail(planGuid).then((res: any) => {
			fullscreenLoading.value = false;
			if (res.code == proxy.$passCode) {
				const data = res.data || {};
				damGuid.value = data.damGuid;
				damFormItems.value[0].default = data.damGuid;
				damFormItems.value[0].disabled = true;
				damFormItems.value[0].options = damFormItemsReadOnly.value[0].options = configFormItems.value[0].options = [{
					guid: damGuid.value,
					damName: data.damName
				}]
				getDamTableRulesData(damGuid.value);
				getDamTableList(damGuid.value).then((res1: any) => {
					if (res1.code == proxy.$passCode) {
						toSubjectTables.value = res1.data || [];
						damSubjectTables.value = res1.data || [];
						getPlanFilterDetail(planGuid).then((res1: any) => {
							fullscreenLoading.value = false;
							if (res1.code == proxy.$passCode) {
								let data1 = res1.data || [];
								data1.forEach(d => {
									let tables: any = [];
									for (const id in d.qualityModelInfo) {
										let table = damSubjectTables.value?.find(m => m.guid == id)
										tables.push({
											guid: id,
											subjectGuid: table?.guid,
											tableChName: table?.tableChName
										});
									}
									batchFiltersValue.value[d.dataFilterGroup] = {
										filter: d.dataRange,
										tables: tables,
										checked: true
									}
								});
							} else {
								proxy.$ElMessage.error(res1.msg);
							}
						});
					} else {
						proxy.$ElMessage.error(res1.msg);
					}
				});
				ruleWeightData.value = data.modelRuleWeights?.map(r => {
					r.ruleLargeWeight = r.ruleLargeWeight.toFixed(2);
					return r;
				}) || [];
				configFormItems.value.forEach(item => {
					item.default = data[item.field];
				});
			} else {
				proxy.$ElMessage.error(res.msg);
			}
		});
	}
	getRuleTypeList().then((res: any) => {
		if (res.code == proxy.$passCode) {
			ruleTypeList.value = res.data?.map((d: any) => {
				d.label = d.ruleName;
				d.value = d.ruleCode;
				return d;
			})?.filter(t => t.value != 'rows_check' && t.value != 'volatility_check') || [];
		} else {
			proxy.$ElMessage.error(res.msg);
		}
	})
	getSmallCategoryList().then((res: any) => {
		if (res.code == proxy.$passCode) {
			smallCategoryList.value = res.data || [];
		} else {
			proxy.$ElMessage.error(res.msg);
		}
	})
	getLargeCategoryList().then((res: any) => {
		if (res.code == proxy.$passCode) {
			largeCategoryList.value = res.data || [];
		} else {
			proxy.$ElMessage.error(res.msg);
		}
	})
});

const handleDamInfoSelectChange = (val) => {
	damGuid.value = val;
	if (!val) {
		modelRuleDetailTableInfo.value.data = [];
		damGuid.value = '';
		toSubjectTables.value = [];
		damSubjectTables.value = [];
	} else {
		getDamTableRulesData(val);
		getDamTableList(val).then((res: any) => {
			if (res.code == proxy.$passCode) {
				toSubjectTables.value = res.data || [];
				damSubjectTables.value = res.data || [];
			} else {
				proxy.$ElMessage.error(res.msg);
			}
		});
	}
}

/** 根据资产获取规则列表 */
const getDamTableRulesData = (damGuid) => {
	modelRuleDetailTableInfo.value.loading = true;
	getDamTableRulesList({
		damGuid: damGuid,
	}).then((res: any) => {
		modelRuleDetailTableInfo.value.loading = false;
		if (res.code == proxy.$passCode) {
			modelRuleDetailTableInfo.value.data = res.data || [];
		} else {
			proxy.$ElMessage.error(res.msg);
		}
	});
}

/** 添加资产表规则 */
const addTableRules = () => {
	drawerInfo.value.type = 'add';
	tableRulesRef.value && tableRulesRef.value.initValue();
	drawerInfo.value.visible = true;
	drawerInfo.value.header.title = '新增规则';
	toSubjectTables.value = damSubjectTables.value;
}
const tableRulesRef = ref();

const submitRulesLoading = ref(false);

/** 提交编辑修改的资产表规则 */
const addSubmitRules = () => {
	if (drawerInfo.value.type == 'add') {
		tableRulesRef.value && tableRulesRef.value.saveRules().then((info: any) => {
			submitRulesLoading.value = true;
			if (planGuid) {
				info.forEach(rule => rule.planGuid = planGuid);
			}
			saveDamTableRules(info).then((res: any) => {
				submitRulesLoading.value = false;
				if (res.code == proxy.$passCode) {
					planGuid && (editedTableRule.value = true);
					proxy.$ElMessage.success('新增规则成功');
					drawerInfo.value.visible = false;
					tableRulesRef.value && tableRulesRef.value.clearValue();
					getDamTableRulesData(damGuid.value);
				} else {
					proxy.$ElMessage.error(res.msg);
				}
			})
		})
	} else {
		let ruleGuid = detailRuleInfo.value.guid;
		/** 将新建规则之后转化为对应质检表的规则。 */
		const transformRulesInfo = (info: any) => {
			if (info.ruleCode == 'null_value_check' || info.ruleCode == 'repeate_data_check') {
				return Object.assign({}, info, {
					guid: ruleGuid,
					qualityModelGuid: detailRuleInfo.value.qualityModelGuid,
					ruleCode: detailRuleInfo.value.ruleCode,
					ruleField: info.modelFields[detailRuleInfo.value.subjectZhName] || []
				});
			} else if (info.ruleCode === 'logic_check') {
				let subjectName = detailRuleInfo.value.subjectName;
				let fields = info.ruleFields[subjectName];
				return Object.assign({}, info, {
					guid: ruleGuid,
					qualityModelGuid: detailRuleInfo.value.qualityModelGuid,
					ruleCode: detailRuleInfo.value.ruleCode,
					ruleField: [{
						guid: fields.guid,
						enName: fields.enName,
						chName: fields.chName
					}],
					conditionSql: info.conditionSqls?.[subjectName],
					conditionSqls: '',
					ruleFields: ''
				});
			} else if (info.ruleCode === 'custom_sql') {
				return Object.assign({}, info, {
					guid: ruleGuid,
					qualityModelGuid: detailRuleInfo.value.qualityModelGuid,
					ruleCode: detailRuleInfo.value.ruleCode,
					customSql: info.customSqls?.[detailRuleInfo.value.subjectName],
					ruleField: info.ruleFields?.[detailRuleInfo.value.subjectName]?.map(f => {
						return {
							enName: f
						}
					}) || [],
					fieldSelects: info.sqlFieldsList?.[detailRuleInfo.value.subjectName] || [],
					customSqls: '',
					ruleFields: ''
				});
			}
		}
		tableRuleFormRef.value?.ruleFormRef?.ruleFormRef?.validate((valid) => {
			if (valid) {
				let v = tableRuleFormRef.value?.getFormInfo();
				let params = transformRulesInfo(v);
				submitRulesLoading.value = true;
				planGuid && (params.planGuid = planGuid);
				updateDamTableRule(params).then((res: any) => {
					submitRulesLoading.value = false;
					if (res.code == proxy.$passCode) {
						planGuid && (editedTableRule.value = true);
						proxy.$ElMessage.success(`【${params.ruleConfName}】` + '规则编辑成功');
						drawerInfo.value.visible = false;
						tableRulesRef.value && tableRulesRef.value.clearValue();
						getDamTableRulesData(damGuid.value);
					} else {
						proxy.$ElMessage.error(res.msg);
					}
				})
			}
		});
	}
}

/** 取消修改资产表的规则 */
const cancelEditRules = () => {
	proxy.$openMessageBox("当前修改内容尚未保存，确定取消吗？", () => {
		drawerInfo.value.visible = false
		tableRulesRef.value && tableRulesRef.value.clearValue();
	}, () => {
		proxy.$ElMessage.info("已取消");
	});
}

const previousStep = (val) => {
	step.value = val - 1;
	stepsInfo.value.step = val - 1;
}

const nextStep = (val) => {
	if (val == 1) {
		damInfoFormRef.value?.ruleFormRef?.validate((valid, errorItem) => {
			if (valid) {
				if (!modelRuleDetailTableInfo.value.data.length) {
					proxy.$ElMessage.error('请配置当前资产的质量规则');
					return;
				}
				ruleModelTableInfo.value.data = modelRuleDetailTableInfo.value.data || [];
				if (!planGuid) {
					getModelRuleCountListData();
				} else { //编辑页面，直接读取后端的值即可。
					if (editedTableRule.value) {
						getModelRuleCountListData(true);
					}
				}
				damFormItemsReadOnly.value[0].default = damGuid.value;
				damFormItemsReadOnly.value[0].options = damListData.value;
				step.value = val;
				stepsInfo.value.step = val;
			} else {
				var obj = Object.keys(errorItem);
				damInfoFormRef.value.ruleFormRef.scrollToField(obj[0])
			}
		});
	} else if (val == 2) {
		let sum = 0;
		ruleWeightData.value.forEach(item => {
			if (item.ruleLargeWeight != null) {
				sum += parseFloat(item.ruleLargeWeight);
			}
		});
		sum = changeNum(sum, 2);
		if (!(sum <= 100.02 && sum >= 99.98)) {// 允许浮动0.01误差
			proxy.$ElMessage.error('规则权重总分应为100分');
			return;
		}
		configFormItems.value[0].default = damGuid.value;
		configFormItems.value[0].options = damListData.value;
		step.value = val;
		stepsInfo.value.step = val;
	}
}

/** --------------------  第二步，权重规则设置  ----------------------------- */
const damFormItemsReadOnly = ref([{
	label: '资产名称',
	type: 'select',
	placeholder: '请选择',
	field: 'damGuid',
	default: damGuid.value,
	options: damListData.value,
	props: {
		value: 'guid',
		label: 'damName'
	},
	disabled: true,
	filterable: true,
	clearable: true,
	required: true,
	visible: true
}]);

const ruleModelTableInfo = ref({
	id: 'rule-model-table',
	loading: false,
	height: '200px',
	fields: [
		{ label: "序号", type: "index", width: 56, align: "center" },
		{ label: "表名称", field: "name", width: 140 },
		{ label: "规则名称", field: "ruleConfName", width: 140 },
		{ label: "规则大类", field: "largeCategoryName", width: 100 },
		{ label: "规则小类", field: "smallCategoryName", width: 140 },
		{ label: "规则类型", field: "ruleName", width: 140 },
		{ label: "规则字段", field: "ruleField", width: 140 }
	],
	data: [],
	showPage: false,
	actionInfo: {
		show: false
	}
})

/** 选择的所有质检表对应的规则大类数量及权重占比。 */
const ruleWeightData: any = ref([]);
const ruleWeightDataLoading = ref(false);

const inputWeightChange = (val, row) => {
	let strArr = val.split(".");
	if (strArr.length > 1) {
		let right = strArr[1];
		if (right === "" || right.length < 2) {
			row.ruleLargeWeight = val = parseFloat(val || 0).toFixed(2);
		}
	} else {
		row.ruleLargeWeight = val = parseFloat(val || 0).toFixed(2);
	}
};

/** 输入框输入触发事件 */
const inputEventWeightChange = (val, row) => {
	row.ruleLargeWeight = row.ruleLargeWeight.toString().replace(/[^\d.]/g, "")
	row.ruleLargeWeight = row.ruleLargeWeight.toString().replace(/\.{2,}/g, ".")
	row.ruleLargeWeight = row.ruleLargeWeight.toString().replace(/^\D*(\d{0,3}(?:\.\d{0,2})?).*$/g, "$1")
	if (row.ruleLargeWeight > 100) {
		row.ruleLargeWeight = changeNum(100, 2, true);
	}
}

/** 记录分组json的过滤条件。最后提交时需要转化到table里。 */
const batchFiltersValue: any = ref({});

const batchFiltersValueChange = (value) => {
	batchFiltersValue.value = value;
}

const batchFilterDialogRef = ref();

/** 批量配置过滤条件 */
const handleFiltersAdd = () => {
	batchFilterDialogRef.value?.openDialog(batchFiltersValue.value);
}

/** 根据所选择的模型表，获取对应的权重信息。 */
const getModelRuleCountListData = (isEdit = false) => {
	ruleWeightDataLoading.value = true;
	return getModelRuleCount({ damGuid: damGuid.value }).then((res: any) => {
		ruleWeightDataLoading.value = false;
		if (res.code == proxy.$passCode) {
			if (isEdit) {
				ruleWeightData.value = res.data?.map(r => {
					r.ruleLargeWeight = r.ruleLargeWeight.toFixed(2);
					return r;
				}) || [];
				editedTableRule.value = false;
				return;
			}
			//新建时，可能是上一步，再下一步返回的。
			let largeCategoryList: string[] = [];
			if (ruleWeightData.value.length) {
				largeCategoryList = ruleWeightData.value.map(d => d.largeCategory);
			}
			let data = res.data || [];
			if (largeCategoryList.length != data.length) {
				ruleWeightData.value = data;
				if (ruleWeightData.value.length) {
					let v = changeNum(100 / ruleWeightData.value.length, 2, true);
					ruleWeightData.value.forEach(d => d.ruleLargeWeight = v);
				}
			} else {
				if (data.some(d => !largeCategoryList.includes(d.largeCategory))) {
					ruleWeightData.value = data;
					if (ruleWeightData.value.length) {
						let v = changeNum(100 / ruleWeightData.value.length, 2, true);
						ruleWeightData.value.forEach(d => d.ruleLargeWeight = v);
					}
				} else {
					// 不处理。使用原始值。
				}
			}
		} else {
			proxy.$ElMessage.error(res.msg);
		}
	});
}

/** ----------------------- 第三步  -------------------------------- */
const configInfoFormRef = ref();
const configFormItems = ref([
	{
		label: '资产名称',
		type: 'select',
		placeholder: '请选择',
		field: 'damGuid',
		default: damGuid.value,
		options: damListData.value,
		props: {
			value: 'guid',
			label: 'damName'
		},
		disabled: true,
		filterable: true,
		clearable: true,
		required: true,
		visible: true
	},
	{
		label: '报告保留期数(期)',
		type: 'input',
		inputType: 'integerNumber',
		placeholder: '请输入正整数，不超过20',
		field: 'reportReserveCycle',
		default: 7,
		max: 20,
		min: 1,
		clearable: true,
		required: false,
		visible: true
	},
	{
		label: "立即执行",
		type: "radio-group",
		placeholder: "",
		field: "isExec",
		default: 'Y',
		options: [
			{
				label: "是",
				value: "Y",
			},
			{
				label: "否",
				value: 'N',
			},
		],
		required: true,
	},
]);

const configFormRules = ref({
	reportReserveCycle: [required('请填写报告保留期数')]
});

const save = () => {
	configInfoFormRef.value?.ruleFormRef?.validate((valid, errorItem) => {
		if (valid) {
			let params = { ...configInfoFormRef.value.formInline, isCreateReport: 'Y', ruleWeights: ruleWeightData.value };
			let models: any = [];
			let transferFilters: any = [];
			for (const key in batchFiltersValue.value) {
				let info = batchFiltersValue.value[key];
				if (info.tables.length) {
					info.tables.forEach(t => {
						transferFilters.push(Object.assign({}, t, {
							filter: info.filter,
							dataFilterGroup: key
						}));
					});
				}
			}
			damSubjectTables.value.forEach(t => {
				let filterInfo = transferFilters.find(b => b.guid == t.guid);
				let rule: any = ruleModelTableInfo.value.data.find((d: any) => d.subjectGuid == t.guid)
				models.push({
					qualityModelGuid: rule?.qualityModelGuid,
					subjectGuid: t.guid,
					dataRange: filterInfo?.filter,
					dataFilterGroup: filterInfo?.dataFilterGroup,
				});
			});
			params.models = models;
			if (planGuid) {
				params.guid = planGuid;
				fullscreenLoading.value = true;
				updateQualityPlan(params).then((res: any) => {
					fullscreenLoading.value = false;
					if (res.code == proxy.$passCode) {
						proxy.$ElMessage.success('资产质量评估编辑成功');
						router.push({
							name: 'damQualityAssess'
						});
						userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
						assetStore.setQualityAssessRefresh(true);
					} else {
						proxy.$ElMessage.error(res.msg);
					}
				})
			} else {
				fullscreenLoading.value = true;
				//	params.damName = 
				saveQualityPlan(params).then((res: any) => {
					fullscreenLoading.value = false;
					if (res.code == proxy.$passCode) {
						proxy.$ElMessage.success('新建资产质量评估保存成功');
						router.push({
							name: 'damQualityAssess'
						});
						userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
						assetStore.setQualityAssessRefresh(true);
					} else {
						proxy.$ElMessage.error(res.msg);
					}
				})
			}
		}
	})
}

const cancelPlan = () => {
	proxy.$openMessageBox("当前页面尚未保存，确定放弃修改吗？", () => {
		userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
		router.push({
			path: '/data-asset/quality-assess'
		});
	}, () => {
		proxy.$ElMessage.info("已取消");
	});
}

</script>

<template>
	<div class="container_wrap full" v-loading="fullscreenLoading">
		<div class="content_main">
			<div class="top_tool_wrap">
				<StepBar :steps-info="stepsInfo" />
			</div>
			<div class="operator_panel_wrap" v-show="step == 0">
				<ContentWrap id="id-baseInfo" title="配置数据资产质量规则" description="">
					<Form ref="damInfoFormRef" :itemList="damFormItems" formId="dam-base-form" :rules="damFormRules"
						@select-change="handleDamInfoSelectChange" col="col3" />
					<Table class="mt4" :tableInfo="modelRuleDetailTableInfo" />
					<div class="row-add-btn">
						<el-button :disabled="!damGuid" link @click="addTableRules" :icon="CirclePlus" v-preReClick>新增</el-button>
					</div>
				</ContentWrap>
			</div>
			<div class="operator_panel_wrap" v-show="step == 1">
				<ContentWrap id="id-filterInfo" title="批量配置过滤条件" description="" class="mb16">
					<Form ref="damInfoFormRef" :itemList="damFormItemsReadOnly" formId="dam-base-form2" col="col3" />
					<div class="tools_btns">
						<el-button type="primary" @click="handleFiltersAdd">批量配置过滤条件</el-button>
						<span class="tips_text">批量给表添加质检数据范围，不需要写where关键字，支持函数。未填写默认质检全部数据。</span>
					</div>
					<Table :tableInfo="ruleModelTableInfo" />
				</ContentWrap>
				<ContentWrap id="id-ruleWeight" title="规则权重" description="">
					<el-table class="rule-weight-table" ref="ruleWeightTableRef" v-loading="ruleWeightDataLoading"
						:data="ruleWeightData" height="100%" :highlight-current-row="true" stripe tooltip-effect="light" border
						:style="{ height: '100%', width: 'auto', 'max-width': '100%', display: 'inline-block' }">
						<el-table-column prop="largeCategoryName" label="规则大类" width="150px" align="left" show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="ruleCount" label="规则数量" width="150px" header-align="right" align="right"
							show-overflow-tooltip>
						</el-table-column>
						<el-table-column prop="ruleLargeWeight" label="规则权重(总分100)" width="200px" align="left"
							show-overflow-tooltip>
							<template #default="scope">
								<el-input v-model.trim="scope.row['ruleLargeWeight']" placeholder="请输入"
									@change="(val) => inputWeightChange(val, scope.row)"
									@input="(val) => inputEventWeightChange(val, scope.row)"></el-input>
							</template>
						</el-table-column>
					</el-table>
				</ContentWrap>
			</div>
			<div class="operator_panel_wrap" v-show="step == 2">
				<ContentWrap id="id-baseInfo" title="执行配置的质量规则" description="">
					<Form ref="configInfoFormRef" :itemList="configFormItems" formId="config-base-form" :rules="configFormRules"
						col="col3" />
				</ContentWrap>
			</div>
		</div>
		<div class="bottom_tool_wrap">
			<template v-if="step == 0">
				<el-button @click="cancelPlan">取消</el-button>
				<el-button type="primary" @click="nextStep(1)">下一步</el-button>
			</template>
			<template v-else-if="step == 1">
				<el-button @click="cancelPlan">取消</el-button>
				<el-button type="primary" @click="previousStep(1)">上一步</el-button>
				<el-button type="primary" @click="nextStep(2)">下一步</el-button>
			</template>
			<template v-else>
				<el-button @click="cancelPlan">取消</el-button>
				<el-button type="primary" @click="previousStep(2)">上一步</el-button>
				<el-button type="primary" v-preReClick @click="save">提交</el-button>
			</template>
		</div>
		<filtersSettingBatch ref="batchFilterDialogRef" :subject-tables="damSubjectTables"
			@filtersValueChange="batchFiltersValueChange"></filtersSettingBatch>
		<el-drawer v-model="drawerInfo.visible" :size="drawerInfo.size" :close-on-click-modal="false"
			:close-on-press-escape="false" :before-close="cancelEditRules">
			<template #header>
				<span class="title">{{ drawerInfo.header.title }}</span>
			</template>
			<template #default>
				<tableRules v-if="drawerInfo.type == 'add'" ref="tableRulesRef" :damGuid="damGuid"
					:toSubjectTables="toSubjectTables" :ruleTypeList="ruleTypeList" :largeCategoryList="largeCategoryList"
					:smallCategoryList="smallCategoryList"></tableRules>
				<div class="drawer-form-content" v-else v-loading="drawerInfoLoading">
					<tableRuleForm ref="tableRuleFormRef" :toSubjectTables="toSubjectTables" :ruleTypeValue="ruleType"
						:value="detailRuleInfo" :ruleTypeList="ruleTypeList" :largeCategoryList="largeCategoryList"
						:smallCategoryList="smallCategoryList"></tableRuleForm>
				</div>
			</template>
			<template #footer>
				<div style="flex:auto">
					<el-button v-preReClick @click="cancelEditRules">取消</el-button>
					<el-button type="primary" :loading="submitRulesLoading" v-preReClick @click="addSubmitRules">确定</el-button>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<style scoped lang="scss">
.top_tool_wrap {
	width: 100%;
	height: 72px;
	margin: 8px 0 0px;
	display: flex;
	justify-content: center;
	align-items: center;

	:deep(.el-steps) {
		width: 50%;
		justify-content: center;
	}
}

.content_main {
	height: calc(100% - 40px);
	padding: 0 16px;
	overflow: hidden auto;

	.operator_panel_wrap {
		height: auto;

		.tools_btns {
			margin-bottom: 8px;

			.tips_text {
				margin-left: 8px;
				font-size: 12px;
				color: #b2b2b2;
			}
		}
	}
}

.row-add-btn {
	.el-button:focus-visible {
		outline: none;
	}

	.el-button--default {
		padding: 8px 0px;
	}

	:deep(.el-icon) {
		width: 16px;
		height: 16px;

		svg {
			width: 16px;
			height: 16px;
		}
	}
}

.bottom_tool_wrap {
	height: 40px;
	padding: 0 16px;
	border-top: 1px solid #d9d9d9;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

:deep(.el-drawer) {
	.el-drawer__body {
		padding: 0px;

		.drawer-form-content {
			height: 100%;
			width: 100%;

			&>.el-form {
				padding: 16px;
			}
		}
	}
}

.mt4 {
	margin-top: 4px;
}

:deep(.rule-weight-table.el-table) {
	& td.el-table__cell {
		padding: 2px 0;
		height: 36px;
	}
}
</style>