<template>
  <div class="content_operate_img">
    <div class="content_operate_img_select">
      <i class="iconfont icon-tupian content_operate_img_select_icon"></i>
      <el-button @click="selectImage">选择图像</el-button>
    </div>
    <div class="content_operate_img_detect">
      <i class="iconfont icon-5tuxiangjiance content_operate_img_detect_icon"></i>
      <el-button @click="imageDetect">图像检测</el-button>
    </div>
    <div class="content_operate_img_export">
      <i class="iconfont icon-daochu content_operate_img_export_icon"></i>
      <el-button @click="imageDownload">图像检测结果导出</el-button>
    </div>
    <div class="content_operate_img_end">
      <i class="iconfont icon-wutupian1 content_operate_img_end_icon"></i>
      <el-button @click="endImage">结束图像检测</el-button>
    </div>

    <el-dialog title="图片选择" :visible.sync="dialogVisible" width="30%">

  <el-upload 
    class="upload-demo" 
    ref="upload" 
    :action="baseUrl + '/image/open'" 
    accept=".JPG,.TIF" 
    :multiple="false"
    :file-list="imagelList"
    :http-request="selectImageUpload"
    :on-change="selectImageUploadOnChange"
    :on-remove="selectImageUploadOnChange"
    :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">只能上传.jpg和.TIF图片</div>
  </el-upload>


  </el-dialog>
  </div>
</template>

<script>
import { Loading } from 'element-ui';
import {FileData,GetData} from "@/api/index"
import 'tiff.js'
import Tiff from 'tiff.js'
import axios from 'axios'
export default {
  name: "ImageVue",
  data() {
    return {
      dialogVisible: false,
      imageUrl:null,

      imagelList:[],
      isUpload:true,

      TiforJPG:false,
      imageDownloadURL:null,
      fileNmae:null,

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

  },
  methods: {
    //选择图片
    selectImage(){
      this.dialogVisible = true;
      this.isUpload = true;
    },
    selectImageUploadOnChange(file, fileList){
      this.imagelList = fileList
      if(fileList.length>0){
        this.isUpload = false;
        this.imageUrl = URL.createObjectURL(file.raw);
        this.fileNmae = file.name;
        
        if(this.fileNmae.slice(-3) == "TIF"){
          this.fileNmae = this.fileNmae.slice(0,this.fileNmae.length-3)+"JPG"
          console.log(this.fileNmae)
          this.TiforJPG = true;
        }else{
          this.TiforJPG = false;
        }
      }else{
        this.isUpload = true;
        this.imageUrl = null;
      }
      
    },
    submitUpload(){
      this.$refs.upload.submit();
    },
    selectImageUpload(obj){
      let loadingInstance = Loading.service();
      const formData = new FormData();
      formData.append("image", obj.file);//file 和 后端字段要保持一致
      FileData(obj,formData).then(res=>{
        loadingInstance.close();
        this.$message.success(res);
        this.$refs.upload.clearFiles();
        this.imageShow();
        this.dialogVisible = false;
      }).catch(error=>{
        loadingInstance.close();
        this.$refs.upload.clearFiles();
        console.log(error)
        this.$message.error("系统错误")
      })
    },
    async imageShow(){
      if(this.TiforJPG){
        await axios.get(this.imageUrl, { responseType: 'blob' }).then((res) => {
          res.data.arrayBuffer().then((arrayBuffer) => {
            const tiff = new Tiff({
              buffer: arrayBuffer,
            });
            this.imageUrl = tiff.toDataURL("image/jpg")
            this.$emit("openImage",this.imageUrl);
          })
        })
      }else{
        this.$emit("openImage",this.imageUrl);
      }
    },


    //图像检测
    imageDetect(){
      let loadingInstance = Loading.service();
      let data={
        numcon:this.confidenceValue,
        numiou:this.IOUValue
      }
      GetData("/image/detect",data).then(res=>{
        this.imageDownloadURL =  this.baseUrl +"/" + res.url
        this.$emit("imageFrame",res,loadingInstance)
      }).catch(error=>{
        loadingInstance.close();
        console.log(error)
        this.$message.error("系统错误")
      })
    },

    //图像导出
    imageDownload(){
      // if(this.imageDownloadURL){
      //   window.open(this.baseUrl+"/image/export")
      // }
      this.$emit("uploadeImage",this.fileNmae)
    },

    endImage(){
      this.imageDownloadURL=null
      this.dialogVisible=false
      this.imageUrl=null
      this.imagelList=[]
      this.isUpload=true
      this.$emit("endImage")
    }
  },
}
</script>

<style scoped lang="scss">
    .content_operate_img{
      display: flex;
      flex-wrap:wrap;
      justify-content: space-between;
      margin:5px;
      .content_operate_img_select{
        margin: 5px;
        .content_operate_img_select_icon{
          font-size: $iconfont;
          margin: 0px 5px;
          vertical-align: middle;
          color: $iconblue;
        }
      } 
      .content_operate_img_detect{
        margin: 5px;
        .content_operate_img_detect_icon{
          font-size: $iconfont;
          margin: 0px 5px;
          vertical-align: middle;
          color: $icongreen;
        }
      }
      .content_operate_img_show{
        margin: 5px;
        .content_operate_img_show_icon{
          font-size: $iconfont;
          margin: 0px 5px;
          vertical-align: middle;
          color: $iconblue;
        }
      }
      .content_operate_img_export{
        margin: 5px;
        .content_operate_img_export_icon{
          font-size: $iconfont;
          margin: 0px 5px;
          vertical-align: middle;
          color: $iconblue;
        }
      }
      .content_operate_img_end{
        margin: 5px;
        .content_operate_img_end_icon{
          font-size: $iconfont;
          margin: 0px 5px;
          vertical-align: middle;
          color: $iconred;
        }
      }
    }
</style>