<template>
  <div>
    <BaseDialog
      width="950px"
      :isShow.sync="isStaffListDialog"
      title="持证人"
      @close="close"
      :isShowFooter="false"
      :appendToBody="true"
    >
      <div class="content">
        <el-form :inline="true" :model="formData" size="small">
          <el-form-item>
            <el-input
              v-model="formData.staffName"
              placeholder="输入持证人/身份证号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="search"
              >查询</el-button
            >
            <el-button size="small" @click="init">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table
          :row-key="(row) => row.staffId"
          ref="myTable"
          :loading="loading"
          :data="tableData"
          style="width: 100%"
          fit
          border
          :header-cell-style="{
            'text-align': 'center',
          }"
          :cell-style="{
            'text-align': 'center',
          }"
          :highlight-selection-row="true"
          @row-click="selectRow"
        >
          <el-table-column
            type="selection"
            width="55"
            fixed="left"
          ></el-table-column>
          <el-table-column
            type="index"
            label="序号"
            width="50 "
          ></el-table-column>
          <el-table-column prop="staffName" label="持证人"></el-table-column>
          <el-table-column prop="idCard" label="身份证号"></el-table-column>
          <el-table-column
            prop="companyName"
            label="所属企业"
          ></el-table-column>
          <el-table-column
            prop="departmentName"
            label="所属部门"
          ></el-table-column>
        </el-table>
        <pagination
          :total="total"
          :pageSize="formData.pageSize"
          :currentPage="formData.pageNum"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </div>
    </BaseDialog>
  </div>  
</template>
  
  <script>
import { staffList } from "@/api/staff";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      isStaffListDialog: false,
      formData: {
        staffName: "",
        idCard: "",
        pageSize: 10,
        pageNum: 1,
      },
      tableData: [], //表单数据
      multipleSelection: [], // 多选选中数据
      total: 0, //一共多少条
      pageSize: 10, //每页多少条数据
      currentPage: 1, //当前页码
      loading: false,
      selectItem: {},
    };
  },

  mounted() {},

  methods: {
    openBoxs(row) {
      this.isStaffListDialog = true;
      this.selectItem = row;
      this.search();
    },
    // 选择行
    selectRow(row) {
      this.$emit("handle-staff", row);
      this.isStaffListDialog = false;
    },
    close() {},
    search(int) {
      this.loading = true;
      if (int === 2) {
        this.formData = {
          pageSize: 10,
          pageNum: 1,
        };
      }
      staffList(this.formData)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.$nextTick(() => {
            this.tableData.forEach((item) => {
              if (this.selectItem.staffId == item.staffId) {
                this.$refs.myTable.toggleRowSelection(item, true);
              }
            });
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    init() {
      this.search(2);
    },
    handleSizeChange(v) {
      console.log(v, '------v---------')
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      console.log(v, '------v---------')
      this.formData.pageNum = v;
      this.search();
    },
  },
};
</script>
  
<style lang="scss" scoped>
.table {
  border: 1px solid #e6ebf5;
  .el-table::before {
    display: none;
  }
}
</style>
  