<template>
  <div class="d-flex flex-column px-4 am-body">
    <div class="d-flex flex-row flex-1-dhcc am-body-1">
      <div class="am-over">
        <div v-if="treeData.length > 0">
          <el-tree class="mt-2" :data="treeData" node-key="id" :props="defaultProps" :filter-node-method="filterUser" @node-click="handleNodeClick" ref="tree"></el-tree>
        </div>
      </div>
      <div class="am-title-body flex-1-dhcc w-0-dhcc">
        <div class="d-flex p-2">
          <el-input placeholder="输入关键字进行过滤" v-model="filterText" size="mini"></el-input>
          <div style="width: 20px"></div>
          <el-button size="mini" type="primary" @click="selectData">搜索</el-button>
          <el-button size="mini" class="mr-3" @click="resetData">重置</el-button>
        </div>
        <div>
          <el-table :data="tableData" :header-cell-style="rowStyle" @current-change="tableHandleCurrentChange" highlight-current-row ref="table" aria-checked="true" header-align="center" :height="400">
            <el-table-column align="center" label="序号" width="55" type="index"></el-table-column>
            <el-table-column align="center" prop="fullname" label="姓名(岗位)"></el-table-column>
            <el-table-column align="center" prop="account" label="账号"></el-table-column>
            <el-table-column align="center" prop="mobile" label="手机"></el-table-column>
            <el-table-column align="center" prop="email" label="邮箱"></el-table-column>
          </el-table>
          <am-pagination :pageSize="pageSize" :totalCount="total" :currentPage="pageNum" @sizeChange="handleSizeChange" @currentChange="handleCurrentChange"></am-pagination>
        </div>
      </div>
      <div class="am-userInfo-body pl-2 pr-2">
        <div class="hlh-45-dhcc">选择的用户</div>
        <template v-if="userInfo.length > 0">
          <div v-for="(item, index) of userInfo" v-bind:key="index" class="d-flex justify-content-between align-items-center mt-2">
            <span>{{ item.fullname ? item.fullname : "" }}</span>
            <el-button type="danger" icon="el-icon-delete" circle class="am-button-err" @click="deleteUser(index)"></el-button>
          </div>
        </template>
      </div>
    </div>
    <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, Table, TableColumn, Tree } from "element-ui";
import { Prop, Watch } from "vue-property-decorator";
import apiService from "@/services/api.service";
import flowProcessApi from "@/constants/api/ebtrust-project/flow-process.api";
import { DataInput, DataOutput } from "@/model";
import { Code } from "@/constants/enum/code.enum";
import AmPagination from "@/views/AmPagination.vue";
/**
 * @Description: 人员选择弹窗
 * @author LiuBo
 * @date 2021/1/29
 * @time 21:35
 */
@Component({
  name: "ApprovalSelectUser",
  components: {
    "el-input": Input,
    "el-tree": Tree,
    "el-button": Button,
    "el-table": Table,
    "el-table-column": TableColumn,
    AmPagination
  }
})
export default class ApprovalSelectUser extends Vue {
  @Prop() parent: any; // 父组件
  data: any; // 树形字典的数据
  treeData: any[] = []; // 树形字典的数据
  @Prop() selectedUser: any; // 用于返显选中人员
  defaultProps = {
    children: "children",
    label: "title"
  }; // 默认配置
  filterText = ""; // 过滤人员的关键字
  tableData = []; // 查询的人员数据
  userInfo: any = []; // 查询的人员数据
  pageNum = 1;
  pageSize = 10;
  total = 0;
  groupId: string | undefined;
  mounted(): void {
    this.selectUserTree();
    this.selectUserInfo();
  }
  /**
   * @Description: 设置表头样式
   */
  rowStyle() {
    return {
      "background-color": "#f6f6f6",
      color: "#333333",
      fontSize: 14,
      fontWeight: 500
    };
  }
  /**
   * @Description: 每页条数变化事件
   */
  handleSizeChange(data: any) {
    this.pageSize = data;
    this.selectUserInfo();
  }
  /**
   * @Description: 页码变化事件
   */
  handleCurrentChange(data: any) {
    this.pageNum = data;
    this.selectUserInfo();
  }

