
<template>
  <base-dialog
    :closeEscape="true"
    :showClose="true"
    :closeModal="false"
    @handleConfirmClick="personConfirmClick"
    :dialogVisible.sync="personDialog"
    @handleClose="handleClose"
    class="userDialog"
    title="选择人员"
    width="1200px"
    top="10vh"
    :footerShow="true"
  >
    <div class="organizationBody">
      <div style="display: flex">
        <base-layout
          style="
            width: 20%;
            border-radius: 5px;
            height: calc(100vh - 360px);
            overflow: auto;
          "
          :operateButtonSwitch="false"
          :bottonShow="false"
          :isPage="false"
          :mainColor="mainColor"
          :mainHight="personMainHight"
        >
          <div slot="main">
            <base-tree
              ref="baseTree"
              :isCenter="false"
              :isSaveBtn="false"
              :Allshow="false"
              :showCheckbox="false"
              :menuData="menuData"
              @handleNodeClick="handleNodeClick"
            ></base-tree>
          </div>
        </base-layout>
        <base-layout
          style="border-radius: 5px; height: calc(100vh - 360px); flex: 1"
          :bottonShow="false"
          :operateButtonSwitch="false"
          :isPage="false"
          :bodyHight="personHight"
        >
          <div slot="main" style="padding: 10px">
            <base-table
              ref="personpersonCustomtable"
              :border="true"
              :showIndex="false"
              :showSelect="true"
              :tabLoading.sync="personLoading"
              :tableHeight="personTableHeight"
              :tableData="personTableData"
              :tableColumn="tableColumn"
              @onSelectionChange="getSelect"
              @select="getOneSelectChange"
            >
              <template #state="{ row }">
                <div>{{ row.state == 1 ? "停用" : "启用" }}</div>
              </template>
            </base-table>
          </div>
        </base-layout>
      </div>

      <!--    多选模块-->
      <div class="multipleChoice" v-if="selectTableShow.length > 0">
        <div class="title">已选</div>
        <div
          class="checkBoxlist"
          style="display: flex; margin-left: 5px; margin-top: 10px"
        >
          <div
            class="chunkItem"
            v-for="(item, index) in selectTableShow"
            :key="index"
            style="display: flex; align-items: center"
          >
            <div class="name">{{ item.personName }}</div>
            <div class="btn" @click="removeCheckItem(item, index)">x</div>
          </div>
        </div>
      </div>
    </div>
  </base-dialog>
</template>

