<template>
    <div>
      <el-table
        v-loading="loading"
        border
        ref="multipleTable"
        :height="tableHeight"
        :data="jichuData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column align="center" type="index" label="序号" min-width="25">
          <template #default="scope">{{ (pageNum - 1) * pageSize + (scope.$index + 1) }}</template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="roleType"
          label="角色"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{roleType(scope.row.roleType)}}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="name"
          label="姓名"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="120"
          prop="sex"
          label="性别"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="80"
          show-overflow-tooltip
          prop="age"
          label="年龄"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="200"
          label="工作单位"
          show-overflow-tooltip
          prop="workDpNm"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          label="职务"
          show-overflow-tooltip
          prop="duty"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="titles"
          label="职称"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span v-if="scope.row.titles == '1'">正高</span>
            <span v-if="scope.row.titles == '2'">副高</span>
            <span v-if="scope.row.titles == '3'">中级</span>
            <span v-if="scope.row.titles == '4'">初级</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="150"
          prop="telnumb"
          label="电话"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="100"
          prop="isOffice"
          label="在职情况"
        >
          <template #default="scope">
            <span v-if="scope.row.isOffice == '1'">是</span>
            <span v-if="scope.row.isOffice == '2'">否</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="120"
          prop="education"
          label="学历"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span v-if="scope.row.education == '1'">专科及以下</span>
            <span v-if="scope.row.education == '2'">本科</span>
            <span v-if="scope.row.education == '3'">研究生</span>
            <span v-if="scope.row.education == '4'">博士</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="80"
          prop="workAdNm"
          label="原工作地"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="80"
          prop="professional"
          label="从事专业"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="80"
          prop="recommendedUnits"
          label="推荐单位"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="80"
          prop="unitRanks"
          label="单位职级"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span v-if="scope.row.unitRanks == '1'">省部级</span>
            <span v-if="scope.row.unitRanks == '2'">地市级</span>
            <span v-if="scope.row.unitRanks == '3'">县市级</span>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="80"
          label="库别"
          show-overflow-tooltip
        >
          <template #default="scope">
            {{groupType(scope.row.groupType)}}
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="120"
          prop="inTm"
          label="入库时间"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="80"
          prop="orgNm"
          label="流域机构"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="80"
          prop="oe"
          label="体检结果"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          min-width="80"
          prop="isTraining"
          label="培训情况"
          show-overflow-tooltip
        >
          <template #default="scope">
            <span v-if="scope.row.isTraining == '1'">是</span>
            <span v-if="scope.row.isTraining == '2'">否</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 10px auto"
        background
        :pager-count="5"
        :current-page="pageNum"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        layout="sizes, total, prev, pager, next"
        :total="total"
        @current-change="pageIndexChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
</template>

<script>
import request from '@/utils/gw_ajax_request';
import { jcState } from './jcStore';
export default {
  name: 'NewPersInfo',
  props: ['newSize'],
  data() {
    return {
      loading: false,
      jichuData: [],
      tableHeight: window.innerHeight * 0.4,
      pageNum: 1,
      pageSize: 20,
      total: 0,
    };
  },
  computed: {
    groupTypeData() {
      return jcState.groupTypeData;
    },
    roleTypeData() {
      return jcState.roleTypeData;
    },
  },
  mounted() {
    this.getRyXxData();
  },
  methods: {
    getRyXxData() {
      this.loading = true;
      request
        .post(`/tac/worker/b/getWorkerPage`, {
          newSize: this.newSize,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
        .then((res) => {
          if (res.success) {
            this.loading = false;
            this.jichuData = res.data.list;
            this.total = res.data.total;
          } else {
            this.$message.warning(res.message);
          }
        });
    },
    roleType(row) {
      if (row) {
        jcState.roleTypeData.forEach((ele) => {
          if (ele.value == row) {
            row = ele.label;
          }
        });
        return row;
      } else {
        return '';
      }
    },
    groupType(row) {
      if (row) {
        jcState.groupTypeData.forEach((ele) => {
          if (ele.value == row) {
            row = ele.label;
          }
        });
        return row;
      } else {
        return '';
      }
    },
    pageIndexChange(val) {
      this.pageNum = val;
      this.getRyXxData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRyXxData();
    },
  },
  watch: {
    newSize(n, o) {
      if (n != null || n != '') {
        this.getRyXxData();
      }
    },
  },
};
</script>

<style scoped>

</style>
