<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"
    }
  },

  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) {
      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>
