<template>
  <el-cascader 
    v-model="selectValue" 
    :placeholder="placeholder"
    clearable
    filterable
    v-on="$listeners"
    style="width: 100%;"
    :options="options"
    :show-all-levels="false"
    :props="{ 
      emitPath: false, 
      multiple: multiple, 
      expandTrigger: 'hover',
      value: 'deptId',
      label: 'deptName',
      checkStrictly: checkStrictly
    }"
  />
</template>

<script>
import { listDept } from "@/api/system/dept";

export default {
  name: "DeptSelect",
  props: {
    value: {
      type: [String, Array],
      default: null
    },
    placeholder: {
      type: String,
      default: "请选择部门"
    },
    disabled: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    },
    // 是否严格的遵守父子节点不互相关联
    checkStrictly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options: [],
    };
  },
  computed: {
    selectValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  created() {
    this.getOptions();
  },
  methods: {
    getOptions() {
      listDept().then(response => {
        this.options = this.handleTree(response.data, "deptId", "parentId", "children");
      });
    },
  }
};
</script>