<template>
  <div class="container">
    <!-- <Header title="培训列表" /> -->
    <div class="headerTitle">
      <van-icon name="arrow-left" class="vanIcon" @click="backtrack" />
      培训
      <van-icon
        name="wap-home-o"
        class="rightIcon"
        @click="$router.push(`/home`)"
      />
    </div>

      <van-tabs
        v-model="activeName"
        color="white"
        background="#1c4990"
        title-active-color="white"
        title-inactive-color="#ccc"
        swipeable
        animated
      >
        <van-tab title="培训列表" name="1">

            <div class="tabContent" >
              <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
    >
              <ul>
                <van-swipe-cell v-for="(item, index) in list" :key="index">
                  <li
                    @click="seeItem(item.id,item.planType)"
                    :class="[item.dangerStatus === 10 ? 'itemLi' : 'itemLi1']"
                  >
                    <div class="cont">
                      <img
                        class="img"
                        v-if="item.coverPhoto"
                        :src="baseUrl + item.coverPhoto"
                        alt=""
                      />
                      <div class="none_box img" v-else>暂无封面</div>
                      <div class="text">
                        <p>
                          名称：<span>{{ item.trainingPlanName }}</span>
                        </p>
                        <p>
                          学习开始时间：<span>{{
                            item.learningStartTime
                          }}</span>
                        </p>
                        <p>
                          学习结束时间：<span>{{ item.learningEndTime }}</span>
                        </p>
                      </div>
                    </div>
                    <div class="cont" style="justify-content: flex-end">
                      <van-button
                        @click.stop="goExamination(item.id)"
                        type="primary"
                        style="width: 1rem"
                        size="mini"
                        >去考试</van-button
                      >
                    </div>
                  </li>
                </van-swipe-cell>
                <p
                  style="text-align: center"
                  @click="setList"
                  v-if="!typeBtn && list.length"
                >
                  点击加载更多
                </p>
                <p v-else style="text-align: center;color: rgb(152 147 147);;">没有更多了</p>
              </ul>
              </van-pull-refresh>
            </div>

        </van-tab>
        <van-tab title="考试记录" name="2">

            <div class="tabContent">
              <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh1"
    >
              <ul>
                <span style="color: #fc9a03"> 只保留考试最新一条记录 </span>
                <van-swipe-cell
                  v-for="(item, index) in recordList"
                  :key="index"
                >
                  <li
                    @click="seeItemRecord(item.id)"
                    :class="[item.dangerStatus === 10 ? 'itemLi' : 'itemLi1']"
                  >
                    <div class="cont1">
                      <img
                        class="img"
                        v-if="item.trainingPlanPhoto"
                        :src="baseUrl + item.trainingPlanPhoto"
                        alt=""
                      />
                      <div class="none_box img" v-else>暂无封面</div>
                      <div class="text">
                        <p>
                          培训名称：<span>{{ item.trainingPlanName }}</span>
                        </p>
                        <p>
                          证书名称：<span>{{
                            item.certificateName || '-'
                          }}</span>
                        </p>
                        <p>
                          考试分数：<span>{{ item.examScore }} 分
                            <span style="color: #07c160;" v-if="item.pass===2 ">(通过)</span>
                            <span style="color: red" v-else>(不通过)</span>
                          </span>
                        </p>
                        <p>
                          考试时间：<span>{{ item.createDate }} </span>
                        </p>
                      </div>
                    </div>
                  </li>
                </van-swipe-cell>
                <p
                  style="text-align: center"
                  @click="setList1"
                  v-if="!typeBtn1 && recordList.length"
                >
                  点击加载更多
                </p>
                <p v-else style="text-align: center;color: rgb(152 147 147);;">没有更多了</p>
              </ul>
              </van-pull-refresh>
            </div>

        </van-tab>
      </van-tabs>
  </div>
</template>

<script>
import { Notify } from 'vant'

