<template>
  <div class="localupload">
    <van-uploader
      :accept="item.attr.accept || 'video/*'"
      v-model="fileList"
      :max-count="item.attr.maxCount || 1"
      :max-size="item.attr.maxSize || 10485760"
      @oversize="filesize"
      :after-read="afterRead"
      result-type="file"
    >
      <template #preview-cover>
        <van-icon
          color="#fff"
          size="40"
          @click="previewClick"
          name="play-circle-o play"
        />
      </template>
    </van-uploader>
    <p
      style="
        font-size: 12px;
        color: #666;
        display: inline-block;
        width: calc(100% - 88px);
        vertical-align: top;
      "
      v-text="item.subtitle"
    ></p>
    <div
      class="Preview"
      :style="preview !== '' ? '' : 'z-index: -1;opacity: 0'"
    >
      <van-icon
        name="close"
        color="#fff"
        size="30"
        class="close"
        @click="closePreview"
      />
      <video ref="previewVideo" controls :src="preview"></video>
    </div>
  </div>
</template>

<script setup>
import config from '../config/index.js';
import { defineProps, ref, defineEmits } from 'vue';
import { showToast } from 'vant';
import axios from 'axios';
const emit = defineEmits(['setKey']);
const prop = defineProps({
  item: {
    type: Object,
  },
});

const preview = ref('');
const previewVideo = ref(null);
const fileList = ref(undefined);
let url = '';

const filesize = () => showToast('超出文件大小限制');
const closePreview = () => {
  preview.value = '';
};
const previewClick = () => {
  let getUrl = null;
  const file = fileList.value[0].file;
  if (url) {
    getUrl = url;
  } else if (window.createObjectURL != undefined) {
    //basic
    getUrl = window.createObjectURL(file);
  } else if (window.URL != undefined) {
    //window.URL 标准定义
    getUrl = window.URL.createObjectURL(file);
  } else if (window.webkitURL != undefined) {
    //window.webkitURL是webkit的内核
    //webkit or chrome
    getUrl = window.webkitURL.createObjectURL(file);
  }
  preview.value = getUrl;
  previewVideo.value.play();
};

const afterRead = () => {
  // 上传文件
  fileList.value[0].status = 'uploading'; // 上传中 failed -失败  done -成功
  fileList.value[0].message = '上传中'; // 上传进度
  const file = new FormData();
  file.append(prop.item.key || 'file', fileList.value[0].file);
  axios({
    method: 'post',
    url: config.base.origin + '/h5template/upload',
    headers: {
      'Content-Type': 'multipart/form-data',
      Authorization: localStorage.getItem('token'),
    },
    data: file,
  })
    .then(res => {
      if (res.status != 200 || res.data.code != 0) {
        fileList.value[0].status = 'failed'; // 上传中 failed -失败  done -成功
        fileList.value[0].message = '上传失败'; // 上传进度
        return;
      }
      fileList.value[0].status = 'done'; // 上传中 failed -失败  done -成功
      fileList.value[0].message = '上传成功'; // 上传进度
      url = res.data.data.url;
      emit('setKey', { value: res.data.data.url, key: prop.item.key });
    })
    .catch(() => {
      fileList.value[0].status = 'failed'; // 上传中 failed -失败  done -成功
      fileList.value[0].message = '上传失败'; // 上传进度
    });
};
</script>

<style scoped>
.Preview {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 10;
}
.Preview video {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100vw;
  max-width: 100vh;
  background: #000;
}
.Preview .close {
  position: absolute;
  right: 5px;
  top: 5px;
}
.play {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

<style>
.localupload .van-uploader__preview-cover {
  background-color: #000;
}
.localupload .van-uploader__preview-cover video {
  width: 100%;
  height: 100%;
}
</style>
