<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%;">
        <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' }"
        popper-class="cascaderParent"
        @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-1
    },
    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>
<style>
.cascaderParent .el-cascader-panel .el-scrollbar:first-child .el-radio {
  display: none;
}
</style>