<script>
import { authApi } from "@/api/apis/auth";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import baseTree from "@/components/base/BaseMenuTree/index.vue";
import baseLayout from "@/components/base/baseNewLayout";
import baseTable from "@/components/base/baseTable";
import { PersonList } from "@/api/apis/personnelSettings";
export default {
  components: {
    baseLayout,
    baseTree,
    baseDialog,
    baseTable,
  },
  data() {
    return {
      personDialog: false,
      mainColor: "#f8f8f8",
      personMainHight: "calc(100% - 39px)", //人员弹框高度
      personHight: "350px", //人员选择高度
      personLoading: false, //人员加载
      personTableHeight: "440px", //人员表格高度
      personTableData: [],
      personModel: {
        pageNum: 1,
        pageSize: 999,
        organId: "",
        Sequence: "",
        SequenceName: "",
      },
      personData: [],
      menuData: [],
      tableColumn: [
        {
          label: "所属部门",
          prop: "organName",
          tooltip: true,
        },
        {
          label: "工号",
          prop: "personCode",
          tooltip: true,
        },
        {
          label: "姓名",
          prop: "personName",
          tooltip: true,
        },
        {
          label: "入职时间",
          prop: "entryTime",
          tooltip: true,
        },
        {
          label: "固定电话 ",
          prop: "mobilePhone",
          tooltip: true,
        },
        {
          label: "电子邮箱",
          prop: "email",
          tooltip: true,
        },
        {
          label: "出生年月",
          prop: "birthDay",
          tooltip: true,
        },
        {
          label: "是否用户分配",
          prop: "state",
          tooltip: true,
          width: 150,
        },
      ],
      selectTableShow: [],
    };
  },
  watch: {
    personTableData: {
      deep: true, //深度监听设置为 true
      handler(newV, oldV) {
        this.checkHandle();
      },
    },
  },
  methods: {
    openDialog(result = []) {
      this.personDialog = true;
      this.getOrganList();
			if(result.length > 0){
				this.selectTableShow = result
			}
    },
    //删除已选单个
    removeCheckItem(item, index) {
      this.selectTableShow.splice(index, 1);
      this.checkHandle();
    },
    //复选多选框专用方法
    checkHandle() {
      let tempArr = [];
      this.personTableData.forEach((item) => {
        this.selectTableShow.forEach((ele) => {
          if (ele.id === item.id) {
            tempArr.push(item);
          }
        });
      });
      this.$refs.personpersonCustomtable.clearSelect();
      this.$nextTick(() => {
        this.$refs.personpersonCustomtable.toggleSelection(tempArr, true);
      });
    },
    // 获取组织列表
    async getOrganList() {
      let res = await authApi("sysOrganService", "", "queryEntityTree", "", {
        state: 0,
      });
      this.menuData = res.attribute;
    },
    // 菜单树选中
    handleNodeClick(data) {
      this.personModel.organId = data.id;
      this.$refs.personpersonCustomtable.clearRadioIndex();
      this.$nextTick(() => {
        this.getPersonList();
      });
    },
    // 获得人员列表
    async getPersonList() {
      this.personLoading = true;
      setTimeout(() => {
        this.personLoading = false;
      }, 3000);
      let params = {
        ...this.personModel,
      };
      let res = await authApi(
        "sysPersonService",
        "",
        "queryEntity",
        "",
        params
      );
      if (res.status == 200) {
        this.personTableData = res.attribute;
        this.personLoading = false;
      }
    },
    // 表格多选
    getSelect(selectTable) {
      const mergedData = this.selectTableShow.concat(selectTable);
      const uniqueData = Array.from(
        new Set(
          mergedData.map((item) => {
            return item.id;
          })
        )
      )
        .filter((id) => id !== undefined)
        .map((id) => {
          return mergedData.find((item) => {
            return item.id == id;
          });
        });
      this.selectTableShow = uniqueData;
    },
    getOneSelectChange(list, row, flag) {
      if (!flag) {
        let index = this.selectTableShow.findIndex((item) => {
          if (item.id === row.id) {
            return true;
          }
        });
        this.selectTableShow.splice(index, 1);
      }
    },
    personConfirmClick() {
      if (this.selectTableShow.length == 0) {
        this.$vmNews("请选择数据");
        return;
      }
      this.$emit("personConfirmClick", this.selectTableShow);
      this.handleClose();
    },
    handleClose() {
      this.selectTableShow = [];
      this.personTableData = [];
      this.$refs.personpersonCustomtable.clearRadioIndex();
      this.personDialog = false;
    },
  },
};
</script>

<style scoped>
.organizationBody {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
}
::v-deep .tableHeight {
  background-color: #ffffff;
}

.multipleChoice {
  margin-top: 5px;
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid #eeeeee;

  .title {
    color: #333;
  }

  .checkBoxlist {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;

    .chunkItem {
      padding: 5px 2px;
      margin-right: 10px;
      display: flex !important;
      justify-content: flex-start;
      align-items: center;
      background: #f5f5f5;
      border-radius: 4px;
      margin-bottom: 5px;

      .name {
        margin-left: 10px;
        font-size: 12px;
        white-space: nowrap;
      }

      .btn {
        text-align: center;
        width: 20%;
        cursor: pointer;
        margin-left: 5px;
        padding-right: 10px;
      }
    }
  }
}
</style>
