<template>
  <div class="setting">
    <el-row>
      <el-col :xs="24" :sm="12" :lg="4">
        <div class="setting_select">
          <i class="iconfont icon-moxing setting_select_icon"></i>
          <el-button class="setting_select_btn" @click="selectModel">模型权重选择</el-button>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="4">
        <div class="setting_initialize">
          <i class="iconfont icon-shujuji setting_initialize_icon"></i>
          <el-button class="setting_initialize_btn" @click="gotoDataSetVue">数据集</el-button>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="setting_confidence">
          <p class="setting_confidence_text">Confidence:</p>
          <el-input-number class="setting_confidence_number" v-model="confidenceValue" size="small" :precision="2"
            :step="0.01" :max="1" :min="0" @change="updataSetting"></el-input-number>
          <el-slider class="setting_confidence_slider" v-model="confidenceValue" :precision="2" :step="0.01" :max="1"
            :min="0" @change="updataSetting"></el-slider>
        </div>
      </el-col>
      <el-col :xs="24" :sm="12" :lg="8">
        <div class="setting_IOU">
          <p class="setting_IOU_text">IOU:</p>
          <el-input-number class="setting_IOU_number" v-model="IOUValue" size="small" :precision="2" :step="0.01" :max="1"
            :min="0" @change="updataSetting"></el-input-number>
          <el-slider class="setting_IOU_slider" v-model="IOUValue" :precision="2" :step="0.01" :max="1"
            :min="0" @change="updataSetting"></el-slider>
        </div>
      </el-col>
    </el-row>

    <el-dialog title="模型权重选择" :visible.sync="dialogVisible" width="30%">

      <el-upload 
        class="upload-demo" 
        ref="upload" 
        :action="baseUrl + '/model/load'" 
        accept=".pt" 
        :multiple="false"
        :file-list="modelList"
        :http-request="selectModelUpload"
        :on-change="selectModelUploadOnChange"
        :on-remove="selectModelUploadOnChange"
        :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">只能上传pt文件</div>
      </el-upload>

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

<script>
import {FileData} from "@/api/index"
import { Loading } from 'element-ui';
export default {
  name: "HomeHeader",
  data() {
    return {
      confidenceValue:0.7,
      IOUValue:0.45,
      dialogVisible: false,
      
      modelList:[],
      isUpload:true,
    }
  },
  created() {

  },
  methods: {
    //模型权重选择
    selectModel(){
      this.dialogVisible = true;
      this.isUpload = true;
    },
    selectModelUploadOnChange(file, fileList){
      this.modelList = fileList
      if(fileList.length>0){
        this.isUpload = false;
      }else{
        this.isUpload = true;
      }
      
    },
    submitUpload(){
      this.$refs.upload.submit();
    },
    selectModelUpload(obj){
      let loadingInstance = Loading.service();
      const formData = new FormData();
      formData.append("model", obj.file);//file 和 后端字段要保持一致
      FileData(obj,formData).then(res=>{
        loadingInstance.close();
        this.$message.success(res)
        this.dialogVisible = false;
        this.$refs.upload.clearFiles()
      }).catch(error=>{
        loadingInstance.close();
        this.$refs.upload.clearFiles()
        console.log(error)
        this.$message.error("系统错误")
      })
    },
    updataSetting(){
      this.$emit("updataSetting",this.confidenceValue,this.IOUValue)
    },
    gotoDataSetVue(){
      this.$router.push("/dataset")
    }

  },
}
</script>

<style scoped lang="scss">
.setting {
  width: 100%;
  margin-bottom: 20px;
  text-align: center;

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

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

  .setting_confidence {
    .setting_confidence_text {
      display: inline-block;
      margin: 0px 10px;
    }

    .setting_confidence_number {
      display: inline-block;
      margin: 0px 5px;
    }

    .setting_confidence_slider {
      display: inline-block;
      margin: 0px 5px;
      width: 100px;
      vertical-align: bottom;
    }
  }

  .setting_IOU {
    .setting_IOU_text {
      display: inline-block;
      margin: 0px 10px;
    }

    .setting_IOU_number {
      display: inline-block;
      margin: 0px 5px;
    }

    .setting_IOU_slider {
      display: inline-block;
      margin: 0px 5px;
      width: 100px;
      vertical-align: bottom;
    }
  }


}
</style>