<template>
	<el-form
		ref="form"
		:rules="rules"
		label-width="100px"
		:model="form">
		<el-form-item
			label="关联表名"
			prop="plcId">
			<el-select
				v-model="form.plcId"
				placeholder="请选择"
				style="width: 100%"
				filterable>
				<el-option
					v-for="item in plcList"
					:key="item.id"
					:label="item.plcTableName"
					:value="item.id"></el-option>
			</el-select>
		</el-form-item>
		<el-form-item
			label="对象"
			prop="bindObjectId">
			<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-form>
</template>
<script>
import {
	getEnergyPlcConnect,
	updateEnergyPlcConnect,
	createEnergyPlcConnect,
} from '@/api/base/energyPlcConnect';
import { getEnergyPlcAll } from '@/api/base/energyPlc';
export default {
	name: 'EnergyPlcConnectAdd',
	props: {
		objList: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			form: {
				id: '',
				plcId: '',
				bindObjectId: '',
				bindObjectType: '',
			},
			objIds: [], // 回显数组
			plcList: [],
			isEdit: false, //是否是编辑
			rules: {
				plcId: [
					{ required: true, message: '关联表名不能为空', trigger: 'change' },
				],
				bindObjectId: [
					{ required: true, message: '对象不能为空', trigger: 'change' },
				],
			},
		};
	},
	methods: {
		init(id) {
			getEnergyPlcAll().then((res) => {
				this.plcList = res.data || [];
			});
			if (id) {
				this.isEdit = true;
				this.form.id = id;
				getEnergyPlcConnect(id).then((res) => {
					if (res.code === 0) {
						this.form = res.data;
						this.objIds = this.changeDetSelect(
							this.form.bindObjectId,
							this.objList
						);
					}
				});
			} else {
				this.isEdit = false;
				this.form.id = '';
			}
		},
		// 递归处理分类回显问题
		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.bindObjectId = val[val.length - 1];
			this.form.bindObjectType = val.length;
		},
		submitForm() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					if (this.isEdit) {
						// 编辑
						updateEnergyPlcConnect({ ...this.form }).then((res) => {
							if (res.code === 0) {
								this.$modal.msgSuccess('操作成功');
								this.$emit('successSubmit');
							}
						});
					} else {
						createEnergyPlcConnect({ ...this.form }).then((res) => {
							if (res.code === 0) {
								this.$modal.msgSuccess('操作成功');
								this.$emit('successSubmit');
							}
						});
					}
				} else {
					return false;
				}
			});
		},
		formClear() {
			this.form.id = '';
			this.form.plcId = '';
			this.form.bindObjectId = '';
			this.form.bindObjectType = '';
			this.objIds = [];
			this.isEdit = false;
		},
	},
};
</script>