<template>
    <!--  弹出框  -->
    <el-popover
      placement="bottom-start"
      v-model="visible">

      <el-input style="width: 100%;margin-bottom: 20px;" v-model="queryForm.value" placeholder="请输入过滤值" clearable></el-input>
      <el-row :gutter="20" type="flex" align="middle">
        <el-col :span="14" :xs="24">
          <el-select  v-model="queryForm.type" placeholder="请选择过滤机构类型" clearable>
            <el-option
              v-for="dict in dict.type.org_type_number"
              :key="dict.value"
              :label="dict.label"
              :value="`${dict.value}`"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="10" :xs="24" >
          <el-checkbox v-model="isIncludeSub">按过滤机构类型勾选</el-checkbox>
        </el-col>
      </el-row>

      <div class="tree-box">
        <el-tree
          ref="tree"
          :data='orgTree'
          :props="props"
          node-key="id"
          show-checkbox
          check-strictly
          :default-expand-all="showAll"
          :expand-on-click-node="false"
          :default-checked-keys="defaultNode"
          @node-click="handleNodeClick"
          @check="onCheck"
          :filter-node-method="filterNode">
        </el-tree>
      </div>


      <!--  选中的值  -->
      <div slot="reference" class="tags-box"></div>
  </el-popover>
</template>

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

export default {
  dicts:['org_type_number'],
  data (){
    return {
      visible:false,
      orgTree:null,
      props: {
        label: 'name',
      },
      queryForm:{
        value:null,
        type:null,
      },
      isIncludeSub:false,
      defaultNode:[],
      selectNode:[],
      showAll:false
    }
  },
  mounted(){
    this.getDeptTree();
  },
  watch: {
    queryForm:{
      deep:true,
      handler(n,o) {
        this.$refs.tree.filter(n);
      },
    },
  },
  methods:{
    /** 查询机构树 */
    getDeptTree() {
      deptTreeSelect().then(response => {
        this.orgTree = response.data;
      });
    },
    filterNode(value,data,node){
      if (this.queryForm.value && this.queryForm.type) {
        return data.name.indexOf(this.queryForm.value) >= 0 && data.type == this.queryForm.type;
      }
      if (this.queryForm.value) {
        return data.name.indexOf(this.queryForm.value) >= 0;
      }
      if (this.queryForm.type) {
        return data.type == this.queryForm.type;
      }
      console.log('ttttt')
      this.showAll = false;
      return true
    },
    handleNodeClick(){

    },
    onCheck(data, checked, tree) {
        if (this.queryForm.type && this.isIncludeSub) {
          let subOrgIds = [];
          let currentCheckedIndex = checked.checkedKeys.findIndex(
            (x) => {
              x == data.id
            }
          );
          checked.checkedKeys.splice(currentCheckedIndex, 1);
          let checkValue = currentCheckedIndex > -1;
          this.getSubOrgIdsByOrgType(data, this.queryForm.type, subOrgIds);
          console.log(subOrgIds,checkValue,'subOrgIds')
          if (!checkValue) {
            subOrgIds.forEach((x) => checked.checkedKeys.push(x.id));
          } else {
            subOrgIds.forEach((x) => {
              let index = checked.checkedKeys.findIndex((y) => x.id == y);
              if (index > -1) {
                checked.checkedKeys.splice(index, 1);
              }
            });
          }
          console.log(checked,'checked')
          this.$refs.tree.setCheckedKeys(checked.checkedKeys);
      }
      const dataList = this.$refs.tree.getCheckedNodes();
      this.$emit("selectNode", JSON.stringify(dataList));
    },
    getSubOrgIdsByOrgType(topOrg, orgType, orgIdList) {
        if (!topOrg) return;
        if (topOrg.type == orgType) {orgIdList.push(topOrg)};
        if (topOrg.children && topOrg.children.length > 0) {
          topOrg.children.forEach((item) => {
            this.getSubOrgIdsByOrgType(item, orgType, orgIdList);
          });
        }
    },
  }
}
</script>

<style scoped lang="scss">
  .tags-box{
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    outline: 0;
    padding: 0 15px;
    width: 100%;
    height: 36px;
    line-height: 36px;
  }
  .tree-box{
    margin-top: 20px;
    max-height: 300px;
    overflow: auto;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
  }
</style>
