<template>
  <div :class="inPage ? 'page active' : 'page'">
    <div id="top"></div>
    <HeadTop />
    <div class="video">
      <!-- <video ref="video" :src="videoUrl" /> -->
      <div id="J_prismPlayer" />

      <div class="desc">
        视频已保存到 <span @click="go('/myPage')">我的视频作品</span>
      </div>
      <!-- <img src="../../assets/img/play.png" @click="play" /> -->
    </div>
    <div class="bottomBtn">
      <div class="back" @click="backToIndex">返回首页</div>
      <a class="next" @click="download">下载视频</a>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Toast } from "vant";
import { mapState, mapActions } from "vuex";
import HeadTop from "./../../components/common/head.vue";
import { scrollToID, getDeviceType } from "../../utils";

import { doGetVideoDetialById } from "../../api/downloadVideo";

Vue.use(Toast);
export default {
  components: {
    HeadTop,
  },
  data() {
    return {
      inPage: false,
      videoDetail: {},
      coverUrl: "",
      videoUrl: "",
    };
  },
  computed: {
    ...mapState({
      characters: (state) => state.publicObj.characters,
    }),
  },

  methods: {
    ...mapActions(["setCharacters"]),

    go(url) {
      this.$router.push(url);
    },

    play() {
      this.$refs.video.play();
    },

    backToIndex() {
      this.$router.push("/myPage");
    },

    download() {
      window.open(this.videoUrl);
    },

    async getVideoDetail(id) {
      try {
        const res = await doGetVideoDetialById(id);
        console.log(res, "视频详情");
        this.coverUrl = res.data.coverURL;
        this.videoUrl = res.data.videoUrl;
        this.open();
      } catch (error) {
        console.log(error, "error");
        Toast.fail(error.message);
      }
    },

    open() {
      // 检测设备类型
      const deviceType = getDeviceType();
      let isAndroid = false;
      if (!deviceType) {
        // 设备类型为pc
        isAndroid = false;
      } else {
        if (deviceType[0] == "Android") {
          // 设备类型为安卓
          isAndroid = true;
        } else {
          // 其他设备
          isAndroid = false;
        }
      }

      new Aliplayer(
        {
          id: "J_prismPlayer",
          cover: this.coverUrl,
          source: this.videoUrl,
          // 安卓设备尺寸比其他设备小一半，需适配
          width: isAndroid ? "260px" : "480px",
          height: isAndroid ? "427px" : "854px",
          // 以下可选设置
          isLive: false, // 直播
          rePlay: false, // 循环播放
          preload: true, //播放器自动加载
          autoplay: false, // 自动播放
          diagnosisButtonVisible: false, //是否显示检测按钮
          keyShortCuts: true, //是否启用快捷键
          keyFastForwardStep: 3, //快进快退的时间长度
          controlBarVisibility: "hover", // 控制条的显示方式
        },
        function (player) {
          player.play();
        }
      );
    },
  },
  created() {},
  mounted() {
    this.videoId = this.$route.query.videoId;
    if (this.videoId) {
      this.getVideoDetail(this.videoId);
    } else {
      this.videoUrl = this.$route.query.videoUrl;
      this.open();
    }
    this.inPage = true;
    scrollToID("top");
  },
};
</script>

<style lang="scss" scoped>
.page {
  transform: translateX(30%);
  opacity: 0;
  transition: all 1s;
  padding-bottom: 25px;
  &.active {
    opacity: 1;
    transform: translateX(0);
  }
  .video {
    position: relative;
    padding: 30px;
    text-align: center;
    #J_prismPlayer {
      margin: auto;
    }
    .title {
      font-size: 18px;
      margin-bottom: 20px;
    }
    video {
      width: 240px;
      height: 427px;
      border: 0.5px solid #000;
      border-radius: 8px;
    }
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .desc {
      position: relative;
      right: 45px;
      bottom: 8px;
      font-size: 12px;
      margin-top: 20px;
      span {
        color: #0006ff;
      }
    }
  }
  .bottomBtn {
    display: flex;
    justify-content: space-between;
    padding: 0 32.5px;
    margin-top: 20px;
    margin-bottom: 20px;
    div,
    a {
      display: block;
      width: 142px;
      height: 42px;
      color: #484848;
      line-height: 42px;
      text-align: center;
      border: 1px solid #484848;
      border-radius: 7px;
      &.back {
        color: #fff;
        border: 1px solid #d2d2d2;
        background-color: #d2d2d2;
      }
      &.next {
        color: #fff;
        border: 1px solid #0068b7;
        background-color: #0068b7;
      }
    }
  }
}
</style>
