<template>
  <div class="d-flex flex-column px-4">
    <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini"> </el-input>
    <el-tree class="filter-tree mt-2" :data="data" node-key="id" :props="defaultProps" :showCheckbox="true" :filter-node-method="filterUser" ref="tree"> </el-tree>
    <div class="d-flex align-items-center justify-content-end mt-2">
      <el-button size="mini" class="mr-3" @click="parent.openUserModal = false">取消</el-button>
      <el-button size="mini" type="primary" @click="confirmSelect">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Button, Input, Tree } from "element-ui";
import { Prop, Watch } from "vue-property-decorator";
/**
 * @Description: 人员选择弹窗
 * @author LiuBo
 * @date 2021/1/29
 * @time 21:35
 */
@Component({
  name: "ApprovalSelectUser",
  components: {
    "el-input": Input,
    "el-tree": Tree,
    "el-button": Button
  }
})
export default class ApprovalSelectUser extends Vue {
  @Prop() parent: any; // 父组件
  @Prop({
    default: () => {
      return [
        {
          id: 1,
          label: "集团业务总部",
          children: [
            {
              id: 4,
              label: "信托一部",
              children: [
                {
                  id: 9,
                  label: "信托一部·信托经理·李先生"
                },
                {
                  id: 10,
                  label: "信托一部·信托经理·马先生"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "信托二部",
          children: [
            {
              id: 5,
              label: "信托二部·信托经理·张先生"
            },
            {
              id: 6,
              label: "信托二部·信托经理·王先生"
            }
          ]
        }
      ]; // 树形列表数据
    }
  })
  data: any; // 树形字典的数据
  @Prop() selectedUser: any; // 用于返显选中人员
  defaultProps = {
    children: "children",
    label: "label"
  }; // 默认配置
  filterText = ""; // 过滤人员的关键字
  @Watch("filterText")
  toFilterTree(val: any) {
    (this.$refs.tree as any).filter(val);
  }
  /**
   * @Description: 重新设置选中项
   * @author LiuBo
   * @date 2021/2/3
   * @time 21:14
   */
  reCheckUser(val: any[]) {
    const keys: any[] = [];
    val.forEach(item => {
      keys.push(item.id);
    });
    (this.$refs.tree as any).setCheckedKeys(keys);
  }
  /**
   * @Description: 字段过滤的函数
   * @author LiuBo
   * @date 2021/2/3
   * @time 19:51
   */
  filterUser(value: any, data: any) {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
  }
  /**
   * @Description: 确认选择
   * @author LiuBo
   * @date 2021/2/3
   * @time 20:26
   */
  confirmSelect() {
    this.parent.openUserModal = false;
    const selectedUser = (this.$refs.tree as any).getCheckedNodes(true);
    this.parent.approvalUser = selectedUser; // 设置选中的人员
  }
  mounted(): void {}
}
</script>
<style scoped lang="scss">
::v-deep .el-checkbox {
  margin-bottom: 0;
}
</style>
