<template>
  <el-select
    ref="selectTree"
    v-model="inputValue"
    :placeholder="placeholder"
    v-bind="$attrs"
    clearable
    style="width: 20%"
    @remove-tag="removeTag">
    <el-option ref="option" class="option" :value="optionData.id" :label="optionData.name">
      <el-tree
        ref="selectTree"
        :show-checkbox="this.$attrs.multiple"
        :default-expand-all="defaultExpandAll"
        highlight-current
        accordion
        :node-key="nodeKey"
        :check-on-click-node="expandOnClickNode"
        :data="options"
        :props="defaultProps"
        @node-click="handleNodeClick"
        @check="checkNode"
      />
    </el-option>
  </el-select>
</template>

<script>
import { CmsFormSelectTree } from './CmsFormSelectTreeMixin'

export default {
  name: "CmsFormSelectTree",
  mixins: [ CmsFormSelectTree ],
  created() {
    if (this.requestCall) {
      if (typeof this.requestCall === 'function') {
        this.requestCall(this.extraData).then(result => {
          if (result && result.code === 200) {
            this.options = result.data;
            this.getNodeName(this.options)
          } else {
            this.$messageTips.error(result.msg);
          }
        }).catch(error => {
          console.log(error);
        })
      } else if (typeof this.requestCall === 'object') {
        if (result && result.code === 200) {
          this.options = result.data;
          this.getNodeName(this.options)
        } else {
          this.$messageTips.error(result.msg);
        }
      } else if (Array.isArray(this.requestCall)) {
        this.options = this.requestCall;
        this.getNodeName(this.options)
      }
    }
  },
  methods: {
    getNodeName(list) {
      debugger;
      if (list) {
        for (const item of list) {
          console.log('item===', list)
          if (list[this.defaultProps.children]) {
            this.getNodeName(list);
          }
        }
      }
    },
    // 删除tag时，
    removeTag(val) {
      // 取消勾选
      const selectTree = this.$refs.selectTree
      selectTree.setChecked(val, false, false)
      // 重新给控件赋值
    },
    handleNodeClick(data) {
      let label = this.defaultProps.label;
      this.optionData.id = data[this.nodeKey]
      this.optionData.name = data[label]
      // this.$emit('input', this.optionData.name)
      this.inputValue = this.optionData.name;
      if (this.matchKey) {
        Object.keys(this.matchKey).forEach(key => {
          this.formModel[key] = data[key];
        })
      }
      this.$refs.selectTree.visible = false
    },
    // 勾选节点，
    checkNode(node) {
      node.value = node.id
      node.currentLabel = node.label
      // 给selectTree的cachedOptions赋值 设置node.label，使用页面显示label值
      const selectTree = this.$refs.selectTree
      selectTree.cachedOptions.push(node)
      selectTree.handleOptionSelect(node, true)
      this.$emit('input', this.value)
    }
  },
  watch: {
    selectData: {
      handler(val) {
        this.getNodeName(val);
      },
      immediate: true
    },
  }
}
</script>

<style scoped lang="scss">
/* 去除tree上面的一行高度 */
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  padding: 0;
}

</style>