<template>
  <treeselect class="comm-tree" :options="consUnitOptions" :normalizer="normalizer" @input="handleInput"
              :placeholder="placeholder || $t('common.select', {name: $t('cons.parentUnit')})" :openOnFocus="true"
              @close="onClose"/>
</template>

<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {listConsUnitInfo} from "@/api/cons/consUnitInfo";

export default {
  name: "cons-unit-tree",
  dicts: ['cons_unit_type'],
  components: {Treeselect},
  props: {
    placeholder: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      consUnitOptions: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    onClose() {
      // 在复写样式的时候打开注释
      // debugger
      this.$emit('close');
    },
    /** 查询部门列表 */
    getList() {
      listConsUnitInfo({}).then(response => {
        this.consUnitOptions = this.handleTree(response.rows, "id");
      });
    },
    /** 转换部门数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.children
      };
    },
    handleInput(event) {
      this.$emit('input', event);
    }
  }
};
</script>
<style scoped lang="scss">
.comm-tree {
  ::v-deep {
    .vue-treeselect__menu {
      background: rgba(1, 11, 33, 0.91);
      border: none;
      border-left: 1px solid #4EBBCD;
      border-right: 1px solid #4EBBCD;
      border-bottom: 1px solid #4EBBCD;
      color: #fefefe;

      .vue-treeselect__option--highlight {
        background: #02245DE8;
      }
    }

  }

  &.vue-treeselect--single ::v-deep {
    .vue-treeselect__option--selected {
      background: #141D31B2;

    }
  }
}

</style>
