// 积分排行榜
<template>
  <el-card :header="titleEnum[type]" class="h-full" style="position: relative">
    <div slot="header" class="clearfix">
      <span>{{ titleEnum[type] }}</span>
      <el-select
        style="width: 90px; position: absolute; right: 108px; top: 8px"
        v-model="queryParams.teamType"
        size="mini"
        @change="getList"
      >
        <el-option label="内部" value="1"></el-option>
        <el-option label="外部" value="2"></el-option>
      </el-select>
      <el-select
        size="mini"
        style="width: 90px; position: absolute; right: 8px; top: 8px"
        v-model="queryParams.isBlack"
        @change="getList"
      >
        <el-option label="红榜" value=""></el-option>
        <el-option label="黑榜" value="1"></el-option>
      </el-select>
    </div>
    <el-form ref="queryForm" size="small" :inline="true">
      <el-form-item label="时间维度" prop="type">
        <el-select
          style="width: 80px"
          v-model="queryParams.type"
          @change="dateTypeChange"
          placeholder="请选择时间纬度"
        >
          <el-option label="年" value="reportYear"></el-option>
          <el-option label="月" value="reportDate"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="reportYear" v-if="queryParams.type === 'reportYear'">
        <el-date-picker
          v-model="queryParams.reportYear"
          type="year"
          format="yyyy"
          value-format="yyyy"
          placeholder="选择年"
          :clearable="false"
          @change="getList"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="reportDate" v-if="queryParams.type === 'reportDate'">
        <el-date-picker
          v-model="queryParams.reportDate"
          type="month"
          format="yyyy-MM"
          value-format="yyyyMM"
          placeholder="选择月"
          :clearable="false"
          @change="getList"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <div class="table">
      <el-table v-loading="loading" :data="dataList">
        <el-table-column prop="rankNum" label="排名" width="80" align="center">
          <template slot-scope="scope">
            <img
              class="icon-box"
              v-if="scope.row['rankNum'] < 4"
              :src="iconMap[`no${scope.row['rankNum']}`]"
            />
            <span v-else> {{ scope.row["rankNum"] }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="companyName"
          label="单位"
          align="center"
          v-if="queryParams.teamType == 1"
        >
        </el-table-column>
        <el-table-column
          :prop="queryParams.teamType == 1 ? 'teamName' : 'companyName'"
          :label="queryParams.teamType == 1 ? '队伍名称' : '单位'"
          align="center"
        >
        </el-table-column>
        <el-table-column
          v-if="type == 2"
          prop="managerName"
          label="负责人名称"
          align="center"
        >
        </el-table-column>
        <el-table-column
          v-if="type == 3"
          prop="workUserName"
          label="作业人员"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="score" label="得分" align="center">
        </el-table-column>
      </el-table>
      <pagination
        class="page-box"
        v-show="total > 0"
        :total="total"
        layout="prev, pager, next"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
  </el-card>
</template>

<script>
import no1 from "@/assets/images/名次-第1名.png";
import no2 from "@/assets/images/名次-第2名.png";
import no3 from "@/assets/images/名次-第3名.png";
import moment from "moment/moment";
import {
  managerRankList,
  teamRankList,
  workerRankList,
} from "@/api/secure/pdm-score-rank";
export default {
  props: {
    type: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      titleEnum: {
        1: "队伍积分排行",
        2: "工作负责人积分排行",
        3: "作业人员积分排行",
      },
      iconMap: {
        no1,
        no2,
        no3,
      },
      // 遮罩层
      loading: true,
      total: 0,
      // 查询参数
      queryParams: {
        type: "reportDate",
        pageNum: 1,
        pageSize: 10,
        reportDate: moment(new Date()).format("yyyyMM"),
        reportYear: null,
        teamType: "1",
        isBlack: "",
      },
      dataList: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    dateTypeChange(e) {
      if (e == "reportYear") {
        this.queryParams.reportDate = undefined;
        this.queryParams.reportYear = moment(new Date()).format("yyyy");
      }
      if (e == "reportDate") {
        this.queryParams.reportDate = moment(new Date()).format("yyyyMM");
        this.queryParams.reportYear = undefined;
      }
      this.getList();
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      const funMap = {
        1: teamRankList,
        2: managerRankList,
        3: workerRankList,
      };
      funMap[this.type](this.queryParams).then((response) => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.pageSize = 10;
      this.queryParams.type = "reportDate";
      this.queryParams.reportYear = null;
      this.queryParams.reportDate = moment(new Date()).format("yyyyMM");
      this.resetForm("queryForm");
      this.handleQuery();
    },
  },
};
</script>
<style lang="scss" scoped>
.table {
  height: calc(100vh - 420px);
  // height: calc(100% - 150px);
}
.icon-box {
  width: 23px;
  height: 23px;
}
::v-deep {
  .el-table {
    height: 100%;
    width: 100%;
    .el-table__body-wrapper {
      width: 100% !important;
      height: calc(100% - 50px) !important; // 表格高度减去表头的高度
      overflow-y: scroll;
    }
  }
}
.page-box {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
</style>
