<template>
  <div class="live" style="padding-top: 44px">
    <div class="live-title">
      <van-nav-bar
        title="直播"
        class="van-nav-bar-my-fixed"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <van-list
      v-if="list && list.length > 0"
      class="videoList"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad(1)"
    >
      <div v-for="item in list" :key="item.id" class="videoItem" @click="goto(item.id)">
        <div class="img">
          <img :src="item.video_img" :border="0" alt="" />
        </div>
        <div class="videoName">{{ item.video_name }}</div>
        <div class="videoDesc">{{ item.video_sn }}</div>
      </div>
    </van-list>
    <van-empty v-else description="暂无视频！" />
  </div>
</template>

<script>
import {
  List,
  cell,
} from "vant";
import asyncRequest from "@/apis/live/index";
import resToken from "@/mixins/resToken";
export default {
  mixins: [resToken],
  components: {
    "van-cell": cell,
    "van-list": List,
  },
  async created() {
    //在组件被创建的时候就加载
    await this.onLoad(1);
  },
  data() {
    return {
      list: [], //用来放接口获得的数据，来渲染页面
      loading: false, //是否在加载
      finished: false, //是否加载完成
      total: 0, //页码数
      parmValue: {
        //使用preview接口的入参
        page: 1, // 页码
        size: 10, // 每页显示条数
      },
    };
  },
  methods: {
    //判断当时传递的页码是不是1，
    async onLoad(e) {
      if (e) {
        this.parmValue.page = 1; //重置页码数
      } else {
        this.parmValue.page++; //如果页码数不是1，页码++
      }
      if (!this.loading) {
        //加载结束
        if (this.parmValue.page === 1) {
          //判断当前页码是不是1
          this.list = []; //当前页码是1且未加载，那么代表初始化数据
        }
      }
      let res = await asyncRequest.list(this.parmValue); //视频预览接口
      // this.loading = false;//加载状态结束
      if (res && res.code == 0 && res.data) {
        //
        let arr = res.data.list; //缓存接口返回是数据
        this.list.push(...arr); //
        this.total = res.data.count;
        if (
          this.list.length > 0 &&
          this.total > 0 &&
          this.total === this.list.length
        ) {
          this.finished = true;
        }
        if (this.total === 0) {
          this.finished = true;
        }
      } else if (res && res.code >= 100 && res.code <= 104) {
        await this.logout();
      } else {
        this.show_title(res.msg);
        if (this.parmValue.page !== 1) {
          this.parmValue.page--;
        }
      }
    },
     goto(id) {
      window.vm.$router.push({
        path: "/liveD",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.live {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 44px 0 0 0;
  box-sizing: border-box;
  overflow-y: scroll;
  background: transparent;
  .live-title {
    position: fixed;
    padding: 0;
    width: 100%;
    margin: 0;
    top: 0;
    left: 0;
    z-index: 3;
    border: 0;
    height: 44px;
  }
  .videoList {
    padding: 0 16px 60px 16px ;
    box-sizing: border-box;
    background: transparent;
    position: relative;
    height: auto;
    width: 100%;
  
  .videoItem {
     position: relative;
    width: 100%;
    font-size: 14px;
    line-height: 30px;
    padding:0 ;
    margin: 0;
    cursor: pointer;
    box-sizing: border-box;
    .img {
      width: 100%;
      display: block;
      height: 180px;
      padding: 0;
      border: 0;
      border-radius: 20px;
      overflow: hidden;
      border: 0;
      img {
        width: 100%;
        display: inline-block;
        height: 100%;
        border: 0;
      }
    }
    .videoName {
      display: block;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: bolder;
      padding:0 5px ;
      margin: 10px 0 5px 0;;;
      width: 100%;
      line-height: 20px;;
      color: #1A1A1A;
    }
    .videoDesc {
      display: block;
      font-size: 12px;
      color: #999;
      box-sizing: border-box;
      margin: 0 0 10px 0;;
      line-height: 25px;
      padding:0 5px ;
    }
  }
  }
  // &:last-child {
  //   margin: 0 0 2px 0;
  // }
}
</style>
