<template>
  <div>
    <div class="share-layer">
      <div class="share-code" v-if="z_video">
        <video :src="z_video" controls autoplay loop></video>
        <i class="el-icon-close" @click="$emit('close')"></i>
      </div>
      <div class="share-upload" v-else>
        <i class="el-icon-plus"></i>
        <label for="file-upload1"></label>
        <input accept="video/mp4" ref="upload" type="file" id="file-upload1" @change="fileChange" />
      </div>
    </div>
    <span class="size">支持MP4視頻格式，碼率小於2Mbps，大小不超過20M。</span>
  </div>
</template>

<script>
import { computed } from "vue";
import { getApp } from "@/app";

export default {
  props: ["link", "video"],
  setup(props, context) {

    const fileChange = (ev) => {
      let file = ev.target.files[0];

      if (file.type !== "video/mp4") return getApp().$alert("請上傳mp4格式視頻", "提示");
      if (file.size / 1024 / 1024 > 20) return getApp().$alert("請上傳20MB以內的視頻", "提示");

      let render = new FileReader();

      render.onload = (ev) => {
        z_video.value = ev.target.result;
      };

      render.readAsDataURL(file);
      context.emit("changeVideo", file);
    };
    const z_video = computed(() => props.video )
    return { fileChange, z_video };
  },
 
};
</script>

<style lang="scss" scoped>
.share-layer {
  margin: 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: inline-block;
  .share-code {
    width: 300px;
    height: 300px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    >video {
      width: 100%;
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .el-icon-close {
      position: absolute;
      z-index: 33;
      top: 10px;
      right: 10px;
      background: var(--primaryColor);
      border-radius: 50%;
      color: #fff;
      display: none;
    }
    &:hover {
      .el-icon-close {
        display: inline-block;
      }
    }
  }

  .share-upload {
    width: 160px;
    height: 160px;
    position: relative;
    overflow: hidden;
    .el-icon-plus {
      pointer-events: none;
      font-size: 32px;
      position: absolute;
      z-index: 1;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  label {
    display: inline-block;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  input[type="file"] {
    display: none;
  }
}
.size {
  font-size: 14px;
  display: inline-block;
  line-height: 1.2;
}
</style>
