<template>
  <section class="home">
    <div class="item" v-for="(item, index) in classList" :key="index" @click.stop="toDetail(item.id)">
      <img :src="item.thumbUrl[0].url" alt="" class="banner-img">
      <img src="https://cdn.cunwuyun.cn/dvcp/pay-btn.png" alt="" class="play-img">
      <p>{{ item.title }}</p>
      <div>{{ item.organizationName }} {{ item.createDate }}</div>
    </div>
    <AiEmpty v-if="classList.length == 0"/>
  </section>
</template>
<script>
import {mapState} from "vuex";

export default {
  name: "home",
  appName: "党员学习",
  computed: {
    ...mapState(["user", "token"]),
  },
  data() {
    return {
      current: 1,
      pages: 2,
      classList: []
    };
  },
  onLoad() {
    this.getClassList()
  },
  methods: {
    getClassList() {
      if (this.current > this.pages) return;
      this.$instance.post(`/app/apppartyclassroom/list?size=10&status=1&current=${this.current}`).then((res) => {
        if (res.code == 0) {
          if (res.data && res.data.records) {
            res.data.records.map((item) => {
              item.thumbUrl = JSON.parse(item.thumbUrl)
              item.createDate = item.createDate.substring(0, 10)
            })
            const classList = this.current > 1 ? [...this.classList, ...res.data.records] : res.data.records
            this.pages = Math.ceil(res.data.total / 10)
            this.classList = classList
            this.classList = res.data.records
          }
        }
      });
    },
    toDetail(id) {
      uni.navigateTo({url: `./videoDetail?id=${id}`})
    }
  },
  onReachBottom() {
    this.current = this.current + 1
    this.getClassList()
  },
};
</script>
<style scoped lang="scss">
@import "~dvcp-wui/common";

.home {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #fff;

  .item {
    position: relative;

    video {
      width: 100%;
      height: 416px;
      // background: rgba(0, 0, 0, 0.3);
    }

    .banner-img {
      width: 100%;
      height: 416px;
    }

    .play-img {
      width: 80px;
      height: 80px;
      position: absolute;
      top: 148px;
      left: 334px;
    }

    p {
      padding: 20px 32px;
      width: 686px;
      font-size: 34px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333;
      line-height: 48px;
    }

    div {
      padding: 0 0 34px 32px;
      font-size: 22px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: #999;
      line-height: 22px;
    }
  }
}
</style>
