<template>
  <el-upload  
  :action="uploadUrl" :drag="true"  :before-remove="beforeRemove"
  :on-success="videoUploadOk" :show-file-list="true"
  :on-error="videoUploadErr"
  :on-preview="selectVideo"
  style="width: 50%;"
    accept=".mp4,.MOV,.WMV,.FLV,.AVI,.AVCHD,.WebM,.MKV,.rmvb">
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">
      拖拽视频文件到此 或 <em>点此上传</em>
    </div>
    <template #tip>
      <div class="el-upload__tip">
        <!-- jpg/png files with a size less than 500kb -->
      </div>
    </template>
  </el-upload>

  <video v-if="videoReady" :src="videoResource" loop controls style="width: 50%;"></video>
</template>

<script setup lang="ts">
import { uploadUrl } from '@/api/DesignForm'
import { UploadFilled } from '@element-plus/icons-vue'
import { UploadFile, UploadFiles } from 'element-plus/es/components/upload/src/upload';
//视频地址
const videoResource = ref<string>()
//上传是否成功
const videoReady = ref(false)
type VideoMsg = {
  CreatedAt: string
	UpdatedAt: string
  fileSize: bigint
  id: bigint
  key: string
  name: string
  physicspath: string
  size: string
  tag: string
  type: number
  url: string
}
//成功上传的视频
const videoArr = reactive<VideoMsg[]>([]);
const emits = defineEmits(["addedVideo"]);
//上传成功钩子
function videoUploadOk(response: any, uploadFile: UploadFile, uploadFiles: UploadFiles) {
  videoResource.value = response.data.url;
  videoReady.value = true;
  //console.log(response)
  const videoMsg:VideoMsg = {
      CreatedAt: '',
      UpdatedAt: '',
      fileSize: 0n,
      id: 0n,
      key: '',
      name: '',
      physicspath: '',
      size: '',
      tag: '',
      type: 0,
      url: ''
      }
  videoMsg.CreatedAt = response.data.CreatedAt;
  videoMsg.UpdatedAt = response.data.UpdatedAt;
  videoMsg.fileSize = response.data.fileSize;
  videoMsg.id = response.data.id;
  videoMsg.key = response.data.key;
  videoMsg.name = response.data.name;
  videoMsg.physicspath = response.data.physicspath;
  videoMsg.size = response.data.size;
  videoMsg.tag = response.data.tag;
  videoMsg.type = response.data.type;
  videoMsg.url = response.data.url;
  videoArr.push(videoMsg);
  //console.log(videoArr)
  emits("addedVideo",videoArr)
}

//删除钩子 禁止删除
function beforeRemove(){
  return false;
}

//上传失败钩子
function videoUploadErr(error: Error, uploadFile: UploadFile, uploadFiles: UploadFiles){
  alert("上传失败,请重试")
  console.log("上传失败"+error);
  
}
//点击文件列表中已上传的文件时的钩子,点击即替换video标签的src
function selectVideo(uploadFile: UploadFile){
 
  const res:any = uploadFile.response;
  const resd = res.data;
  const resdurl = resd.url;
  videoResource.value = resdurl;
}
</script>

<style scoped></style>