<template>
  <div :class="inPage ? 'page active' : 'page'">
    <div id="top"></div>
    <HeadTop />
    <!-- 顶部图 -->
    <img class="showIMG" src="../../assets/img/BG-Page.png" alt="" />
    <!-- 展示列表 -->
    <div class="item">
      <div class="title">
        <div>
          <img src="../../assets/img/myVideo.png" alt="" />
          我的视频作品
        </div>
        <div class="title-change">
          <div class="displayFlex">
            <span v-show="listActive == 1" class="floatRight" :class="videoType == 1 ? 'wordColor' : ''" @click="getNewList(1)">只看竖屏</span>
            <span v-show="listActive == 1" class="floatRight" :class="videoType == 2 ? 'wordColor' : ''" @click="getNewList(2)">只看横屏</span>
            <span v-show="listActive == 1" class="floatRight" @click="draftChange(2)">草稿箱</span>
            <span @click="draftChange(1)" v-show="listActive == 2" class="floatRight">返回视频列表</span>
          </div>
        </div>
      </div>
      <div class="vantLoadingBox" style="height: 550px" v-show="showLoading">
        <van-loading type="spinner" color="#52d4e5" class="vantLoading" />
      </div>
      <!-- 具体内容 -->
      <div v-show="!showLoading">
        <!-- 列表样式--大图 -->
        <div v-if="videoList.length == 0" :style="{ height: '250px', textAlign: 'center', lineHeight: '250px' }">暂无数据</div>
        <!-- 新 修改v-if videoList-->
        <div v-if="waterfallBug">
          <waterfall v-if="videoList.length != 0" v-show="listActive == 1" class="waterFall" :col="2" :data="videoList">
            <div v-for="(item, index) in videoList" class="waterFall-item" :key="item.id ? item.id : index" @click="goDetail(item)">
              <div class="waterFall-item-paddding">
                <img :src="item.coverImg ? item.coverImg : item.videoType == 2 ? defaultImg : defaultImg1" alt="" />
                <!-- 渐变遮罩层 -->
                <div class="waterFall-item-mask">
                  <div>{{ item.title || '无标题' }}</div>
                  <div v-if="item.videoStatus == 5">视频时长：{{ formatSeconds(item.videoTime) }}</div>
                  <div v-if="item.videoStatus == 5">视频容量：{{ bytesToSize(item.videoSize) }}</div>
                  <div>创建时间：{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div>
                </div>
                <!-- 视频状态  草稿还是未完成还是失败 0草稿,1246生成中,3失败,5成功-->
                <div class="waterFall-item-state" v-if="item.videoStatus != 5">
                  <!-- <div class="waterFall-item-state" v-if="item.videoStatus == 2"> -->
                  <div v-if="item.videoStatus == 0" class="cover">草稿</div>
                  <div v-if="[1, 2, 4, 6].includes(item.videoStatus)" class="cover">视频生成中</div>
                  <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div>
                </div>
                <!-- 删除 -->
                <!-- <div class="waterFall-item-del" @click.stop="goDelete(item.id)">
                  <img src="../../assets/icon/icon-trash.png" alt="" />
                </div> -->
                <div class="waterFall-item-del" @click.stop="copyAndDel(item.id)">
                  <img v-show="clickAction == item.id" src="../../assets/icon/icon-shang.png" alt="" />
                  <img v-show="clickAction != item.id" src="../../assets/icon/icon-xia.png" alt="" />
                </div>
                <!-- 删除和拷贝 -->
                <div v-show="clickAction == item.id" class="copyAndDelBox">
                  <div @click.stop="copyModel(item.id)">复制</div>
                  <div @click.stop="goDelete(item.id)">删除</div>
                </div>
              </div>
            </div>
          </waterfall>
        </div>
        <!-- 列表样式--小图 -->
        <van-swipe-cell v-show="listActive == 2" loading v-for="(item, index) in videoList" :key="item.id ? item.id : index">
          <div class="itemList">
            <!-- 每一项 -->
            <div v-if="videoList.length > 0" class="videoModel" :key="index">
              <!-- 左侧图片 -->
              <div class="videoPrv" @click="goDetail(item)">
                <!-- <img src="../../assets/img/BG@2x.png" /> -->
                <img src="../../assets/img/logoh.png" />
                <!-- <div v-if="item.videoStatus == 0" class="cover">草稿</div> -->
                <div v-if="item.videoStatus == 0" class="cover"></div>
                <div v-if="item.videoStatus == 1" class="cover">视频生成中</div>
                <div v-if="item.videoStatus == 3" class="cover">视频生成失败</div>
                <!-- <div v-if="item.videoStatus == ?" class="cover">排队中</div> -->
              </div>
              <!-- 中间文字 -->
              <div class="videoInfo" @click="goDetail(item)">
                <div class="videoName">
                  {{ item.title || '无标题' }}
                </div>
                <!-- <div class="createTime">视频时长：{{ formatSeconds(item.videoTime) }}</div> -->
                <!-- <div class="createTime">视频容量：{{ bytesToSize(item.videoSize) }}</div> -->
                <div class="createTime">创建时间：{{ changeTime(item.createDate, 'YYYY-MM-DD hh:mm:ss') }}</div>
              </div>
              <!-- 右侧更多 -->
              <div class="showMore" @click.stop="showDialog(item.id)">
                <div></div>
                <div></div>
                <div></div>
              </div>
              <!-- 弹出层 -->
              <van-popup v-if="clickItem == item.id" v-model="showPopup">
                <!-- <div @click="closeDialog">
                  <i class="el-icon-edit" />&nbsp;编辑
                </div> -->
                <div @click="goDelete(item.id)">
                  <i class="el-icon-delete" />
                  &nbsp;删除
                </div>
              </van-popup>
            </div>
            <!-- 无数据处理 -->
            <div v-if="videoList.length <= 0" class="noWork">您还没有视频作品</div>
          </div>
        </van-swipe-cell>
      </div>
    </div>
    <!-- 分页 -->
    <van-pagination v-model="currentPage" :total-items="total" :items-per-page="pageSize" @change="pageChange" />
    <!-- 创建新作品 -->
    <!-- <div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> -->
    <div class="goNewAdd" @click="checkInviteCode">
      <img src="../../assets/icon/icon-plus.png" alt="" />
      <!-- <i class="el-icon-plus"></i> -->
    </div>

    <div class="messageCover" :class="isShowMessageCover ? 'active' : ''" @click="exitCover">
      <div class="message" id="message">
        <div class="connect" id="message">请添加微信与我们联系</div>
        <div class="qrCode" id="message">
          <img src="../../assets/img/SuiMangQRCode.png" alt="" />
        </div>
        <div class="phoneNum" id="message">或致电13260039498</div>
        <div class="clickToClose">点击空白处关闭</div>
      </div>
    </div>
  </div>
</template>

<script>
// 组件
import Vue from 'vue';
import { Toast, Dialog, Loading } from 'vant';
import { mapState, mapActions } from 'vuex';
import HeadTop from '@/components/common/head.vue';
// 工具
import { bytesToSize, timestampToTime, scrollToID, formatSeconds } from '../../utils';
// 接口
import { getVideoList, doGetVideoDetialById, doFindInviteCode, deleteVideoById } from '../../api/myPage';

Vue.use(Toast);
Vue.use(Loading);
export default {
  components: {
    HeadTop
  },
  data() {
    return {
      clickAction: -1, //右上角下拉
      hasToken: null, // 判断有没有token来判断有没有登录
      showLoading: true, // 加载处理
      waterfallBug: true, // 解决瀑布流不显示bug
      videoType: -1, //-1全部1竖屏2横屏
      showPopup: false, // 编辑和删除显示隐藏
      clickItem: -1, // 弹出层显示隐藏
      showTrue: true, // 弹出层显示隐藏
      showFalse: false, // 弹出层显示隐藏
      inPage: false,
      isShowMessageCover: false,
      videoList: [],
      currentPage: 1,
      pageSize: 6,
      prePage: '',
      total: '',
      // defaultImg: require('@/assets/img/BG@2x.png'), //默认图片
      // defaultImg1: require('@/assets/img/bg.png'), //默认图片
      defaultImg: require('@/assets/img/logoh.png'), //默认图片
      defaultImg1: require('@/assets/img/logoh.png'), //默认图片
      listActive: 1 // 显示列表样式
    };
  },
  computed: {
    ...mapState({
      characters: state => state.publicObj.characters
    })
  },

  methods: {
    ...mapActions(['setCharacters']),
    // 复制
    copyModel(id) {
      this.$router.push({
        path: '/editModel',
        query: {
          id: id,
          copy: true
        }
      });
    },
    // 点击右上角
    copyAndDel(id) {
      if (this.clickAction == id) {
        this.clickAction = -1;
      } else {
        this.clickAction = id;
      }
    },
    // 草稿箱切换
    draftChange(type) {
      this.listActive = type;
      this.videoType = -1;
      this.loadVideoList(1, this.pageSize, this.videoType);
    },
    // 横屏竖屏列表
    getNewList(videoType) {
      this.videoType = videoType;
      this.loadVideoList(1, this.pageSize, videoType);
    },

    closeDialog() {
      Dialog.close;
    },
    // 点击显示编辑删除
    showDialog(id) {
      this.showPopup = true;
      this.clickItem = id;
    },
    go(url) {
      this.$router.push(url);
    },

    changeTime(timestamp, form) {
      return timestampToTime(timestamp, form);
    },

    pageChange() {
      this.loadVideoList(this.currentPage, this.pageSize, this.videoType);
    },

    // 点击空白区域退出提示
    exitCover(e) {
      if (e.srcElement.id != 'message') {
        this.isShowMessageCover = false;
      }
    },

    // 秒转化时分秒
    formatSeconds(seconds) {
      if (seconds) {
        return formatSeconds(seconds);
      } else {
        return '暂未获取';
      }
    },

    // 将bytes转化
    bytesToSize(bytes) {
      if (bytes) {
        return bytesToSize(bytes);
      } else {
        return '暂未获取';
      }
    },

    // 查看详情
    goDetail(item) {
      console.log(item);
      const status = item.videoStatus;
      //草稿
      if (status == 0) {
        this.$router.push({
          path: '/editModel',
          query: {
            id: item.id
          }
        });
      }
      //生成中
      else if ([1, 2, 4, 6].includes(status)) {
        Toast.fail('视频生成中');
        this.$router.push('/videoCreate');
        return;
      }
      // 成功
      else if ([5].includes(status)) {
        const url = item.videoPathUri + item.videoPath;
        this.$router.push({
          // path: '/downloadVideo',
          path: '/videoDownload',
          query: {
            videoId: item.videoId,
            videoUrl: url,
            id: item.id
          }
        });
      }
      // 失败
      else if (status == 3) {
        this.$router.push({
          path: '/videoFail',
          query: {
            id: item.id
          }
        });
      }
    },
    // 删除作品
    goDelete(id) {
      Dialog.confirm({
        title: '删除作品',
        message: '您确定要删除该作品吗？'
      })
        .then(async () => {
          await this.deleteVideoById(id);
          await this.loadVideoList(this.currentPage, this.pageSize, this.videoType);
        })
        .catch(() => {
          return;
        });
    },

    /**
     * @description:获取作品列表
     */
    async loadVideoList(pageNum, pageSize, videoType) {
      if (!this.hasToken) {
        // this.$router.push('/login');
        // Toast.fail('请您先登录！');
        return;
      }
      try {
        this.showLoading = true;
        this.waterfallBug = false;
        // 根据listActive判断是不是看的草稿箱
        // let videoStatuss = this.listActive == 1 ? [2, 4, 5, 6] : [0, 1, 3];
        let videoStatuss = this.listActive == 1 ? [1, 2, 3, 4, 5, 6] : [0];
        const res = await getVideoList(pageNum, pageSize, videoType, videoStatuss);
        console.log(res, '获取作品列表');
        this.videoList = res.data.list;
        console.log(this.videoList);

        this.waterfallBug = true;
        console.log(this.waterfallBug);

        this.total = res.data.total;
        console.log(this.total);

        this.showLoading = false;
        console.log(this.showLoading);
      } catch (error) {
        console.log(error, 'error');
        // Toast.fail(error.message);
      }
    },

    /**
     * @description 通过视频id获取视频详情
     */
    async getVideoDetialById(id) {
      try {
        const res = await doGetVideoDetialById(id);
        console.log(res, '通过视频id获取视频详情');
        return res.data;
      } catch (error) {
        console.log(error, 'error');
        Toast.fail(error.message);
      }
    },

    /**
     * @description 根据id删除作品
     */
    async deleteVideoById(id) {
      try {
        const res = await deleteVideoById(id);
        console.log(res, '根据id删除作品');
      } catch (error) {
        console.log(error, 'error');
        Toast.fail(error.message);
      }
    },

    /**
     * @description:查询用户邀请码状态
     */
    async checkInviteCode() {
      this.$router.push('/chooseModel');
      return;
      if (!this.hasToken) {
        this.$router.push('/chooseModel');
        return;
      }
      try {
        const res = await doFindInviteCode();
        console.log(res, '查询用户邀请码数据');
        const status = res.data.status;

        // 当没有邀请码时
        if (status == 0) {
          scrollToID('top');
          this.isShowMessageCover = true;
        } else if (status == 1) {
          this.goCreateNew();
        }
      } catch (error) {
        console.log(error, 'error');
        Toast.fail(error.message);
      }
    },

    goCreateNew() {
      this.$router.push('/chooseModel');
    }
  },

  async mounted() {
    this.inPage = true;
    scrollToID('top');
    if (this.hasToken) {
      await this.loadVideoList(1, this.pageSize, this.videoType);
    } else {
      this.showLoading = false;
    }
  },

  created() {
    this.hasToken = localStorage.getItem('AccessToken');
  }
};
</script>

<style lang="scss" scoped>
.van-pagination {
  margin-top: 10px;
}
.floatRight {
  margin-left: 15px;
  img {
    vertical-align: bottom !important;
    margin-top: 2px !important;
    color: red;
  }
}
.page {
  // transform: translateX(30%);
  min-height: 100vh;
  opacity: 0;
  transition: all 0.5s; // global-transition
  padding-bottom: 25px;
  &.active {
    opacity: 1;
    transform: translateX(0);
  }
  .logoBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    cursor: pointer;
    background-color: #606060;
    .logo {
      float: left;
      width: 140px;
      height: 40px;
    }
    .userInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #fff;
      .userImg {
        float: right;
        width: 30px;
        height: 30px;
        margin-top: 3px;
        margin-right: 10px;
        margin-left: 15px;
      }
    }
  }
  .showIMG {
    padding: 10px;
    width: 100%;
    height: 140px;
    border-radius: 16px;
  }
  .item {
    width: 100%;
    padding: 15px 10px;
    .title {
      display: flex;
      justify-content: space-between;
      width: 100%;
      font-size: 16px;
      font-weight: 500;
      // margin-left: 15px;
      margin-bottom: 20px;
      img {
        margin-top: -5px;
        vertical-align: middle;
        width: 24px;
        height: 18px;
        background-size: 100% 100%;
      }
      &-change {
        display: inline-block;
        font-size: 12px;
      }
    }
    .itemList {
      .videoModel {
        position: relative;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .videoPrv {
          width: 140px;
          height: 100px;
          // background-color: #979797;
          img {
            position: absolute;
            top: 25px;
            width: 140px;
            height: 50px;
            border-radius: 6px;
          }
          .cover {
            position: absolute;
            width: 140px;
            height: 100px;
            line-height: 100px;
            background-color: #00000034;
            text-align: center;
            border-radius: 6px;
            color: #fff;
          }
        }
        .videoInfo {
          flex: 1;
          margin-left: 5px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-top: 10px;
          .videoName {
            width: 100%;
            font-size: 16px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-weight: 600;
          }
          .createTime {
            font-size: 11px;
            color: #999999;
            margin-top: 5px;
          }
        }
        .showMore {
          width: 20px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // margin-left: 10px;
          div {
            width: 4px;
            height: 4px;
            background-color: #51d9ca;
          }
        }
        .dialog {
          i {
            margin-left: -10px;
          }
        }
        // 弹出层样式
        ::v-deep .van-popup {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          justify-content: center;
          top: 50%;
          left: 80%;
          width: 80px;
          height: 30px;
          border-radius: 12px;
          font-size: 14px;
          line-height: 28px;
          text-align: center;
          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
        }
        ::v-deep .van-overlay {
          background-color: rgba(0, 0, 0, 0);
        }
        ::v-deep .van-button {
          display: none;
        }
        .tag {
          position: absolute;
          right: 10px;
          top: 10px;
          padding: 1px 5px;
          border-radius: 5px;
          &.text {
            color: #fff;
            background-color: #a2a2a290;
          }
          &.generating {
            background-color: #ffa600c2;
          }
          &.finish {
            color: #ffffff;
            background-color: #00ff88;
          }
          &.fail {
            color: #ffffff;
            background-color: #ff0000c3;
          }
        }
      }
      .noWork {
        width: 100%;
        height: 450px;
        line-height: 450px;
        font-size: 14px;
        font-weight: 600;
        text-align: center;
      }
    }
  }
  .goAdd {
    position: sticky;
    bottom: 25px;
    left: 10px;
    width: 300px;
    height: 42px;
    line-height: 42px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    transform: translateX(-50%);
    background-color: #0068b7;
    border-radius: 5px;
    box-shadow: #60606082 1px 1px 1px 1px;
    margin-top: 25px;
    margin-left: 190px;
  }
  .goNewAdd {
    position: sticky;
    left: 80%;
    bottom: 25px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    // font-size: 40px;
    // line-height: 60px;
    // text-align: center;
    color: #ffffff;
    background: linear-gradient(316deg, #6ee4d7 0%, #37c4f1 32%, #a49afc 100%);
    box-shadow: 0px 2px 6px 0px rgba(114, 100, 245, 0.25);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
    img {
      width: 60%;
      height: 60%;
    }
  }
  .messageCover {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #00000091;
    transition: all 0.3s;
    opacity: 0;
    z-index: -1;
    .message {
      position: sticky;
      top: 48%;
      transform: translate(-50%, -50%);
      width: 272px;
      height: 290px;
      border-radius: 5px;
      background-color: #fff;
      text-align: center;
      transition: all 0.3s;
      margin-left: 50%;
      padding: 10px;

      .connect {
        font-size: 12px;
        margin: 19px 0 10px 0;
      }
      .qrCode {
        width: 203px;
        height: 213px;
        background-color: #ffffff;
        border-radius: 5px;
        border: solid 1px #595959;
        margin: auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .phoneNum {
        float: left;
        font-size: 11px;
        margin-top: 8px;
        margin-left: 34px;
      }
      .close {
        position: absolute;
        top: 8px;
        right: 15px;
        font-size: 18px;
        color: #000;
      }
      .clickToClose {
        position: absolute;
        font-size: 14px;
        color: #fff;
        left: 50%;
        bottom: -20%;
        transform: translateX(-50%);
      }
    }

    &.active {
      z-index: 100;
      opacity: 1;
    }
  }
  .delete-button {
    position: relative;
    left: 1%;
    height: 100%;
  }
}

// 瀑布流
.waterFall {
  // width: 350px;
  width: 100%;

  ::v-deep .vue-waterfall-column {
    width: 50% !important;
    margin: 0 !important;
  }
  &-item {
    padding: 5px;
    border-radius: 12px;
    overflow: hidden;
    &-paddding {
      position: relative;
      border-radius: 12px;
      overflow: hidden;
      // min-width: 200px;
      min-height: 100px;
    }
    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: cover;
    }
    &-mask {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 5px 8px 5px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
      height: 80px;
      width: 100%;
      color: #f7dcdc;
      div {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 3px;
      }
    }
    &-state {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      // padding: 7.5px;
      border-radius: 12px;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #f7dcdc;
      background-color: rgba(0, 0, 0, 0.3);
    }
    &-del {
      position: absolute;
      top: 0px;
      right: 0px;
      height: 30px;
      width: 30px;
      padding: 7.5px;
      border-radius: 0 0 0 12px;
      background-color: rgba(0, 0, 0, 0.3);
      img {
        height: 15px;
        width: 15px;
      }
      z-index: 999;
    }
    .copyAndDelBox {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 100%;
      height: 100%;
      // padding: 7.5px;
      border-radius: 12px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #f7dcdc;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 99;
      transition: opacity 0.3s ease-out;
      div {
        font-size: 15px;
        margin-bottom: 20px;
      }
    }
  }
}
</style>
