<template>
  <Treeselect
    class="fieldInput"
    v-model="deptId"
    :options="treeData"
    filterable
    :placeholder="'请选择地区' || placeholder"
    style="width: 215px; height: 20px;"
    :disableBranchNodes="!all"
    clearable
    searchable
    :normalizer="normalizer"
  />
</template>

<script>
import Treeselect from "@/components/vue_treeselect";
import {deptTreeSelect} from "@/api/system/user";

export default {
  name: "DeptSelect",
  props: ['options', 'value', 'placeholder', 'size', 'rootDeptId', 'all', 'valueType', ],
  components: {Treeselect, },
  data() {
    return {
      treeData: [],
      deptId: this.value,
    };
  },
  methods: {
    OnSelected(node) {
      if(node.disabled)
      {
        this.$nextTick(() => {
          this.deptId = null;
        });
      }
      else
        this.$emit('select', node);
    },
    GetRemoteData() {
      this.GetDeptTree();
    },
    GetDeptTree() {
      deptTreeSelect({
        rootId: this.rootDeptId || null,
      }).then((res) => {
        this.treeData = res.data;
      });
    },
    InitData() {
      if(this.options)
        this.treeData = this.options;
      else
        this.GetRemoteData();
    },
    FilterSubject(x, data) {
      if(!x)
        return true;
      return data.label.indexOf(x) !== -1;
    },
    normalizer(node) {
      let valueType = this.valueType || 'deptId';
      return {
        id: valueType === 'orgCode' ? (node.data ? node.data.orgCode : '') : node.id,
        label: node.label,
        children: node.children,
      }
    },
  },
  created() {
    this.InitData(this.options);
  },
  watch: {
    options: function(newVal) {
      this.InitData();
    },
    deptId: function(newVal) {
      if(this.value != newVal)
        this.$emit('input', newVal);
    },
    value: function(newVal) {
      if(this.subjectId != newVal)
        this.deptId = newVal;
    },
  },
  computed: {
  }
}
</script>

<style scoped lang="scss">
.fieldInput {
/*  ::v-deep .vue-treeselect__menu-container {
    width: 320px;
  }*/

  ::v-deep .vue-treeselect__control {
    height: 30px;
    line-height: 30px;
  }
}
</style>
