<template>
  <div class="order" style="padding-top: 84px">
    <div class="order-title">
      <van-nav-bar
        title="直播"
        class="van-nav-bar-my-fixed"
        left-arrow
        @click-left="onClickLeft"
      />
      <!-- 点击后回退一层页面 -->
      <!-- <van-tabs
        class="vant-tabs-main"
        v-model="parmValue.status"
        swipeable
        color="#FF8327"
        line-height="2px"
        title-active-color="#FF8327"
       @click="onLoad(1)" >
      渲染列表项
        <van-tab
          v-for="item in tabList"
          :key="item.code"
          :title="item.name"
          :name="item.code"
        >
        </van-tab>
      </van-tabs> -->
    </div>
    <van-list
      v-if="list && list.length > 0"
      class="videoList"
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad(1)">
    <!-- <h1 class="live">最近直播</h1> -->
      <van-cell v-for="item in list" :key="item"  class="videoItem">
        <img :src="item.video_img" alt="">
        <span class="videoName">{{item.video_name}}</span>
        <span class="videoDesc">{{item.video_sn}}</span>

      </van-cell>
    </van-list>
    <van-empty v-else description="暂无视频！" />
    <!-- <button @click="onLoad">btn</button>测试接口按钮 -->
  </div>
</template>

<script>
import { 
  // Tab, Tabs,
   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,
    // "van-tab": Tab,
    // "van-tabs": Tabs,
  },
  async created() {//在组件被创建的时候就加载
    await this.onLoad(1);
  },
   data() {
    return {
      list: [],//用来放接口获得的数据，来渲染页面
      loading: false,//是否在加载
      finished: false,//是否加载完成
      total:0,//页码数
      parmValue:{//使用preview接口的入参
        page: 1, // 页码
        size: 10, // 每页显示条数
      },

      videoUrl:[
        {name:"五常大米专属粮仓",desc:"时刻纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043636%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478420&t=e03a65a1166f8a961f87efeebbb4f0e9"},
        {name:"武昌大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043410%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478445&t=d3c4109497df131559434f1d6881d91a"},
        {name:"五昌大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043740%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478462&t=4f13dd0c6f48e0d1557d4826364d18cb"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},
        {name:"武常大米专属粮仓",desc:"食客纯正好鲜米",url:"https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13982043411%2F641&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634478490&t=40b86abdb8efa37012ea930c4a51dba6"},

        
      ],
    };
  },
  methods:{//判断当时传递的页码是不是1，
    async onLoad(e) {
      console.log(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);//视频预览接口
      console.log(res,"视频预览接口");
      // 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--;
          }
        }
    }
  },
  // methods: {
  //   onLoad() {
  //     setTimeout(() => {
  //       for (let i = 0; i < 10; i++) {
  //         console.log(this.list.length + 1);
  //         let item={
  //           img:this.videoUrl[i].url,
  //           name:this.videoUrl[i].name,
  //           desc:this.videoUrl[i].desc,
  //         }
  //         // console.log(item);
  //         this.list.push(item);
  //         console.log(this.list);
  //       }
  //       // 加载状态结束
  //       this.loading = false;
  //       // 数据全部加载完成
  //       if (this.list.length >= 40) {
  //         this.finished = true;
  //       }
  //     }, 1000);
  //   },
  // },
};
</script>

<style lang="scss" scoped>
.videoItem{
  width: 340px;
  height: 100%;
  z-index: -5;
  padding: 10px;
  margin: 20px;
  position: relative;
  background-color: #fff;
  img{
    width: 320px;
    height: 150px;
    z-index: -5;
    border-radius: 30px;
    display: block;
  }
  .videoName{
    width: 100%;
    height: 30px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 600;
    color: #1A1A1A;
    line-height: 30px;
    display: block;
    margin-top: 2px;
  }
  .videoDesc{
    width: 100%;
    height: 20px;
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #999999;
    line-height: 23px;
    display: block;
  }
}
.live{
  width: 142px;
  height: 40px;
  font-size: 25px;
  font-family: Source Han Sans CN;
  font-weight: 800;
  color: #1A1A1A;
  line-height: 40px;
  margin-left: 20px;
}
.order {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 108px;
  box-sizing: border-box;
  overflow-y: scroll;
  background: #fff;
  .order-title {
    position: fixed;
    padding: 0;
    width: 100%;
    margin: 0;
    top: 0;
    left: 0;
    z-index: 3;
    border: 0;
    height: 84px;
    .vant-tabs-main{
      padding: 40px 0 0 0;

    }
    z-index: -5;
    // &::after {
    //   display: block;
    .van-hairline--bottom::after {
      display: none;
    }
    // .van-tabs {
    //   margin-top: -8px;
    // }
    // border-bottom: 1px solid #ebedf0;
    // }
  }
  .list-ul-main {
    // padding: 16px;//外部列表和边框的内间距

    .list-ul {
      width: 100%;//撑满父容器
      background: linear-gradient(28deg, #ff8327, #ffbd73);
      margin: 0 0 12px 0;//项
      box-sizing: border-box;
      border-radius: 10px;
      li {
        width: 100%;
        float: left;
        font-size: 14px;
        line-height: 30px;
        // color: #ffffff;
        box-sizing: border-box;
      }
      &:last-child {
        margin: 0 0 2px 0;
      }
    }
  }
}
</style>
