<template>
  <div>
    <ShortWaterfallFlow
      :videoList="likeList"
      :options="{isLoading:loading,finished:finished}"
      @onload="getList"
      @click="jumpTo"
    >

    </ShortWaterfallFlow>
    <img
      class="default-image"
      src="../../static/imgs/no-like-video.png"
      alt=""
      v-show="isShow"
    >
  </div>
</template>

<script>
import { getMyLikeList } from '../../api/ShortVideo/ShortVideo'
import ShortWaterfallFlow from '../../components/ShortWaterfallFlow'
export default {
  name: "LikeVideo",
  components: {
    ShortWaterfallFlow
  },
  data() {
    return {
      likeList: [],
      params: {
        pageIndex: 1,
        pageSize: 10,
        name: ""
      },
      loading: false,
      finished: false,
      isShow: false
    };
  },
  mounted() {
    this.params.pageIndex = 1;
    this.likeList = [];
    this.getList();
  },
  methods: {
    // 跳转到视频播放页面
    jumpTo(currentVideoIndex, currentVideoList, currentPageIndex){
      console.log(currentVideoIndex, currentVideoList, currentPageIndex);
      this.$router.push({
        name: 'videoPlay',
        query: {currentVideoIndex, currentVideoList, currentPageIndex, source: "likeVideo", videoTotal: this.videoTotal}
      })
    },

    // 获取数据
    getList() {
      this.isRequest();
      this.loading = true;
      getMyLikeList(this.params)
      .then(({data})=>{
        this.$toast.clear();
        this.loading = false;
        console.log("this.pageIndex: ", this.params.pageIndex);
        if (data.IsSuccess) {
          // 返回成功
          if (data.ResultObject.length === 0 && this.params.pageIndex === 1) {
            this.finished = true;
            this.isShow = true;
            return;
          }
          this.videoTotal = data.Pager.TotalItemCount;
          this.params.pageIndex++;
          this.likeList = [...this.likeList, ...data.ResultObject];
          console.log("likeList: ", this.likeList);
          if (this.likeList.length === this.videoTotal) {
            this.finished = true;
          }
        }else {
          // 返回失败
          this.$toast.clear();
        }
      })
      .catch(error=>{
        // 请求失败
        this.$toast.clear();
      })
    },
    jumptovideo(id, index, videoList) {
      this.$router.push({
        name: "videoPlay",
        query: { id,index,videoList, pageIndex: this.params.pageIndex,  videoTotal: this.videoTotal, source: "likeVideo"}
      })
    }
  }
};
</script>

<style lang="less">
.like-wrap {
  display: flex;
  flex-wrap: wrap;

  .like-num {
    display: flex;
    align-items: center;
    font-size: 0.3rem;
    position: absolute;
    left: 10%;
    bottom: 6%;
    color: #000;
    .van-icon {
      margin-right: 0.1rem;
    }
  }

  .item {
    width: 33.33%;
    height: 4rem;
    position: relative;
    border: 1px solid lightgray;
    border-radius: 0.1rem;
    -moz-box-shadow: 0 0.08rem 0.12rem #ebedf0;
    -webkit-box-shadow: 0 0.08rem 0.12rem #ebedf0;
    box-shadow: 0 0.08rem 0.12rem #ebedf0;
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .icon-xin1 {
      position: absolute;
      bottom: 10%;
      left: 10%;
      color: lightcoral;
      // z-index: 99;
    }
  }
}

.default-image {
  width: 50%;
  height: 50%;
  display: block;
  margin: 0 auto;
  padding-top: 4rem;
}
</style>
