<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: []
    }
  },
  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, '当前的对象')
      setTimeout(() => { // 如果用到this.value 需要setTimeout延迟一下拿到最新的值
        console.log(this.value, 'this.value -- select')
      })
    },
    // 移除选项时触发 当设置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, '当前的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>