  /**
   * @Description: 列表点击
   * @author GuoXuHui
   * @date 2021-07-12
   * @time 15:46
   */
  tableHandleCurrentChange(data: any) {
    if (data) {
      const number = this.userInfo.findIndex((value: any) => value.id === data.id);
      if (number < 0) {
        this.userInfo.push(data);
      }
    }
  }
  /**
   * @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 GuoXuHui
   * @date 2021-07-12
   * @time 13:45
   */
  selectUserInfo() {
    const dataInput = new DataInput();
    dataInput.data = {
      pageBean: { page: this.pageNum, pageSize: this.pageSize }
    };
    if (this.groupId || this.filterText) {
      dataInput.data.querys = [];
    }
    if (this.groupId) {
      dataInput.data.querys.push({
        group: "orgTree",
        operation: "IN",
        property: "ORG_ID_",
        relation: "AND",
        value: this.groupId
      });
    }
    if (this.filterText) {
      dataInput.data.querys.push({
        group: "quick",
        operation: "LIKE",
        property: "fullname",
        relation: "OR",
        value: this.filterText
      });
      dataInput.data.querys.push({
        group: "quick",
        operation: "LIKE",
        property: "account",
        relation: "OR",
        value: this.filterText
      });
      dataInput.data.querys.push({
        group: "quick",
        operation: "LIKE",
        property: "mobile",
        relation: "OR",
        value: this.filterText
      });
    }
    apiService.general(flowProcessApi.approval.getOrgUserPage, undefined, dataInput).then((dataOutput: DataOutput<any>) => {
      if (dataOutput.code === Code.SUCCESS.code) {
        const data1 = dataOutput.data;
        const parse = JSON.parse(data1);
        this.tableData = parse.rows;
        this.total = parse.total;
      } else {
        this.$message(dataOutput.msg);
      }
    });
  }
  /**
   * @Description: 确认选择
   * @author GuoXuHui
   * @date 2021-07-12
   * @time 13:45
   */
  confirmSelect() {
    this.$emit("userChange", this.userInfo);
    this.parent.openUserModal = false;
  }

  /**
   * @Description: 删除数组
   * @author GuoXuHui
   * @date 2021-07-12
   * @time 17:09
   */
  deleteUser(idx: number) {
    this.userInfo = this.userInfo.filter((val: any, index: number, arr: any) => index !== idx); // 删就是取反 返回新数组
  }
  /**
   * @Description: 重置
   * @author GuoXuHui
   * @date 2021-07-12
   * @time 13:47
   */
  resetData() {
    this.filterText = "";
    this.groupId = "";
    this.pageNum = 1;
    this.pageSize = 10;
    this.selectUserInfo();
  }

  /**
   * @Description: 搜索
   * @author GuoXuHui
   * @date 2021-07-12
   * @time 13:47
   */
  selectData() {
    this.pageNum = 1;
    this.selectUserInfo();
  }

  /**
   * @Description: 搜索人员树
   * @author GuoXuHui
   * @date 2021-07-12
   * @time 13:49
   */
  selectUserTree() {
    const dataInput = new DataInput();
    dataInput.data = {
      demId: "1258608622670319616"
    };
    apiService.general(flowProcessApi.approval.getOrgTree, undefined, {}).then((dataOutput: DataOutput<any>) => {
      if (dataOutput.code === Code.SUCCESS.code) {
        const data1 = dataOutput.data;
        const parse = JSON.parse(data1);
        const treeNode: any = this.createTreeNode(parse);
        console.dir(treeNode);
        this.treeData = [treeNode];
      } else {
        this.$message(dataOutput.msg);
      }
    });
  }

  /**
   * @Description: 查询出的数据转为tree类型
   * @author GuoXuHui
   * @date 2021-07-12
   * @time 13:49
   */
  createTreeNode(data: any[]): any {
    const treeNode = data.find(value => value.parentId === "0");
    if (treeNode) {
      treeNode.children = this.transformationcreateTreeNode(data, treeNode.id);
    }
    return treeNode;
  }

  /**
   * @Description: 递归
   * @author GuoXuHui
   * @date 2021-07-12
   * @time 13:49
   */
  transformationcreateTreeNode(subjectInfos: any[], id: string): any[] {
    const treeNode: any[] = [];
    subjectInfos.forEach((val, idx, array) => {
      if (val.parentId === id) {
        val.children = this.transformationcreateTreeNode(subjectInfos, val.id);
        treeNode.push(val);
      }
    });
    return treeNode;
  }

  /**
   * @Description: 节点点击事件
   * @author GuoXuHui
   * @date 2021-07-12
   * @time 13:52
   */
  handleNodeClick(data: any) {
    console.dir(data);
    this.groupId = data.groupId;
    this.filterText = "";
    this.pageNum = 1;
    this.pageSize = 10;
    this.selectUserInfo();
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-checkbox {
  margin-bottom: 0;
}

.am-body {
}

.am-over {
  overflow: auto;
  height: 500px;
  min-width: 200px;
}
.am-userInfo-body {
  width: 200px;
}
.am-title-body {
}
.am-body-1 > div {
  border: 1px #e4e4e4 solid;
}
.am-button-err {
  padding: 3px !important;
  font-size: 5px;
}
</style>
