<template>
  <div class="my-videos">
    <van-tabs
      v-model="active"
      @change="handleTabChange"
    >
      <van-tab :title="`已发布（${videoListTotal}）`">
        <ShortWaterfallFlow
          :videoList="videoList"
          :options="{isLoading:loading,finished:finished}"
          @onload="getMyVideoList"
          @click="jumpTo"
        ></ShortWaterfallFlow>

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

        <van-button
          type="info"
          class="uploadBtn"
          @click="jumpToUpload()"
        >上传视频
        </van-button>
      </van-tab>
      <van-tab :title="`处理中（${processingListTotal}）`">
        <div class="prompt-wrap">
          <p class="prompt">
            (*-*)视频上传后, 平台需要对视频进行转码及审核。
          </p>

          <p class="prompt">
            通过后, 即可自动发布, 请耐心等待!
          </p>
        </div>

        <ShortWaterfallFlow
          :videoList="processingList"
          :options="{
          isLoading:false,
          finished:false
        }"
        ></ShortWaterfallFlow>
      </van-tab>
    </van-tabs>

  </div>
</template>

<script>
import { getDoctorProduction, GetMyVideoListByTranscoding, searchVideo } from '@/api/ShortVideo/ShortVideo.js'
import ShortWaterfallFlow from '@/components/ShortWaterfallFlow.vue'
import { Toast } from 'vant'
export default {
  name: "myVideos",
  components: { ShortWaterfallFlow },
  data() {
    return {
      processingListTotal: 0,
      videoListTotal: 0,
      videoParams: {
        pageIndex: 1,
        pageSize: 10,
        name: ""
      },
      loading: false,
      finished: false,
      processingList: [],     // 处理中 list
      videoList: [],          // 已发布 list
      isShow: false,
      active: 0
    }
  },
  methods: {
    handleTabChange(e) {
      switch (e) {
        case 0:
          this.videoParams.pageIndex = 1;
          this.videoList = [];
          this.getMyVideoList();
          break;

        case 1:
          this.finished = false;
          this.getMyVideoProcessingList();
          break;
      }
    },
    // 获取正在转码的视频
    getMyVideoProcessingList() {
      this.isRequest();
      GetMyVideoListByTranscoding({ pageIndex: 1, pageSize: 1000, name: "" })
        .then(({ data }) => {
          if (data.IsSuccess) {
            this.processingListTotal = data.Pager.TotalItemCount;
            this.processingList = data.ResultObject;
          } else {
            this.$toast(data.ResultMsg);
          }
          Toast.clear();
        })
        .catch(error => {
          Toast.clear();
        })
    },

    // 获取已发布的视频列表
    getMyVideoList() {
      this.loading = true;
      this.isRequest();
      getDoctorProduction(this.videoParams)
        .then(({ data }) => {
          // return;
          if (data.IsSuccess) {
            Toast.clear();
            this.loading = false;
            this.videoListTotal = data.Pager.TotalItemCount;
            if (data.ResultObject.length === 0 && this.videoParams.pageIndex === 1) {
              this.isShow = true;
              this.finished = true;
            } else {
              this.videoTotal = data.Pager.TotalItemCount;
              this.videoList = [...this.videoList, ...data.ResultObject];
              this.videoParams.pageIndex++;
              this.isShow = false;
              if (this.videoList.length === this.videoTotal) {
                this.finished = true;
              }
            }
          } else {
            Toast('服务器异常,请稍后重试');
          }
        })
        .catch(err => { Toast.clear() })
    },

    // 跳转视频播放页面
    jumpTo(currentVideoIndex, currentVideoList, currentPageIndex) {
      this.$router.push(
        {
          name: "videoPlay",
          query: { currentVideoIndex, currentVideoList, currentPageIndex, source: "myVideos", videoTotal: this.videoTotal }
        }
      )
    },

    jumpToUpload() {
      this.$router.push({ name: 'UploadFile' })
    }
  },
  mounted() {
    this.getMyVideoList();
    this.getMyVideoProcessingList();
  }
}
</script>

<style lang="less" scoped>
.my-videos {
  .items-wrap {
    display: flex;
    flex-wrap: wrap;
    .item {
      position: relative;
      width: 33.33%;
      border: 1px solid #ccc;
      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 {
        width: 100%;
        height: 3.6rem;
        border-radius: 0.1rem;
        object-fit: cover;
      }
      .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;
        }
      }
    }
  }
  .uploadBtn {
    margin-top: 1rem;
    width: 3.2rem;
    height: 0.8rem;
    border-radius: 0.1rem;
  }

  /* 默认缺省图片 */
  .default-image {
    display: block;
    width: 50%;
    height: 50%;
    margin: 0 auto;
    padding-top: 4rem;
  }
}

.prompt-wrap {
  margin-top: 0.3rem;
  font-size: 0.32rem;
  color: #f59797;
  .prompt {
    line-height: 0.5rem;
  }
}

/deep/ .van-tabs__line {
  background-color: #1989fa;
  width: 2rem !important;
}

/deep/ .van-tab--active {
  .van-tab__text {
    color: #1989fa;
  }
}
</style>