<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">
            <img class="video-img" :src="item.pictureUrl" alt="">
            <img class="play-icon" src="https://cdn.cunwuyun.cn/dvcp/pay-btn.png" alt="" v-if="item.videoUrl">
            <div class="status" :class="`status`+item.status">{{ $dict.getLabel('qjLearnStatus', item.status) }}</div>
          </div>
          <div class="flex-right">
            <h3>{{item.bizName}}</h3>
            <div class="time">
              <span>{{item.learnerNumber}}人已学习</span>
              <span v-if="item.videoUrl">共{{item.videoDuration || '0秒'}}</span>
            </div>
          </div>
        </div>
        <div class="bottom" v-if="item.courseExamineStatus == 1 && item.status == 0" @click="toClassDetail(item.bizId, item.id)">继续学习</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: [],
    }
  },
  computed: {
    ...mapState(['user', 'token']),
  },
  onLoad() {
    uni.setNavigationBarTitle({ 
      title: '学习记录'
    })
    uni.setNavigationBarColor({
      frontColor: "#000000",
      backgroundColor: "#F4F6FA",
    })
  },
  onShow() {
    this.$dict.load(['qjLearnStatus']).then(() => {
      this.getList()
    })
  },
  methods: {
    getList() {
      if(this.current > this.pages) return
      this.$instance.post(`/app/appwechatuserqujinglearnrecord/listByApplet?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
        }
      })
    },
    toClassDetail(bizId, id) {
      uni.navigateTo({url: `../AppLegalLearning/classDetail?id=${bizId}&recordId&${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;
        display: flex;
        .video-img {
          width: 160px;
          height: 160px;
          margin-right: 24px;
        }
        .flex-left {
          position: relative;
        }
        .play-icon {
          width: 48px;
          height: 48px;
          position: absolute;
          top: 56px;
          left: 56px;
        }
        .status {
          position: absolute;
          top: 0;
          left: 0;
          width: 110px;
          height: 48px;
          line-height: 48px;
          text-align: center;
          border-radius: 8px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          font-size: 26px;
          color: #FFF;
        }
        .status0 {
          background-color: #FF883C;
        }
        .status1 {
          background-color: #3BBC37;
        }
        .flex-right {
          width: calc(100% - 184px);
          h3 {
            width: 100%;
            line-height: 48px;
            height: 96px;
            font-family: PingFangSC-Medium;
            font-weight: 500;
            font-size: 34px;
            color: #333;
            overflow:hidden; 
            text-overflow:ellipsis;
            display:-webkit-box; 
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2; 
            margin-bottom: 24px;
          }
          .time {
            line-height: 36px;
            font-family: PingFangSC-Regular;
            font-size: 26px;
            color: #999;
            letter-spacing: 0;
            display: flex;
            justify-content: space-between;
          }
        }
      }
      .bottom {
        line-height: 88px;
        border-top: 1px solid #eee;
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #2D7DFF;
        text-align: center;
      }
    }
  }
}
</style>
