<template>
  <div class="video-play">
    <template v-if="'big' === viewSize">
      <div class="video-box">
        <video
          ref="veo"
          :src="url"
          :style="`object-fit: ${zoom};`"
          :poster="veoPoster"
          :autoplay="autoplay"
          :controls="!originPlay && controls"
          :loop="loop"
          :muted="autoplay || muted"
          controlsList="nodownload"
          @click.prevent.once="onPlay"
          @pause="showPlay ? onPause() : () => false"
          @playing="showPlay ? onPlaying() : () => false"
          @loadeddata="poster ? () => false : getPoster()"
        >
          <h2>您的浏览器<strong>不支持video标签</strong></h2>
        </video>
        <SvgIcon v-show="originPlay || showPlay" :class="{ hidden: hidden }" icon-class="paused" size="24" />
      </div>
    </template>
    <div v-else class="video-box small-box">
      <template v-if="'independent' === viewMethod">
        <video
          ref="veo"
          :src="url"
          :style="`object-fit: ${zoom};`"
          :poster="veoPoster"
          :autoplay="autoplay"
          :controls="!originPlay && controls"
          :loop="loop"
          :muted="autoplay || muted"
          controlsList="nodownload"
          @click.prevent.once="onPlay"
          @pause="showPlay ? onPause() : () => false"
          @playing="showPlay ? onPlaying() : () => false"
          @loadeddata="poster ? () => false : getPoster()"
        >
          <h2>您的浏览器<strong>不支持video标签</strong></h2>
        </video>
      </template>
      <template v-else>
        <video ref="veo" :src="url" :poster="veoPoster">
          <h2>您的浏览器<strong>不支持video标签</strong></h2>
        </video>
      </template>
      <SvgIcon v-show="originPlay || showPlay" :class="{ hidden: hidden }" icon-class="paused" size="16" />
    </div>
  </div>
</template>
<script>
import { GetFileURLMap } from '@/api/app';
export default {
  name: 'VideoPlay',
  props: {
    fileId: {
      type: String,
      required: true,
    },
    autoplay: {
      // 视频就绪后是否马上播放
      type: Boolean,
      default: false,
    },
    curVideoIndex: {
      type: Number,
      default: 0,
    },
    viewSize: {
      type: String,
      required: true,
    },
    viewMethod: {
      type: String,
      default: 'list',
    },
    showPlay: {
      // 播放暂停时是否显示播放器中间的暂停图标
      type: Boolean,
      default: true,
    },
    preload: {
      // 是否在页面加载后载入视频，如果设置了autoplay属性，则preload将被忽略；
      type: String,
      // auto:一旦页面加载，则开始加载视频; metadata:当页面加载后仅加载视频的元数据 none:页面加载后不应加载视频
      default: 'metadata',
    },
    controls: {
      // 是否向用户显示控件，比如进度条，全屏
      type: Boolean,
      default: true,
    },
    loop: {
      // 视频播放完成后，是否循环播放
      type: Boolean,
      default: false,
    },
    muted: {
      // 是否静音
      type: Boolean,
      default: false,
    },
    poster: {
      // 视频封面url，支持网络地址 https 和相对地址 require('@/assets/images/Bao.jpg')
      type: String,
      default: '',
    },
    second: {
      // 在未设置封面时，自动截取视频第 second 秒对应帧作为视频封面
      type: Number,
      default: 0.5,
    },
    zoom: {
      // video的poster默认图片和视频内容缩放规则
      type: String,
      // none:(默认)保存原有内容，不进行缩放; fill:不保持原有比例，内容拉伸填充整个内容容器; contain:保存原有比例，内容以包含方式缩放; cover:保存原有比例，内容以覆盖方式缩放
      default: 'contain',
    },
    playWidth: {
      // 中间播放暂停按钮的边长
      type: Number,
      default: 96,
    },
  },
  data() {
    return {
      url: '',
      hidden: false,
      veoPoster: this.poster,
      originPlay: true,
    };
  },
  watch: {
    fileId: {
      handler(val) {
        if (!val) return;
        GetFileURLMap({ file_id_list: [val] }).then(({ url_map }) => {
          this.url = url_map[val];
        });
      },
      immediate: true,
    },
  },
  mounted() {
    if (this.autoplay) {
      this.hidden = true;
      this.originPlay = false;
    }
    /*
      自定义设置播放速度，经测试：
      在vue2中需设置：this.$refs.veo.playbackRate = 2
      在vue3中需设置：veo.value.defaultPlaybackRate = 2
    */
    // this.$refs.veo.playbackRate = 2
  },
  methods: {
    getPoster() {
      // 在未设置封面时，自动获取视频0.5s对应帧作为视频封面
      // 由于不少视频第一帧为黑屏，故设置视频开始播放时间为0.5s，即取该时刻帧作为封面图
      this.$refs.veo.currentTime = this.second;
      // 创建canvas元素
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      // canvas画图
      canvas.width = this.$refs.veo.videoWidth;
      canvas.height = this.$refs.veo.videoHeight;
      ctx.drawImage(this.$refs.veo, 0, 0, canvas.width, canvas.height);
      // 把canvas转成base64编码格式
      this.veoPoster = canvas.toDataURL('image/png');
    },
    onPlay() {
      if (this.originPlay) {
        this.$refs.veo.currentTime = 0;
        this.originPlay = false;
      }
      if (this.autoplay) {
        this.$refs.veo.pause();
      } else {
        this.hidden = true;
        this.$refs.veo.play();
      }
    },
    onPause() {
      this.hidden = false;
    },
    onPlaying() {
      this.hidden = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.video-play {
  position: relative;
  width: 100%;
  height: 100%;

  .video-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;

    video {
      max-width: 100%;
      max-height: 100%;
    }

    .svg-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      pointer-events: none;
      transform: translate(-50%, -50%);
    }

    .hidden {
      opacity: 0;
    }
  }

  .small-box {
    background-color: #d9d9d9;
  }
}
</style>
