<template>
  <!-- <div class="main">
    <div class="tree"> -->
  <Treeselect v-model="value" :options="options" :placeholder="'请选择人员'" :multiple="multiple" @input="treeSelectInput"
    @select="treeSelectChange" @deselect="treeSelectDeselect" @search-change="treeSelectSearch" @open="treeSelectOpen"
    @close="treeSelectClose" />
  <!-- </div>
  </div> -->
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";

// import treeData from './data/tree'
export default {
  data() {
    return {
      value: null,
      options: [],
      rawList: [],
    }
  },
  props: {
    multiple: {
      type: false
    }
  },
  components: { Treeselect },
  mounted() {
    // 延迟模拟请求数据
    setTimeout(() => {
      // this.options = treeData
      // this.value = [ "1682295245318119426", "1682295184152584194"] // 测试回显操作
    }, 300)
    this.getDeptTree()
  },
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.options = response.data;
      });
    },
    // 选中触发（第一次回显的时候会触发，清除值的时候会触发, value值为undefined） input事件用于v-model双向绑定组件更新父组件值
    treeSelectInput(value, instanceId) {
      console.log(value, 'input事件')
      console.log(this.value, 'this.value -- input') // 这个不需要 延迟
    },
    // 选中触发（清除值的时候不会触发）
    treeSelectChange(raw, instanceId) {
      console.log(raw, '当前的对象')
      let self = this
      this.rawList = raw
      setTimeout(() => { // 如果用到this.value 需要setTimeout延迟一下拿到最新的值
        console.log(this.value, raw, 'this.value -- select')
        if (!this.multiple) {
          if (raw.children == undefined) {

          } else {
            if (self.value == raw.id) {
              self.value = null
            }
          }
        }

      })
    },
    // 移除选项时触发 当设置multiple为true时生效  raw为当前移除的对象
    treeSelectDeselect(raw, instanceId) {
      console.log(raw, 'deselect-->>')
    },
    // 搜索
    treeSelectSearch(searchQuery, instanceId) {
      console.log(searchQuery, '当前搜索的值')
    },
    // 展开触发
    treeSelectOpen(instanceId) {
      console.log('展开了')
    },
    // 关闭触发
    treeSelectClose(value, instanceId) {
      console.log(value, this.rawList.id, '当前的value值')
    },
    // 字段默认 id label 用于规范化数据源
    tenantIdnormalizer(node, instanceId) {
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.title,
        children: node.children
      }
    }
  }
}
</script>
<style scoped>
.main {
  width: 100%;
  height: 100%;
  padding: 60px 0 0 200px;
}

.main .tree {
  width: 240px;
  height: 40px;
}

::v-deep .vue-treeselect__label {
  color: #606266;
}
</style>