<template>
  <div class="page">
    <div class="list" v-if="list.length">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="top">
          <div class="flex-left">
            <h3>{{item.examinationName}}</h3>
            <p class="mar-b16">共<span>{{item.allSubjectNumber}}</span>题,预计<span>{{item.allSubjectNumber*2}}</span>分钟</p>
            <p>{{item.passNumber}}人通过/{{item.examinationNumber}}人参与</p>
          </div>
          <div class="flex-right" v-if="item.myRecord.assessmentType != null">
            <img :src="statusImgList[item.myRecord.assessmentType]" alt="" />
            <div :class="`score-type`+item.myRecord.assessmentType">{{ item.myRecord.score }}</div>
          </div>
        </div>
        <div class="bottom" @click="toTestForm(item.id)" v-if="item.status == 1">重新考试</div>
      </div>
    </div>
    <AiEmpty :description="`暂无数据`" class="emptyWrap" v-else/>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  name: "studyList",
  appName: "考试记录",
  data() {
    return {
      current: 1,
      pages: 2,
      list: [],
      statusImgList: ['https://cdn.cunwuyun.cn/qujing/youxiu.png', 'https://cdn.cunwuyun.cn/qujing/lianghao.png',
       'https://cdn.cunwuyun.cn/qujing/jige.png', 'https://cdn.cunwuyun.cn/qujing/bujige.png']
    }
  },
  computed: {
    ...mapState(['user', 'token']),
  },
  onLoad() {
    uni.setNavigationBarTitle({ 
      title: '考试记录'
    })
    uni.setNavigationBarColor({
      frontColor: "#000000",
      backgroundColor: "#F4F6FA",
    })
  },
  onShow() {
    this.getList()
  },
  methods: {
    getList() {
      if(this.current > this.pages) return
      this.$instance.post(`/app/appexaminationinfo/myExamination?size=20&current=${this.current}`).then(res => {
        if (res.code == 0) {
          this.pages = res.data.pages
          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
        }
      })
    },
    toTestForm(id) {
      uni.navigateTo({url: `../AppLegalLearning/testForm?id=${id}`})
    },
    toTestResult(id) {
      uni.navigateTo({url: `../AppLegalLearning/result?id=${id}`})
    },
  },
  onReachBottom() {
    this.current ++
    this.getList()
  }
}
</script>
<style scoped lang="scss">
@import "~dvcp-wui/common";

.page {
  width: 100%;
  background-color: #F4F5FA;
  .list {
    padding: 50px 32px 0;
    .item {
      width: 100%;
      background-color: #fff;
      box-shadow: inset 0 0 0 0 #EEEEEE;
      border-radius: 16px;
      margin-bottom: 24px;
      .top {
        padding: 24px;
        position: relative;
        display: flex;
        .flex-left {
          width: calc(100% - 200px);
          h3 {
            width: 100%;
            line-height: 48px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 34px;
            color: #333;
            margin-bottom: 32px;
          }
          p {
            color: #999;
            font-size: 26px;
            font-family: PingFangSC;
            line-height: 36px;
            span {
              color: #2D7DFF;
            }
          }
          .mar-b16 {
            margin-bottom: 16px;
          }
        }
        .flex-right {
          position: relative;
          img {
            width: 200px;
            height: 200px;
          }
          div {
            width: 100px;
            line-height: 56px;
            text-align: center;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 40px;
            text-align: center;
            position: absolute;
            top: 60px;
            left: 50%;
            margin-left: -50px;
          }
          .score-type0, .score-type1, .score-type2 {
            color: #0FC484;
          }
          .score-type3 {
            color: #E23C3C;
          }
        }
      }
      .bottom {
        line-height: 88px;
        border-top: 1px solid #eee;
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #687DA6;
        text-align: center;
      }
    }
  }
}
</style>
