<template>
  <div>
    <el-form ref="form" :rules='rules' :model="form">
      <el-form-item prop="dict" class="cascader-container">
        <el-cascader :options='options' v-model='form.dict' :props='props' filterable @change="changeSelect" ref="dictCas">
        </el-cascader>
        <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: 'InfoPointCode',
        label: 'InfoPointName',
        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 = list;
      this.changeSelect(this.form.dict);
    },
    changeSelect(val) {
      setTimeout(() => {
        if (this.$refs.dictCas.getCheckedNodes()[0]) {
          let labels = this.$refs.dictCas.getCheckedNodes()[0].pathLabels;
          let data = this.$refs.dictCas.getCheckedNodes()[0].data;
          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)
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
.cascader-container {
  /deep/ .el-cascader {
    width: 89%;
    display: block;
    float: left;
    .el-input .el-input__inner {
      border-radius: 4px 0 0 4px;
      vertical-align: bottom;
    }
  }
  .update-button {
    display: block;
    float: left;
    border-left: 0;
    border-radius: 0 4px 4px 0;
  }
}
</style>