<template>
  <div style="display: flex; position: relative">
    <el-upload class="upload-demo" drag action="#" multiple :http-request="onChange" v-if="status">
      <div class="upload">
        <img :src="url" alt="" style="width: 88px;height: 88px;" class="img">
        <span class="upload-span" style="color: #333333;">将文件拖拽到此区域</span>
        <span class="upload-span" style="color: #999999;margin: 20px;">或</span>
        <button
          style="cursor: pointer;background: #FFFFFF;border-radius: 4px;    font-size: 13px;padding: 5px 15px;border: 1px solid #EBEBEB;">选择文件</button>
      </div>
      <!-- <i class="el-icon-upload"></i>#ecedfc -->
    </el-upload>
    <div v-else style="width:426px;height: 284px">
      <div v-for="(item, index) in fileList" :key="index"
        style="display: flex;justify-content: space-around;align-items: center; margin-top: 7px;">
        <span style="width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">{{
          item.file.name
        }}</span>
        <el-progress :percentage="item.progressPercent" style="width: 270px"></el-progress>
      </div>
    </div>
    <template>
      <el-table :data="tableData" style="width: 100%" :border="true" max-height="320px">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="sa_ShowName" label="文件名称">
        </el-table-column>
        <el-table-column prop="personName" label="上传人" width="110">
        </el-table-column>
        <el-table-column prop="sa_UploadDateTime" label="上传时间" width="190">
          <template slot-scope="scope">{{ formatTime(scope.row.sa_UploadDateTime) }}</template>
        </el-table-column>
        <!-- <el-table-column prop="address" label="规格"> </el-table-column> -->
        <el-table-column prop="sa_AttachmentSize" label="文件大小(Kb)" width="110"> </el-table-column>
        <el-table-column prop="" label="操作" width="120">
          <template slot-scope="scope">
            <div class="button">
              <span class="span" @click="deleteRow(scope.$index, tableData)">删除</span>
              <span class="span" @click="getFile(scope.row)">下载</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>
<script>
import baseTable from "@/components/base/baseTable";
import basePage from "@/components/base/basePage";
import baseDialog from "@/components/base/BaseNewDialog/index.vue";
import BaseUpfile from "@/components/base/baseUpfile/index.vue";

import { UploadFiles, DownloadFiles, UploadList, downloadFromMinio } from "@/api/apis/auth.js";
import request from "@/utils/request";
export default {
  name: "equipmentDetails",
  components: {
    baseTable,
    basePage,
    baseDialog,
    BaseUpfile,
  },
  data() {
    return {
      url: require('@/assets/images/upload.png'),
      tableData: [],
      dialogVisible: false,
      tabLoading: false,
      fileList: [],
      progressPercent: 77,
      status: true,
      n: 0,
      appendix: [],
      testUrl: ''
    };
  },
  mounted() {
    // this.tableData = JSON.parse(localStorage.getItem("tableDataAdd"))
  },
  methods: {
    //删除上传文件
    deleteRow(index, rows) {
      this.appendix.splice(rows.sa_AttachmentID, 1)
      rows.splice(index, 1);
      this.UploadList()
    },
    testFile(file) {
      console.log(file.target.files);
    },
    // 单元格点击事件
    getCell(row, label) {
      // console.log(row);
      // console.log(label);
    },
    // 上传
    async onChange(data) {
      this.status = false;
      data.progressPercent = 0;
      this.fileList.push(data);
      let formData = new FormData();
      formData.append("type", 1);
      formData.append("files", data.file);
      return request({
        url: "/Api/Attachments/UploadToMinio",
        method: "post",
        data: formData,
        onUploadProgress: (progressEvent) => {
          // progressEvent.loaded:已上传文件大小
          // progressEvent.total:被上传文件的总大小
          this.fileList[this.n].progressPercent = Number(
            ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)
          );
          if (this.fileList[this.n].progressPercent == 100) {
            this.n++;
          }
        },
      }).then((res) => {
        if (res.success == "true") {
          this.appendix.push(res.data[0].split("附件ID:")[1]
          )
          this.UploadList()
        }
        this.status = true
      })
    },
    async getFile(row) {
      let res = await downloadFromMinio({ filesID: row.sa_AttachmentID })
      const blob = new window.Blob([res])
      const fileName = row.sa_AttachmentName;
      const elink = document.createElement('a');
      elink.download = fileName;
      elink.style.display = 'none';
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink); elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象 document.body.removeChild(elink);

    },
    async UploadList1(item) {
      if (JSON.stringify(item) != '[]') {
        let list = item.split("'")
        this.appendix = []
        list.forEach(el => {
          if (el != "" && el != ', ') {
            this.appendix.push(el)
          }
        });
        const res = await UploadList({
          page: "1", //当前页码
          limit: "10", //每页显示多少
          billid: "", //业务单据ID
          filesIDs: this.appendix, //附件ID
        })
        if (res.success == "true") {
          this.tableData = res.data[1]
        }
      }
    },
    async UploadList() {
      const res = await UploadList({
        page: "1", //当前页码
        limit: "10", //每页显示多少
        billid: "", //业务单据ID
        filesIDs: this.appendix, //附件ID
      })
      if (res.success == "true") {
        //拼接数组
        this.tableData = res.data[1]
        // localStorage.setItem("tableDataAdd", JSON.stringify(this.tableData))
        // let data = JSON.parse(localStorage.getItem("tableData"))
      }
    },
    formatTime(row) {
      return row && row.substring(0, 10);
    },
  },
};
</script>

<style scoped lang="scss">
.upload-demo {
  margin-right: 10px;
}

.upload {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 10px;

  .upload-span {
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC;
    line-height: 17px;
  }
}



::v-deep .el-table--fit {
  // padding: 17px 0 0 27px;
  // padding: 10px 20px;
}

::v-deep .el-upload-dragger {
  width: 426px;
  height: 284px;
  background-color: #ecedfc;

  .img {
    width: 100px;
    height: 100px;
    display: flex;
  }

}

::v-deep .el-icon-upload {
  line-height: 175px;
  color: #fff;
}

.button {
  width: 100px;

  .span {
    cursor: pointer;
    font-size: 13px;
    margin-right: 10px;
    color: #409eff
  }
}
</style>