<template>
  <div class="content_operate_video">
    <div class="content_operate_video_select">
      <i class="iconfont icon-shipin2 content_operate_video_icon"></i>
      <el-button @click="selectVideo">选择视频</el-button>
    </div>
    <div class="content_operate_video_detect">
      <i class="iconfont icon-shipinjiance_mianxing content_operate_video_detect_icon"></i>
      <el-button @click="videoFrame">视频检测</el-button>
    </div>
    <!-- <div class="content_operate_video_paused">
      <i class="iconfont icon-zanting content_operate_video_paused_icon"></i>
      <el-button>暂停检测</el-button>
    </div> -->
    <div class="content_operate_video_export">
      <i class="iconfont icon-daochu content_operate_video_export_icon"></i>
      <el-button @click="videoDownload">视频检测结果导出</el-button>
    </div>
    <div class="content_operate_video_end">
      <i class="iconfont icon-jieshushipin content_operate_video_end_icon"></i>
      <el-button @click="endVideo">结束视频检测</el-button>
    </div>
    <el-dialog title="视频选择" :visible.sync="dialogVisible" width="30%" >
      <el-upload 
      class="upload-demo" 
      ref="upload" 
      :action="baseUrl + '/video/open'" 
      accept=".mp4" 
      :multiple="false"
      :file-list="videolList"
      :http-request="selectVideoUpload"
      :on-change="selectVideoUploadOnChange"
      :on-remove="selectVideoUploadOnChange"
      :auto-upload="false"
      :limit="1"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" :disabled="isUpload" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <div slot="tip" class="el-upload__tip">只能上传.mp4文件</div>
    </el-upload>
    </el-dialog>
    

  </div>
</template>

<script>
import { Loading } from 'element-ui';
import {FileData,GetData} from "@/api/index"
export default {
  name: "VideoVue",
  data() {
    return {
      dialogVisible:false,
      isUpload:true,
      videolList:[],

      videoUrl:null,
      videoDownloadURL:null,
    }
  },
  props:['confidenceValue','IOUValue'],
  created() {

  },
  methods: {
    selectVideo(){
      this.dialogVisible = true;
      this.isUpload = true;
    },
    selectVideoUploadOnChange(file,fileList){
      this.videolList = fileList
      if(fileList.length>0){
       
        new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file.raw);
          reader.onload = () => {
            this.videoUrl = reader.result;
            resolve(true); // 允许上传
          }
          reader.onerror = error => reject(error);
        }).then(res=>{
         
          this.isUpload = false;
        }).catch(error=>{
          console.log(error)
          this.$message.error("该视频暂无法观看")
          this.isUpload = false;
        })
      }else{
        this.isUpload = true;
        this.videoUrl = null;
      }
    },
    submitUpload(){
      this.$refs.upload.submit();
    },
    selectVideoUpload(obj){
      let loadingInstance = Loading.service();
      const formData = new FormData();
      formData.append("video", obj.file);//file 和 后端字段要保持一致
      FileData(obj,formData).then(res=>{
        loadingInstance.close();
        this.$message.success(res);
        this.$refs.upload.clearFiles();
        this.$emit("oepnVideo",this.videoUrl);
        this.dialogVisible = false;
      }).catch(error=>{
        loadingInstance.close();
        this.$refs.upload.clearFiles();
        console.log(error)
        this.$message.error("系统错误")
      })
    },

    //视频检测
    videoFrame(){
      let loadingInstance = Loading.service();
      let data={
        numcon:this.confidenceValue,
        numiou:this.IOUValue
      }
      GetData("/video/detect",data).then(res=>{
        console.log(res)
        this.videoDownloadURL =  this.baseUrl +"/" + res.url
        this.$emit("videoFrame",res,loadingInstance)
      }).catch(error=>{
        loadingInstance.close();
        console.log(error)
        this.$message.error("系统错误")
      })

    },
    videoDownload(){
      if(this.videoDownloadURL){
        const a = document.createElement("a");
        a.href = this.videoDownloadURL;
        a.download = "123";
        a.click();
        a.remove();
      }
    },
    endVideo(){
      this.dialogVisible=false
      this.isUpload=true
      this.videolList=[]
      this.videoDownloadURL = null
      this.videoUrl=null
      this.$emit("endVideo")
    }
  },
}
</script>

<style scoped lang="scss">
.content_operate_video {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 5px;

  .content_operate_video_select {
    margin: 5px;

    .content_operate_video_icon {
      font-size: $iconfont;
      margin: 0px 5px;
      vertical-align: middle;
      color: $iconblue;
    }
  }

  .content_operate_video_detect {
    margin: 5px;

    .content_operate_video_detect_icon {
      font-size: $iconfont;
      margin: 0px 5px;
      vertical-align: middle;
      color: $icongreen;
    }
  }

  .content_operate_video_paused {
    margin: 5px;

    .content_operate_video_paused_icon {
      font-size: $iconfont;
      margin: 0px 5px;
      vertical-align: middle;
      color: $iconred;
    }
  }

  .content_operate_video_export {
    margin: 5px;

    .content_operate_video_export_icon {
      font-size: $iconfont;
      margin: 0px 5px;
      vertical-align: middle;
      color: $iconblue;
    }
  }

  .content_operate_video_end {
    margin: 5px;

    .content_operate_video_end_icon {
      font-size: $iconfont;
      margin: 0px 5px;
      vertical-align: middle;
      color: $iconred;
    }
  }
}</style>