<template>
  <div>
    <el-form :model="form">
      <el-form-item :label="name">
        <el-row>
          <el-col :span="1.5">
            <el-input v-model="fileName" placeholder="待上传" readonly />
          </el-col>
          <el-col :span="1.5" v-show="!fileUrlid && form.winningState == 0">
            <el-upload
              class="upload-demo"
              ref="upload"
              action="123"
              :show-file-list="false"
              :on-change="fileChange"
              :file-list="fileList"
              accept=".xlsx, .xls, .doc, .docx, .word, .wordx, .png, .jpg, .gif, .txt"
              :auto-upload="false"
              >
              <el-button type="info" plain icon="el-icon-upload2" size="small">
                上传
              </el-button>
            </el-upload>
          </el-col>
          <el-col :span="1.5" v-show="fileUrlid && (this.$store.state.user.name == fileCreateBy || this.$store.state.user.id == form.principal)" >
            <el-button type="success" plain icon="el-icon-download" size="small" @click="exportAccessory">
              下载
            </el-button>
          </el-col>
          <el-col :span="1.5" v-show="fileUrlid  && form.winningState == 0 && this.$store.state.user.name == fileCreateBy" >
            <el-button size="small" type="danger" plain icon="el-icon-delete" @click="deleteAccessory(field)">
              删除
            </el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {insertAccessory,delAccessory} from "@/api/business/spd/bo/basic";
import axios from "axios";

export default {
  name: "filemanager",
  props: ["form","name","fileName","fileUrlid","fileCreateBy","field"],
  data() {
    return {
      //文件
      fileList: [],
    };
  },
  created() {
    console.log('this.name',this.form);
    console.log('this.name',this.name);
    console.log('this.$store.state.user',this.$store.state.user);
    console.log('this.fileCreateBy',this.fileCreateBy);
  },
  methods: {
    fileChange (file, fileList) {
      if (fileList.length > 0) {
        this.fileList = [fileList[fileList.length - 1]]
        console.log('this.fileList',this.fileList);
        let formData = new FormData();
        if(this.fileList.length < 1){
          formData.append('file', null);
        }else{
          this.fileList.forEach(el => {
            formData.append('file', el.raw);
          })
        }
        formData.append("boId",this.form.id);
        formData.append("flag",this.field);
        formData.append("boType",this.form.boType);
        insertAccessory(formData).then(response => {
          console.log('response',response);
          if(response.code == 200){
            this.$emit('reload');
          }else{

          }
        });
      }
    },
    //下载附件
    exportAccessory() {
      let resUrl = "https://sy.derom.com/document-center/fastdfs/download?id=" + this.fileUrlid;
      axios
        .create({
          timeout: 3000,
          responseType: "blob", // 响应类型, 将响应数据转换为二进制数据
          headers: {},
        })
        .get(resUrl)
        .then((res) => {
          console.log(res);
          // 地址转换
          let url = window.URL.createObjectURL(res.data);
          const a = document.createElement("a");
          a.setAttribute("href", url);
          a.setAttribute("download", this.fileName);
          document.body.append(a);
          a.click();
          document.body.removeChild(a);
        });
    },
    //删除附件
    deleteAccessory(f) {
      this.$modal
        .confirm("是否确认删除？")
        .then(function () {})
        .then(() => {
          delAccessory(this.form.id, f, this.form.boType,this.fileUrlid).then((res) => {
            console.log('删除返回',res);
            this.$emit('reload');
          });
        })
        .catch(() => {});
    },
  },
};
</script>
