<style>
  .choiceappoval .ApprovalProcessBg {
    background: #f8f8f8;
    max-height: 400px;
    overflow-y: auto;
  }

  .choiceappoval .Approval_yxList {
    width: 300px;
    background: #f8f8f8;
    min-height: 400px;
    max-height: 400px;
    overflow-y: auto;
  }

  .choiceappoval .Approval_yxList li {
    display: inline-block;
    width: 100%;
    line-height: 40px;
    text-indent: 15px;
    border-bottom: 1px dotted #eee;
  }

</style>

<template>
  <div>
    <q-dialog v-model="IsShow" persistent>
      <q-card style="width: 700px; max-width: 80vw;" class="choiceappoval">
        <q-card-section class="row items-center q-pb-none ">
          <div class="text-h6">选择企业成员</div>
          <q-space />
          <!-- <q-btn
            icon="close"
            flat
            round
            dense
            v-close-popup
            @click="closeEditOrder"
          /> -->
        </q-card-section>
        <q-separator />
        <q-card-section class="q-pt-none" style="padding: 20px 0;">
          <div style="display: flex;align-items: flex-start;justify-content: space-between;">
            <div style="width: 300px; margin: 0 20px;">
              <p style="margin: 0 0 10px 0;display: flex;align-items: center;">
                选择：<el-input style="width: 200px;" placeholder="输入关键字进行过滤" v-model="filterText">
                </el-input>
              </p>
              <el-tree class="ApprovalProcessBg" :filter-node-method="filterNode" :data="memberList" show-checkbox
                ref="treeUser" :props="defaultProps" :render-after-expand="false" node-key="DeptId"
                @check-change="handleNodeChange">
              </el-tree>
            </div>
            <div style="width: 300px; margin: 0 20px;">
              <p style="margin: 0 0 20px 0;">已选：</p>
              <div class="Approval_yxList">
                <li v-for="item in showMember">
                  {{ item.DeptName }}
                  <i @click="mySetCheckedKeys(item.DeptId)" class="el-icon-circle-close showMemberIcon"></i>
                </li>
              </div>
            </div>
          </div>
        </q-card-section>

        <q-separator />
        <q-card-actions align="right" class="bg-white">
          <q-btn class="q-mr-md" label="取消" @click="closeEditOrder" />
          <q-btn color="accent" class="q-mr-md" label="确定" @click="saveOrderInfo()" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>
<script>
  import {
    getEmployeeAddrBook
  } from "../../api/users/user";
  import selectMaterial from "./selectMaterial";

  export default {
    props: {
      outerindex: {
        type: String,
        default: ""
      },
      byval: {
        type: Array,
        default: []
      },
      cptype: {
        //1是列表上使用2 新增使用
        type: String,
        default: "1"
      },
      singleCheck: {
        type: Boolean,
        default: null
      }
    },

    data() {
      return {
        IsShow: true,
        memberList: [],
        filterText: "",
        defaultProps: {
          children: "ChildList",
          label: "DeptName"
        },
        userList: [],
        showMember: [],
        memberSetCheckedKeys: [],
        sysUserKeys: []
      };
    },
    created() {
      if (this.byval.length > 0) {
        this.memberSetCheckedKeys = [];
        this.showMember = JSON.parse(JSON.stringify(this.byval));
        this.byval.forEach(x => {
          this.memberSetCheckedKeys.push(x.DeptId);
        });
      }
      this.getMember(); //部门下面选择员工
    },
    mounted() {},
    watch: {
      filterText(val) {
        this.$refs.treeUser.filter(val);
      }
    },
    methods: {
      getMember() {
        let _arr = this.sysUserKeys.concat(this.memberSetCheckedKeys);
        getEmployeeAddrBook({})
          .then(res => {
            if (res.Code == 1) {
              this.memberList = res.Data;
              let _this = this;
              _this.$refs.treeUser.setCheckedKeys(_arr);
            }
          })
          .catch(() => {});
      },

      filterNode(value, data) {
        if (!value) return true;
        return data.DeptName.indexOf(value) !== -1;
      },

      handleNodeChange(data, checked) {
        //单选
        if (this.singleCheck) {
          if (checked) {
            this.$refs.treeUser.setCheckedKeys([data.DeptId])
            this.showMember=[];
            this.memberSetCheckedKeys=[]
            this.showMember.push({
              DeptName: data.DeptName,
              DeptId: data.DeptId
            });
            this.memberSetCheckedKeys.push(data.DeptId);
          }
        } else {
          data.IsCheck = checked;
          if (data.DataType == 2 && data.IsCheck) {
            //是员工且选中
            let isExsit = false;
            this.showMember.forEach(x => {
              if (x.DeptId == data.DeptId) {
                isExsit = true;
                return false;
              }
            });
            if (!isExsit) {
              this.showMember.push({
                DeptName: data.DeptName,
                DeptId: data.DeptId
              });
              this.memberSetCheckedKeys.push(data.DeptId);
            }
          } else if (data.DataType == 2 && !data.IsCheck) {
            if (
              this.showMember.findIndex(item => item.DeptId === data.DeptId) != -1
            ) {
              this.showMember.splice(
                this.showMember.findIndex(item => item.DeptId === data.DeptId),
                1
              );
              this.memberSetCheckedKeys.splice(
                this.memberSetCheckedKeys.findIndex(item => item === data.DeptId),
                1
              );
              if (
                this.showMember.findIndex(item => item.DeptId === data.ParentId) !=
                -1
              ) {
                this.memberSetCheckedKeys.splice(
                  this.memberSetCheckedKeys.findIndex(
                    item => item === data.ParentId
                  ),
                  1
                );
              }
            }
          }
          if (data.DataType != 2 && data.IsCheck) {
            if (
              this.memberSetCheckedKeys.findIndex(item => item === data.DeptId) ==
              -1
            ) {
              this.memberSetCheckedKeys.push(data.DeptId);
            }
          } else if (data.DataType == 2 && !data.IsCheck) {
            if (
              this.memberSetCheckedKeys.findIndex(item => item === data.DeptId) !=
              -1
            ) {
              this.memberSetCheckedKeys.splice(
                this.memberSetCheckedKeys.findIndex(item => item === data.DeptId),
                1
              );
              if (
                this.showMember.findIndex(item => item.DeptId === data.ParentId) !=
                -1
              ) {
                this.memberSetCheckedKeys.splice(
                  this.memberSetCheckedKeys.findIndex(
                    item => item === data.ParentId
                  ),
                  1
                );
              }
            }
          }
        }
      },
      mySetCheckedKeys(id) {
        if (this.memberSetCheckedKeys.length == 0) return;
        if (id == -1) {
          this.$refs.treeUser.setCheckedKeys(this.memberSetCheckedKeys);
          return;
        }
        this.showMember.splice(
          this.showMember.findIndex(item => item.DeptId === id),
          1
        );
        this.memberSetCheckedKeys.splice(
          this.memberSetCheckedKeys.findIndex(item => item === id),
          1
        );
        this.$refs.treeUser.setCheckedKeys(this.memberSetCheckedKeys);
      },
      //关闭弹窗
      closeEditOrder() {
        this.$emit("close");
      },
      saveOrderInfo() {
        this.$emit("success", this.showMember, this.cptype);
      }
    }
  };

</script>