import { mapState } from 'vuex'
import {
  queryTrainPlanPage,
  queryQuestionBankList,
  queryQuestionBankByTrainingPlanIdValidate
} from '@/api/trainList/index.js'
export default {
  name: 'TrainList',

  data () {
    return {
      isLoading: false,
      activeName: '1',
      queryParams: {
        pageNo: 1,
        pageSize: 5
      },
      queryParam: {
        pageNo: 1,
        pageSize: 5
      },
      list: [],
      recordList: [],
      typeBtn: false,
      typeBtn1: false
    }
  },
  computed: {
    ...mapState('baseUrl', ['baseUrl'])
  },
  mounted () {
    this.initList()
    this.initList1()
  },

  methods: {
    backtrack () {
      this.$router.push('/home')
    },
    async setList () {
      this.queryParams.pageNo++
      const { data: res } = await queryTrainPlanPage(this.queryParams)
      if (res.code !== 200) return Notify({ type: 'danger', message: res.msg })
      this.list.push(...res.data.list)
      if (this.list.length >= res.data.total) {
        this.typeBtn = true
      }
    },
    async setList1 () {
      this.queryParam.pageNo++
      const { data: res } = await queryQuestionBankList(this.queryParam)
      if (res.code !== 200) return Notify({ type: 'danger', message: res.msg })
      this.recordList.push(...res.data.list)
      if (this.recordList.length >= res.data.total) {
        this.typeBtn1 = true
      }
    },
    async initList () {
      this.queryParams.pageNo = 1
      this.typeBtn = false
      const { data: res } = await queryTrainPlanPage(this.queryParams)
      if (res.code !== 200) return Notify({ type: 'danger', message: res.msg })
      this.list = res.data.list
      if (this.list.length >= res.data.total) {
        this.typeBtn = true
      }
    },
    async initList1 () {
      this.queryParam.pageNo = 1
      this.typeBtn1 = false
      const { data: res } = await queryQuestionBankList(this.queryParam)
      if (res.code !== 200) return Notify({ type: 'danger', message: res.msg })
      this.recordList = res.data.list
      if (this.recordList.length >= res.data.total) {
        this.typeBtn1 = true
      }
    },
    onRefresh () {
      this.initList()
      this.isLoading = false
    },
    onRefresh1 () {
      this.initList1()
      this.isLoading = false
    },
    seeItem (id, planType) {
      this.$router.push({ path: '/course', query: { id, planType } })
    },
    // 去考试
    async goExamination (id) {
      const { data: res } = await queryQuestionBankByTrainingPlanIdValidate({
        trainingPlanId: id
      })
      if (res.code === 200) {
        this.$router.push({ path: '/examination', query: { id } })
      }
    //    else {
    //     this.initList()
    //   }
    },
    // 查看考试记录
    seeItemRecord (id) {
      this.$router.push({ path: '/examinationDetail', query: { id } })
    }
  }
}
</script>

<style lang="less" scoped>
.headerTitle {
  position: relative;
  width: 100vw;
  height: 1.33333rem;
  line-height: 1.33333rem;
  font-size: 0.53333rem;
  background: #1c4990;
  color: #fff;
  padding: 0 0.53333rem;
}

ul {
  width: 100%;
  height: auto;
  .itemLi1 {
    width: 100%;
    min-height: 130px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px 1px #ccc;
    border-radius: 5px;
    margin-bottom: 15px;
    padding: 8px;
    .itemTop {
      display: flex;
      justify-content: space-between;
      span {
        font-size: 14px;
        padding: 3px 5px;
        border-radius: 2px;
        color: #fff;
      }
    }
    .cont {
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: flex-start;
      .img {
        width: 80px;
        height: 80px;
        border-radius: 3px;
      }
      .none_box {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #d0d0d0;
        color: gray;
      }
      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        font-size: 14px;
        color: #969799;
        text-align: left;
        span {
          color: #000;
        }
      }
    }
    .cont1 {
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: flex-start;
      .img {
        width: 80px;
        height: 90px;
        border-radius: 3px;
      }
      .none_box {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #d0d0d0;
        color: gray;
      }
      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        font-size: 14px;
        color: #969799;
        text-align: left;
        line-height: 25px;
        span {
          color: #000;
        }
      }
    }
  }
  .itemLi {
    width: 100%;
    min-height: 130px;
    border: 1px solid #ccc;
    box-shadow: 0 1px 2px 1px #ccc;
    border-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-bottom: 15px;
    padding: 8px;
    .itemTop {
      display: flex;
      justify-content: space-between;
      span {
        font-size: 14px;
        padding: 3px 5px;
        border-radius: 2px;
        color: #fff;
      }
    }
    .cont {
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: flex-start;
      .img {
        width: 80px;
        height: 80px;
        border-radius: 3px;
      }
      .none_box {
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid #d0d0d0;
        color: gray;
      }
      .text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10px;
        font-size: 14px;
        color: #969799;
        text-align: left;
        span {
          color: #000;
        }
      }
    }
  }
}
.tabContent{
  height: calc(100vh - 100px); overflow: auto;
  padding: 10px;
}
</style>
