<!--
 * @Author: wrh
 * @Date: 2024-03-25 17:38:39
 * @LastEditors: wrh
 * @LastEditTime: 2026-02-27 11:09:08
-->
<template>
  <div>
    <el-table v-loading="loading" :data="displayData">
      <el-table-column label="序号" align="center" prop="id" />
      <el-table-column label="类型" align="center" prop="field" />
      <el-table-column label="变更前" align="center" prop="before">
        <template slot-scope="scope">
          {{ formatRow(scope.row, 'before') }}
        </template>
      </el-table-column>
      <el-table-column label="变更后" align="center" prop="after">
        <template slot-scope="scope">
          {{ formatRow(scope.row, 'after') }}
        </template>
      </el-table-column>
      <el-table-column label="变更日期" align="center" prop="date" />
    </el-table>
    <!-- <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getChangeRecordList" /> -->
    <div class="mt20" style="text-align:right">
      <el-pagination @current-change="handleCurrentChange" @size-change="handleSizeChange" background
        :current-page.sync="queryParams.pageNum" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>


  </div>
</template>

<script>
import { parseTime } from "@/utils/ruoyi";
import { getUserChangeInfo } from "@/api/system/user";
export default {
  props: {
    userId: {
      type: Number
    }
  },
  dicts: ['sys_user_titles', 'sys_post_status', 'sys_user_certificates', 'sys_user_pmlevel', 'sys_user_engineerlevel', 'sys_user_operatorlevel', 'sys_user_postlevel', 'sys_user_salarylevel', 'sys_user_political', 'sys_user_degree'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      // 变更记录表格数据
      changeRecordList: [],
      filteredData: [], // 搜索后的数据
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: undefined
      },
      currentPage: 1,
      pageSize: 20,
      searchText: ''
    };
  },
  computed: {
    displayData() {
      // 根据当前页码和每页数量计算显示的数据
      const startIndex = (this.currentPage - 1) * this.pageSize;
      const endIndex = startIndex + this.pageSize;
      return this.filteredData.slice(startIndex, endIndex);
    },
  },
  created() {
    this.getChangeRecordList();
  },
  mounted() {
    this.searchTextFun();
  },
  methods: {
    /** 查询变更记录列表 */
    getChangeRecordList() {
      this.loading = true;
      if (this.$route.query.userId)
        this.queryParams.userId = this.$route.query.userId;
      else
        this.queryParams.userId = this.userId;
      getUserChangeInfo(this.queryParams).then(response => {
        this.changeRecordList = response.rows;
        this.filteredData = this.changeRecordList;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 改变每页显示的数量时触发
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.currentPage = 1; // 重置当前页码为第一页
    },
    // 改变当前页码时触发
    handleCurrentChange(newPage) {
      this.currentPage = newPage;
    },
    // 根据搜索文本过滤数据
    searchTextFun() {
      this.filteredData = this.changeRecordList.filter(item =>
        item.field.includes(this.searchText)
      );
      this.currentPage = 1; // 重置当前页码为第一页
    },
    formatRow(row, key) {
      if (row.field == '状态') {
        row.before = row.before == null ? '' : this.selectDictLabels(this.dict.type.sys_post_status, row.before, ',');
        row.after = row.after == null ? '' : this.selectDictLabels(this.dict.type.sys_post_status, row.after, ',');
      }
      if (row.field == '执业证书') {
        row.before = row.before == null ? '' : this.selectDictLabels(this.dict.type.sys_user_certificates, row.before, ',');
        row.after = row.after == null ? '' : this.selectDictLabels(this.dict.type.sys_user_certificates, row.after, ',');
      }
      else if (row.field == '项目经理级别') {
        row.before = row.before == null ? '' : this.selectDictLabel(this.dict.type.sys_user_pmlevel, row.before);
        row.after = row.after == null ? '' : this.selectDictLabel(this.dict.type.sys_user_pmlevel, row.after);
      }
      else if (row.field == '技术职称') {
        row.before = row.before == null ? '' : this.selectDictLabel(this.dict.type.sys_user_titles, row.before);
        row.after = row.after == null ? '' : this.selectDictLabel(this.dict.type.sys_user_titles, row.after);
      }
      else if (row.field == '工程师岗级') {
        row.before = row.before == null ? '' : this.selectDictLabel(this.dict.type.sys_user_engineerlevel, row.before);
        row.after = row.after == null ? '' : this.selectDictLabel(this.dict.type.sys_user_engineerlevel, row.after);
      }
      else if (row.field == '岗级') {
        row.before = row.before == null ? '' : this.selectDictLabel(this.dict.type.sys_user_postlevel, row.before);
        row.after = row.after == null ? '' : this.selectDictLabel(this.dict.type.sys_user_postlevel, row.after);
      }
      else if (row.field == '薪档') {
        row.before = row.before == null ? '' : this.selectDictLabel(this.dict.type.sys_user_salarylevel, row.before);
        row.after = row.after == null ? '' : this.selectDictLabel(this.dict.type.sys_user_salarylevel, row.after);
      }
      else if (row.field == '技工等级') {
        row.before = row.before == null ? '' : this.selectDictLabel(this.dict.type.sys_user_operatorlevel, row.before);
        row.after = row.after == null ? '' : this.selectDictLabel(this.dict.type.sys_user_operatorlevel, row.after);
      }
      else if (row.field == '政治面貌') {
        row.before = row.before == null ? '' : this.selectDictLabels(this.dict.type.sys_user_political, row.before, ',');
        row.after = row.after == null ? '' : this.selectDictLabels(this.dict.type.sys_user_political, row.after, ',');
      }
      else if (row.field == '学历') {
        row.before = row.before == null ? '' : this.selectDictLabel(this.dict.type.sys_user_degree, row.before);
        row.after = row.after == null ? '' : this.selectDictLabel(this.dict.type.sys_user_degree, row.after);
      }
      else if (row.field == '合同期满' || row.field == '合同签订') {
        row.before = parseTime(row.before, '{y}-{m}-{d}');
        row.after = parseTime(row.after, '{y}-{m}-{d}');
      }
      return row[key]
    },
    formatDict(arr, val) {
      if (val != null && val != undefined && val != "") {
        let valArr = val.split(',');
        let result = []
        for (let i of valArr) {
          result.push(arr[i].label)
        }
        return result.join(' / ')
      }
      else
        return "无";
    },
  }
}
</script>

<style lang="scss" scoped></style>