<!--  -->
<template>
  <div>
    <!--    面包屑，用来管理 首页>数据集管理>静态数据集，separator-class是设置面包屑中的分隔符>-->
    <el-breadcrumb class="divi2" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/visi-dataset' }">数据集管理</el-breadcrumb-item>
      <el-breadcrumb-item>单文件数据集</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    el-divider是分割线-->
    <el-divider class="divi"></el-divider>

    <div class="container">
      <div class="input-suffix">
        <span>备注：</span>
        <el-input
          type="textarea"
          :autosize="{ minRows: 2 }"
          v-model="remark"
          placeholder="请输入内容"
          class="input"
        ></el-input>
      </div>
      <el-upload
        class="upload-demo"
        drag
        action=""
        :file-list="fileList"
        :limit="1"
        :on-exceed="upLoadNumberWrong"
        :on-change="handleChange"
        :auto-upload="false"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="tip" slot="tip">注意：只允许上传一个文件</div>
      </el-upload>
      <span class="bottom-element">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </div>
  </div>
</template>

<script>
import { Message } from "element-ui";

export default {
  name: "singleFileUpload",
  data() {
    return {
      dataInfo: {
        id: this.$store.state.user.id
      },
      fileList: [],
      remark: ""
    };
  },
  methods: {
    close() {
      this.fileList = [];
      this.$router.replace({ path: "/visi-dataset" });
    },
    upLoadNumberWrong() {
      Message({
        message: "单次只允许上传一个文件",
        type: "error"
      });
    },
    async submit() {
      if (this.fileList.length > 0) {
        console.log(this.fileList);
        const formData = new FormData();
        formData.append("file", this.fileList[0].raw); // 添加文件
        // 将其他表单数据添加到 formData 对象中
        let dataSet = {
          datasetName: this.fileList[0].name,
          uid: this.$store.state.user.id,
          datasetStatus: 1,
          remark: this.remark
        };
        formData.append("dataSet", JSON.stringify(dataSet));
        const { data } = await this.$http({
          url: this.$http.adornUrl("/dataset/staticup/uploadFile"),
          method: "post",
          data: formData,
          headers: {
            "Content-Type": "multipart/form-data"
          },
          timeout: undefined
        });
        Message({
          message: "上传完毕",
          type: "success"
        });
        this.fileList = [];
        this.$router.replace({ path: "/visi-dataset" });
      } else {
        Message({
          message: "请先上传一个文件",
          type: "error"
        });
      }
    },
    handleChange(file, fileList) {
      console.log("fileList :>> ", fileList);
      this.fileList = fileList.slice(-3);
    },
    unique(arr) {
      var ss = [];
      for (var i = 0; i < arr.length; i++) {
        // ss[i] = arr[i].categoryName
        ss[i] = arr[i];
      }
      return Array.from(new Set(ss));
    }
  }
};
</script>

<style scoped>
.input-suffix {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 30vw;
  margin: 20px 0;
}
.input-suffix span {
  width: 100px;
  font-size: 20px;
}
.input {
  flex: 1;
}
.container {
  position: relative;
  height: 50vh;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  flex-direction: column;
}
.divi2 {
  display: block;
  height: 1px;
  width: 100%;
  position: relative;
}

.divi {
  display: block;
  height: 1px;
  width: 100%;
  margin: 24px 0;
  background-color: #dcdfe6;
}

.bottom-element {
  position: absolute;
  bottom: 0;
  right: 10%;
}

.tip {
  margin-top: 20px;
  text-align: center;
  font-size: 20px;
}
.container >>> .el-upload-list .el-upload-list__item-name {
  font-size: 20px; /* 设置文件名字体大小 */
}

.container >>> .el-upload-list .el-upload-list__item-actions {
  font-size: 14px; /* 设置操作按钮字体大小 */
}
</style>
