<template>
  <div>
    <el-form ref="form" :rules='rules' :model="form">
      <el-form-item prop="dict" class="cascader-container">
        <el-cascader-multi :data='options' v-model='form.dict' :value-key='props.value' :label-key='props.label' :children-key='props.children'
          filterable :popper-class="'select'" @change="changeSelect" ref="dictCas" :only-last="true" :no-data-text='"无数据"'>
        </el-cascader-multi>
        <el-tooltip class="item" effect="dark" :content="`于${cacheTime}缓存,点击重新缓存`" placement="top">
          <el-button icon="el-icon-refresh" class="update-button" @click="getDictionary"></el-button>
        </el-tooltip>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import tools from "@/utils/scan/tools";
export default {
  data() {
    return {
      options: [],
      form: {
        dict: [],
      },
      props: {
        value: 'code',
        label: 'name',
        children: 'content'
      },
      rules: {
        dict: [{ required: true, message: '请选择对应数据字典', trigger: 'blur' }]
      },
    }
  },
  computed: {
    ...mapGetters("project", ["dictionary", "cacheTime"]),
  },
  created() {
    if (!this.dictionary.length) {
      this.getDictionary().then(res => {
        this.getDictSuc(res.content)
      })
    } else {
      this.getDictSuc(this.dictionary);
    }
  },
  methods: {
    ...mapActions('project', ['getDictionary']),
    //获取物理世界所有设备类型
    getDictSuc(list) {
      this.options = this.transformList(list);
      this.changeSelect(this.form.dict);
    },
    changeSelect(val) {
      setTimeout(() => {
        if (this.$refs.dictCas) {
          let labels = this.$refs.dictCas.selectedLabels;
          let data = {};
          this.$refs.dictCas.selectedNodes.forEach(t => {
            let key = t.code;
            data[key] = t;
          });
          this.$emit('change', { val: val, labels: labels, data: data })
        }
      }, 500)
    },
    //设置值
    setCascaderVal(value) {
      this.form.dict = tools.deepCopy(value)
    },
    //校验是否选择
    validate(cb) {
      this.$refs.form.validate(valid => {
        if (valid) {
          cb(true)
        } else {
          cb(false)
        }
      })
    },
    transformList(list) {
      let arr = [];
      arr = list.map(t => {
        if (t.content) {
          if (!t.content.length) {
            t.content = [{ name: '暂无可对应信息点', disabled: true }]
          } else {
            t.content = this.transformList(t.content);
          }
        }
        return t;
      })
      return arr;
    }
  }
}
</script>
<style lang="less" scoped>
.cascader-container.el-form-item--small.el-form-item {
  margin-bottom: 0;
  .el-form-item__content div:nth-child(1) {
    width: 89% !important;
    display: block;
    float: left;
    /deep/ .el-input .el-input__inner {
      border-radius: 4px 0 0 4px;
      vertical-align: bottom;
    }
  }
  .update-button {
    display: block;
    height: 32px;
    float: left;
    border-left: 0;
    border-radius: 0 4px 4px 0;
  }
}
</style>
