<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">
        <img src="../../assets/img/myVideo.png" alt="" />
        我的视频作品
        <span class="floatRight" style="float: right">草稿箱</span>
      </div>
      <!-- 具体内容 -->
      <van-swipe-cell
        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" />
              <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>

            <!-- <van-dialog  class="dialog"
            v-model="clickItem==item?showTrue:showFalse">
              <div @click="closeDialog"><i class="el-icon-edit" />&nbsp;&nbsp;&nbsp;编辑</div>
              <div><i class="el-icon-delete" />&nbsp;&nbsp;&nbsp; 删除</div>
            </van-dialog> -->
          </div>
          <!-- 无数据处理 -->
          <div v-if="videoList.length <= 0" class="noWork">
            您还没有视频作品
          </div>
        </div>
        <!-- 右滑 -->
        <!-- <template #right>
          <van-button
            square
            text="删除"
            type="danger"
            class="delete-button"
            @click="goDelete(item.id)"
          />
        </template> -->
      </van-swipe-cell>
    </div>
    <!-- 分页 -->
    <van-pagination
      v-model="currentPage"
      :total-items="total"
      :items-per-page="4"
      @change="pageChange"
    />
    <!-- 创建新作品 -->
    <!-- <div class="goAdd" @click="checkInviteCode">+ 创作新作品</div> -->
    <div class="goNewAdd" @click="checkInviteCode">
      <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 } 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)
export default {
  components: {
    HeadTop
  },
  data() {
    return {
      showPopup: false, // 编辑和删除显示隐藏
      clickItem: -1, // 弹出层显示隐藏
      showTrue: true, // 弹出层显示隐藏
      showFalse: false, // 弹出层显示隐藏
      inPage: false,
      isShowMessageCover: false,
      videoList: [],
      currentPage: 1,
      pageSize: 4,
      prePage: '',
      total: ''
    }
  },
  computed: {
    ...mapState({
      characters: (state) => state.publicObj.characters
    })
  },

  methods: {
    ...mapActions(['setCharacters']),
    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)
    },

    // 点击空白区域退出提示
    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: {
            saveID: item.id,
            imgUrl: item.id,
            modelId: item.id,
            mouldSmId: item.id,
            modify: true
          }
        })
      }
      //生成中
      else if (status == 1) {
        Toast.fail('视频生成中')
        return
      }
      // 成功
      else if (status == 2) {
        const url = item.videoPathUri + item.videoPath
        this.$router.push({
          path: '/downloadVideo',
          query: {
            videoId: item.videoId,
            videoUrl: url
          }
        })
      }
      // 失败
      else if (status == 3) {
        this.$router.push({
          path: '/editModel',
          query: {
            id: item.id,
            imgUrl: item.id,
            modelId: item.id,
            mouldSmId: item.id,
            modify: true
          }
        })
      }
    },
    // 删除作品
    goDelete(id) {
      Dialog.confirm({
        title: '删除作品',
        message: '您确定要删除该作品吗？'
      })
        .then(async () => {
          await this.deleteVideoById(id)
          this.loadVideoList(this.currentPage, this.pageSize)
        })
        .catch(() => {
          return
        })
    },

    /**
     * @description:获取作品列表
     */
    async loadVideoList(pageNum, pageSize) {
      try {
        const res = await getVideoList(pageNum, pageSize)
        console.log(res, '获取作品列表')
        this.videoList = res.data.list
        this.total = res.data.total
      } 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() {
      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')
    }
  },

  mounted() {
    this.inPage = true
    scrollToID('top')
  },

  created() {
    this.loadVideoList(1, this.pageSize)
  }
}
</script>

<style lang="scss" scoped>
.page {
  transform: translateX(30%);
  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 {
    padding: 15px 10px;
    .title {
      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%;
      }
    }
    .itemList {
      .videoModel {
        position: relative;
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;

        .videoPrv {
          width: 150px;
          height: 100px;
          // background-color: #979797;
          img {
            position: absolute;
            width: 150px;
            height: 100px;
            border-radius: 6px;
          }
          .cover {
            position: absolute;
            width: 150px;
            height: 100px;
            line-height: 100px;
            background-color: #00000034;
            text-align: center;
            border-radius: 6px;
            color: #fff;
          }
        }
        .videoInfo {
          flex: 1;
          margin-left: 12px;
          .videoName {
            font-size: 16px;
            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: 70%;
          left: 290px;
          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: 300px;
    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);
  }
  .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%;
  }
}
</style>
