<template>
  <div>
    <div class="search_box">
      <SearchForm
        :search="config.search"
        :page="baseInfo.current_page"
        @getData="onSubmit"
        ref="search"
      />
    </div>
    <el-table
      ref="multipleTable"
      :data="baseInfo.data ? baseInfo.data : []"
      tooltip-effect="dark"
      style="width: 100%"
      @select="handleSelectionChange"
      @select-all="handleAllChange"
    >
      <el-table-column
        v-for="(val, i) in config.columns"
        :key="i"
        :type="val.type"
        :width="val.width"
        :label="val.label"
        :prop="val.prop"
        :formatter="val.formatter"
        :align="val.align ? val.align : 'center'"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="baseInfo.current_page"
      layout="total, prev, pager, next"
      :total="baseInfo.total"
      style="margin-top: 10px;width: 100%;text-align: end;"
    >
    </el-pagination>
  </div>
</template>
<script>
import SearchForm from "@/components/SearchFormDrawer.vue";

export default {
  components: { SearchForm },
  props: ["hallId", "checkId", "editId", "checkPeopleArr", "staffList"],

  methods: {
    handleSelectionChange(selecteds, row) {
      if (!this.checkAllList.includes(row.id)) {
        // 回显数据里没有本条，把这条加进来(选中)
        this.checkAllList.push(row.id);
      } else {
        // 回显数据里有本条，把这条删除(取消选中)
        this.checkAllList.forEach((id, index) => {
          if (id === row.id) {
            this.checkAllList = this.checkAllList.filter((v) => id !== v);
          }
        });
        this.checkPeopleArr.forEach((id) => {
          if (id == row.id) {
            this.checkPeopleArr = this.checkPeopleArr.filter((v) => id !== v);
          }
        });
      }
      let arr = Array.from(new Set(this.checkAllList));
      this.checkAllList = arr;
      console.log(this.checkAllList);
    },
    // 全选、取消全选
    handleAllChange(selecteds) {
      selecteds = selecteds.filter((v) => (v ? v : ""));
      console.log(selecteds);
      if (selecteds.length > 0) {
        selecteds.forEach((item) => {
          if (!this.checkAllList.includes(item.id)) {
            this.checkAllList.push(item.id);
          }
        });
        let arr = Array.from(new Set(this.checkAllList));
        this.checkAllList = arr;
      } else {
        this.baseInfo.data.forEach((item) => {
          this.checkAllList.forEach((id, index) => {
            if (id === item.id) {
              this.checkAllList.splice(index, 1);
            }
          });
        });
        let arr = Array.from(new Set(this.checkAllList));
        this.checkAllList = arr;
        this.baseInfo.data.forEach((item) => {
          this.checkPeopleArr.forEach((id, index) => {
            if (id === item.id) {
              this.checkPeopleArr.splice(index, 1);
            }
          });
        });
      }
    },

    handleCurrentChange(val) {
      this.baseInfo.current_page = val;
      this.$refs.search.onSubmit();
    },
    onSubmit(val) {
      this.baseInfo = val;
      this.checkAllList = [...this.checkAllList, ...this.checkPeopleArr];
      if (this.staffList && this.staffList.length) {
        this.$nextTick(() => {
          this.staffList
            ? this.staffList.forEach((v) => {
                this.checkAllList.forEach((val, i) => {
                  if (v.id == val) {
                    this.checkAllList[i] = v.id;
                  }
                });
              })
            : "";
          this.baseInfo.data
            ? this.checkAllList.forEach((key) => {
                this.$refs.multipleTable.toggleRowSelection(
                  this.baseInfo.data.find((row) => {
                    if (row.id == key) {
                      return row;
                    }
                  }),
                  true
                );
              })
            : "";
        });
      }
    },
  },
  created() {
    this.config.search[0].enumData = this.hallId;
  },
  mounted() {},
  watch: {},
  data() {
    return {
      checkAllList: [],
      checkList: [],
      baseInfo: {},
      total: 0,
      currentPage: 1,
      toggleRowSelection: [],
      config: {
        downloadUrl: "",
        isshowTabPane: false,
        search: [
          {
            name: "salaId",
            type: "selectSalaId",
            label: "大厅",
            fuzzy: false,
          },
          {
            name: "deptId",
            type: "selectDeptId",
            label: "部门",
            fuzzy: false,
          },
          {
            name: "name",
            type: "text",
            label: "工作人员姓名",
            fuzzy: true,
          },
        ],
        columns: [
          { type: "selection", width: 60 },
          {
            label: "序号",
            width: 50,
            formatter: (row, column, cellValue, index) => {
              return index + 1;
            },
          },

          { label: "工作人员姓名", prop: "name" },

          { label: "工号", prop: "workNum" },

          { label: "手机号码", prop: "phoneNumber" },

          { label: "所属大厅", prop: "salaName" },
          { label: "所属部门", prop: "deptName" },
          // {
          //   label: "操作",
          //   width: 100,
          //   formatter: (row) => {
          //     if (row.check) {
          //       return <span style="cursor:pointer;color:#ff0000">已选中</span>;
          //     } else {
          //       return <span style="cursor:pointer;color:#1890ff">选择</span>;
          //     }
          //   },
          // },
        ],
      },
    };
  },
};
</script>
