<template>
  <div>
    <div class="top-search flex">
      <el-select
        v-model="enterpriseId"
        filterable
        placeholder="请选择"
        size="mini"
        style="width: 40%"
        clearable
      >
        <el-option
          v-for="item in searchList"
          :key="item.enterpriseId"
          :label="item.enterpriseName"
          :value="item.enterpriseId"
        >
        </el-option>
      </el-select>
      <el-input
        v-model="nickName"
        size="mini"
        placeholder="请输入姓名"
        suffix-icon="el-icon-date"
        style="width: 48%"
      >
      </el-input>
      <div>
        <el-button  @click="searchTable" size="mini">搜索</el-button>
      </div>
    </div>
    <div class="left-middle-table">
      <el-table
        v-loading="loading"
        :data="nameList"
        height="305"
        @select="select"
        @select-all="all"
        ref="multipleTable"
      >
        <el-table-column
          v-if='!disabled'
          type="selection"
        ></el-table-column>

        <el-table-column label="姓名" align="center" prop="nickName">
        </el-table-column>

        <el-table-column
          label="所属企业"
          align="center"
          prop="enterpriseName"
        >
        </el-table-column>

      </el-table>
      <!-- 分页 -->
      <el-pagination
        :layout="'prev, pager, next'"
        v-show="total > 0"
        :total="total"
        :current-page="queryParams.pageNum"
        :page-sizes="[queryParams.pageSize]"
        @current-change="currentChangeClick"
      />
    </div>
  </div>

</template>

<script>
  import { employedPeoplesList } from "@/api/regulation/supervise";
  import { listUser } from "@/api/system/user"
  import { enterpriseLists } from "@/api/regulation/info";
  export default {
    name: "people-table",
    props: {
      selectNameList: {
        type: Array,
      },
      disabled: {
        type: Boolean,
      },
    },
    created(){
      //企业信息查询
      enterpriseLists().then(res =>{
        console.log("企业员工信息：",res);
        this.searchList = res.rows;
      });
      //人员信息
      this.listStaff();
    },
    data(){
        return{
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            enterpriseId: null,
            nickName: null,
          },
          total: 0,
          nameList: [],
          loading: false,
          enterpriseId:"",
          nickName:"",
          searchList: [],
        }
    },
    methods:{
      listStaff(){
        this.loading = true;
        listUser(this.queryParams).then(res =>{
          this.total = res.total;
          this.nameList = res.rows.filter(item => item.deptId != -2 && item.enterpriseName != '' && item.enterpriseName != null);
          this.$nextTick((item) => {
              this.selectNameList.forEach((item) => {
                  this.toggleSelection(item.userId, true);
              });
              this.loading = false;
          });
        })
      },
      select(all, row) {
        this.$emit("selectOne", all, row);
      },
      all(all) {
        console.log(all);
        // true是全选，false是全清
        let allSelect = false;
        if (all.length == 0 || (all.length == 1 && [0] == undefined)) {
          allSelect = false;
        } else if (all.length > 1) {
          allSelect = true;
        }
        this.$emit("selectAll", this.nameList, allSelect);
      },
      // 切换选项
      toggleSelection(userId, SeclctFlag = false) {
        const item = this.nameList.find((item) => {
            return item.userId == userId;
        });
        this.$refs.multipleTable.toggleRowSelection(item, SeclctFlag);
      },
      currentChangeClick(val) {
        this.queryParams.pageNum = val;
        this.listStaff();
      },
      formatter(row) {
        let staffInfo = this.searchList.find(item => item.enterpriseId == row.enterpriseId);
        if(staffInfo){
          return staffInfo.enterpriseName;
        }
        return "-";
      },
      searchTable(){
        this.queryParams = {
            pageNum: 1,
            pageSize: 10,
            enterpriseId: this.enterpriseId,
            nickName: this.nickName,
        };
        this.listStaff();
      },
    }
  }
</script>

<style scoped lang="scss">
  .top-search {
    margin-bottom: 12px;
    justify-content: space-between;
  }
  .left-middle-table {
    flex: 1;
    // background: red;
  }
</style>
