<template>
	<el-form
		ref="form"
		:rules="rules"
		label-width="110px"
		:model="form">
		<el-row>
			<el-col :span="12">
				<el-form-item
					label="抄表方式"
					prop="method">
					<el-select
						v-model="form.method"
						placeholder="请选择"
						style="width: 100%"
						@change="changeMethod">
						<el-option
							v-for="item in getDictDatas(DICT_TYPE.METHOD)"
							:key="item.value"
							:label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col
				:span="12"
				v-if="form.method == 1">
				<el-form-item
					label="监控对象"
					prop="objectId">
					<el-cascader
						style="width: 100%"
						v-model="objIds"
						:options="objList"
						:props="{ checkStrictly: true, value: 'id', label: 'name' }"
						@change="selectObj"
						clearable></el-cascader>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item
					label="监控能源类型"
					prop="energyTypeId">
					<el-select
						v-model="form.energyTypeId"
						placeholder="请选择"
						style="width: 100%"
						filterable
						@change="toggleType">
						<el-option
							v-for="item in this.energyTypeList"
							:key="item.id"
							:label="item.labelName"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col
				:span="12"
				v-if="form.method == 2">
				<el-form-item
					label="能源表名"
					prop="tableName">
					<el-select
						v-model="form.tableName"
						placeholder="请选择"
						style="width: 100%">
						<el-option
							v-for="item in tableNameList"
							:key="item.value"
							:label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col
				:span="12"
				v-if="form.method == 1">
				<el-form-item
					label="监控模式"
					prop="type">
					<el-select
						v-model="form.type"
						placeholder="请选择"
						style="width: 100%"
						@change="typeChange">
						<el-option
							label="合并"
							:value="1"></el-option>
						<el-option
							label="详细"
							:value="2"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col
				:span="12"
				v-if="form.method == 1">
				<el-form-item
					label="监控详细参数"
					prop="type"
					v-if="form.type === 2">
					<el-select
						v-model="form.plcParamId"
						placeholder="请选择"
						style="width: 100%"
						@change="selectDetail">
						<el-option
							v-for="item in detailList"
							:key="item.id"
							:label="item.name"
							:value="item.id"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item
					label="指标类型"
					prop="limitType">
					<el-select
						v-model="form.limitType"
						placeholder="请选择"
						style="width: 100%"
						:disabled="form.method == 2">
						<el-option
							v-for="item in getDictDatas(DICT_TYPE.MONITOR_INDEX_TYPE)"
							:key="item.value"
							:label="item.label"
							:value="item.value"></el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="消耗量阈值">
					<el-input-number
						v-model="form.minValue"
						placeholder="最小值"
						:max="9999999"
						style="width: 50%"></el-input-number>
					<el-input-number
						v-model="form.maxValue"
						placeholder="最大值"
						:max="9999999"
						style="width: 50%"></el-input-number>
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>
<script>
import {
	getEnergyLimit,
	updateEnergyLimit,
	createEnergyLimit,
	getEnergyParamList,
} from '@/api/monitoring/energyLimit';
import { energyTableGet } from '@/api/base/energyQuantityManual';
export default {
	name: 'energyLimitAdd',
	props: {
		energyTypeList: {
			type: Array,
			required: true,
			default: () => {
				return [];
			},
		},
		objList: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			form: {
				id: '',
				method: '1',
				objectId: '',
				objectType: '',
				energyTypeId: '',
				type: '',
				plcParamId: '',
				limitType: '',
				minValue: 0,
				maxValue: 0,
				tableName: '',
			},
			objIds: [], // 回显数组
			isEdit: false, //是否是编辑
			rules: {
				method: [
					{ required: true, message: '抄表方式不能为空', trigger: 'change' },
				],
				objectId: [
					{ required: true, message: '监控对象不能为空', trigger: 'change' },
				],
				energyTypeId: [
					{ required: true, message: '能源类型不能为空', trigger: 'change' },
				],
				type: [
					{ required: true, message: '监控模式不能为空', trigger: 'change' },
				],
				limitType: [
					{ required: true, message: '指标类型不能为空', trigger: 'change' },
				],
			},
			tableNameList: [],
			detailList: [],
		};
	},
	methods: {
		init(id) {
			if (id) {
				this.isEdit = true;
				this.form.id = id;
				getEnergyLimit(id).then((res) => {
					if (res.code === 0) {
						this.form = res.data;
						this.form.tableName = this.form.tableName
							? this.form.tableName + ''
							: '';
						this.form.plcParamId = res.data.plcParamId || '';
						this.form.method = this.form.method ? this.form.method + '' : '';
						this.form.limitType = this.form.limitType
							? this.form.limitType + ''
							: '';
						this.objIds = this.changeDetSelect(
							this.form.objectId,
							this.objList
						);
						if (this.form.type === 2) {
							this.getDetailList();
						}
						if (this.form.energyTypeId) {
							this.getTableNameList(this.form.energyTypeId);
						}
					}
				});
			} else {
				this.isEdit = false;
				this.form.id = '';
			}
		},
		// 切换方式
		changeMethod() {
			if (this.form.method === '2') {
				this.form.limitType = '2';
			} else {
				this.form.limitType = '';
			}
		},
		// 监控详细参数
		getDetailList() {
			getEnergyParamList({
				objId: this.form.objectId,
				energyTypeId: this.form.energyTypeId,
			}).then((res) => {
				if (res.code === 0) {
					this.detailList = res.data;
				} else {
					this.detailList = [];
				}
			});
		},
		typeChange(val) {
			console.log(this.form);
			this.form.plcParamId = '';
			if (val === 2) {
				if (this.form.objectId && this.form.energyTypeId) {
					this.getDetailList();
				}
			}
		},
		toggleType() {
			if (this.form.energyTypeId && this.form.method == 2) {
				this.form.tableName = '';
				this.getTableNameList(this.form.energyTypeId);
			}
		},
		// 获取能源表名list
		getTableNameList(id) {
			energyTableGet({ energyTypeId: id }).then((res) => {
				this.tableNameList = res.data.tableObjs || [];
				if (this.tableNameList.length === 0) {
					this.$modal.msgWarning(
						'当前能源类型暂无配置表名，请先到《表名配置》页面配置'
					);
				}
			});
		},
		// 递归处理分类回显问题
		changeDetSelect(key, treeData) {
			let arr = []; // 递归时操作的数组
			let returnArr = []; // 存放结果的数组
			let depth = 0; // 定义全局层级
			// 定义递归函数
			function childrenEach(childrendData, depthN) {
				for (var j = 0; j < childrendData.length; j++) {
					depth = depthN;
					arr[depthN] = childrendData[j].id;
					if (childrendData[j].id == key) {
						returnArr = arr.slice(0, depthN + 1);
						break;
					} else {
						if (childrendData[j].children) {
							depth++;
							childrenEach(childrendData[j].children, depth);
						}
					}
				}
				return returnArr;
			}
			return childrenEach(treeData, depth);
		},
		selectObj(val) {
			this.form.objectId = val[val.length - 1];
			this.form.objectType = val.length;
			if (this.form.energyTypeId && this.form.type) {
				this.getDetailList();
				this.form.plcParamId = '';
			}
		},
		selectDetail() {
			this.$forceUpdate();
		},
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.form.type === 2 && !this.form.plcParamId) {
						this.$modal.msgError('监控模式为详细时，详细参数为必填');
						return false;
					}
					if (this.form.minValue && this.form.maxValue) {
						if (this.form.minValue > this.form.maxValue) {
							this.$modal.msgError('消耗量阈值，最小值不能大于最大值');
							return false;
						}
					}
					this.form.minValue = this.form.minValue || 0;
					this.form.maxValue = this.form.maxValue || 0;
					if (this.isEdit) {
						// 编辑
						updateEnergyLimit({ ...this.form }).then((res) => {
							if (res.code === 0) {
								this.$modal.msgSuccess('操作成功');
								this.$emit('successSubmit');
							}
						});
					} else {
						createEnergyLimit({ ...this.form }).then((res) => {
							if (res.code === 0) {
								this.$modal.msgSuccess('操作成功');
								this.$emit('successSubmit');
							}
						});
					}
				} else {
					return false;
				}
			});
		},
		formClear() {
			this.$refs.form.resetFields();
			this.form.type = '';
			this.form.plcParamId = '';
			this.form.minValue = null;
			this.form.maxValue = null;
			this.objIds = '';
			this.detailList = [];
			this.isEdit = false;
		},
	},
};
</script>
