<template>
  <div>
    <el-select class="form-input" v-model="node.cusareaName" filterable style="width: 100%;padding:0">
      <el-option style="height: auto; padding:0;font-weight:normal" :value="node.cusareaName">
        <el-tree
          :data="treeData"
          :expand-on-click-node="false"
          ref="treeForm"
          node-key="cusareaId"
          :show-checkbox="checkbox"
          :default-checked-keys="defaultChecked"
          @check="handleClick"
          @node-click="handleNodeClick"
          :check-on-click-node="true"
          :props="defaultProps">
        </el-tree>
      </el-option>
    </el-select>
  </div>
</template>
<script>
export default {
  name: 'selectTree',
  props: {
    treeData: {
      type: Array,
      default: () => []
    },
    checkVal: {
      type: String,
      default: ''
    },
    checkbox: {
      type: Boolean,
      default: false
    },
    checkedList: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      defaultProps:{
        children: 'children',
        label: 'cusareaName',
        value: 'code'
      },
      node: {
        cusareaName: this.checkVal
      },
      checkList: [],
      defaultChecked: []
    }
  },
  mounted() { 
    this.defaultChecked = this.checkedList.split(',')
  },
  watch: {
    checkVal: {
      handler(val) {
        this.node.cusareaName = val
      }
    },
  },
  methods: {
    //点击节点
    handleNodeClick(data) {
      this.node = data;
      this.$emit('handlerClick', data)
    },
    //节点选中状态变化
    handleClick() {
      this.checkList = this.$refs.treeForm.getCheckedKeys()
      const checkNode = this.$refs.treeForm.getCheckedNodes()
      this.node.cusareaName = checkNode[checkNode.length - 1].cusareaName
      this.$emit('getCheckTree', this.checkList)
      this.$emit('getCheckTreeNode', checkNode)
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-select-dropdown__item {
  padding: 0 !important
}
.tree-container {

}
</style>