<template>
  <div>
    <!-- banner -->
    <div class="banner">
      <img style="width: 100%" src="@/assets/images/career/banner.png" alt="" />
      <p>生涯测评报告</p>
    </div>

    <el-card>
      <!-- 专业兴趣测评（HOLLAND） -->
      <div>
        <div style="padding: 24px 0; color: #ffa400">
          专业兴趣测评（HOLLAND）
        </div>
        <mx-table :rows="hollData" :propDefines="propDefines">
          <template #time="{ value }">
            {{ value.split(" ")[0] }}
          </template>
          <template #nav="{ value }">
            <a href="#" style="color: #47c6a2">{{ value }}</a>
          </template>
        </mx-table>
        <!-- 分页 -->
        <div>
          <pagination :total="hollTotal" :autoScroll="false" @pagination="onHollChangePage" :page.sync="hollPageForm.pageNum"
                      :limit.sync="hollPageForm.pageSize"></pagination>
        </div>
      </div>
      <!-- 职业性格测评（MBTI） -->
      <div>
        <div style="padding: 24px 0; color: #1a74d3">职业性格测评（MBTI）</div>
        <mx-table :rows="mbtiData" :propDefines="mbtiPropDefines">
          <template #time="{ value }">
            {{ value.split(" ")[0] }}
          </template>
          <template #nav="{ value }">
            <a href="#" style="color: #47c6a2">{{ value }}</a>
          </template>
        </mx-table>
      </div>
         <!-- 分页 -->
        <div>
          <pagination :total="mbtiTotal" :autoScroll="false" @pagination="onMbtiChangePage" :page.sync="mbtiPageForm.pageNum"
                      :limit.sync="mbtiPageForm.pageSize"></pagination>
        </div>
    </el-card>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination/index'
import { hollandRecord, mbtiRecord } from "@/api/webApi/career-other";
export default {
  components: {
    Pagination
  },
  data() {
    return {
      hollData: [],
      hollTotal: 0,
      hollPageForm: {
        pageNum: 1,
        pageSize: 10,
      },
      mbtiData: [],
      mbtiTotal: 0,
      mbtiPageForm: {
        pageNum: 1,
        pageSize: 10,
      },
      propDefines: {
        id: {
          label: "ID",
        },
        createTime: {
          label: "测评时间",
          slot: "time",
        },
        scorer: {
          label: "现实型",
        },
        scorea: {
          label: "艺术型",
        },
        scorei: {
          label: "研究型",
        },
        scores: {
          label: "社会型",
        },
        scoree: {
          label: "企业型",
        },
        scorec: {
          label: "传统型",
        },
        ruleCode: {
          label: "测评结果",
          slot: "nav",
        },
      },
      mbtiPropDefines: {
        id: {
          label: "ID",
        },
        createTime: {
          label: "测评时间",
          slot: "time",
        },
        scoreE: {
          label: "外向",
        },
        scoreI: {
          label: "内向",
        },
        scoreS: {
          label: "实感",
        },
        scoreN: {
          label: "直觉",
        },
        scoreT: {
          label: "思考",
        },
        scoreF: {
          label: "情感",
        },
        scoreJ: {
          label: "判断",
        },
        scoreP: {
          label: "认知",
        },
        ruleCode: {
          label: "测评结果",
          slot: "nav",
        },
      },
    };
  },
  created() {
    this.getHollandRecord();
    this.getMbtiRecord()
  },
  methods: {
    getHollandRecord() {
      hollandRecord(this.hollPageForm).then((res) => {
        this.hollData = res.rows;
        this.hollTotal = res.total;
        console.log(res);
      });
    },
    onHollChangePage(page){
      this.hollPageForm.pageSize = page.limit;
      this.hollPageForm.pageNum = page.page;
      this.getHollandRecord();
    },
    onMbtiChangePage(page){
      this.mbtiPageForm.pageSize = page.limit;
      this.mbtiPageForm.pageNum = page.page;
      this.getMbtiRecord();
    },
    getMbtiRecord() {
      mbtiRecord(this.mbtiPageForm).then((res) => {
        this.mbtiData = res.rows;
        this.mbtiTotal = res.total;
        console.log(res);
      });
    }
  },
};
</script>
<style lang="scss" scoped>
.banner {
  position: relative;
}
.banner p {
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #525252;
  line-height: 33px;
  position: absolute;
}
</style>
