<template>
  <el-dialog :title=" '上传文件'" :close-on-click-modal="false" :visible.sync="addVisible">
    <el-form :model="dataForm" ref="dataForm"
      label-width="80px">

        <el-form-item label="文件：" size="mini">
            <el-upload class="upload-demo" action="#"
              :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" 
              :on-change="fileChange"
              multiple :limit="10"
              :on-exceed="handleExceed" :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">请上传代码文件</div>
            </el-upload>
        </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog()">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { MessageBox } from 'element-ui'
import { Message } from "element-ui"
export default {
  data() {
    return {
      addVisible: false,
      fileList:[],
      algorithmNameToVersion:null,
      versionToFile:null,
      dataForm: {
        id: 0,
      },
      
    };
  },
  activated() {
    //   处理参数，根据参数初始化数据
    let algorithmNameToVersion = this.$route.query.algorithmNameToVersion;
    let versionToFile=this.$route.query.versionToFile;
    this.init(algorithmNameToVersion,versionToFile);
  },
  methods: {
    init(algorithmNameToVersion,versionToFile) {
      
      this.algorithmNameToVersion=algorithmNameToVersion;
      this.versionToFile=versionToFile;
      this.fileList=[];
      this.addVisible = true;
    },

    // 表单提交
    dataFormSubmit() {
      let formData=new FormData();
          this.fileList.forEach(file=>{
            formData.append('file',file.raw);
          }); 
          formData.append("algorithmNameToVersion",this.algorithmNameToVersion);
          formData.append("versionToFile",this.versionToFile);
          this.$http({
            url: this.$http.adornUrl(
              `/version/uploadFile`
            ),
            method: "post",
            data:formData,
          }).then(({ data }) => {
            this.$router.replace({ name: 'filetest',query:{algorithmNameToVersion:this.algorithmNameToVersion,verisionToFile:this.versionToFile} });
            if (data && data.code === 0) {
              Message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                
              });
              this.$parent.getDataList();
              this.addVisible = false;
            } else {
              Message.error(data.msg);
            }
          });
    },

    //点击取消按钮
    closeDialog(){
        this.fileList=[];
        this.addVisible=false;
    },

    // 以下4个函数是文件上传功能的
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      Message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return MessageBox.confirm(`确定移除 ${file.name}？`);
    },
    // 文件改变时
    fileChange(file, fileList) {
        this.fileList=fileList;
        this.fileList.append(file);
    },
  },
};
</script>