<template>
  <div>
    <Modal v-model="isShow" title="中标公告上传" @on-ok="submit">
      <el-upload
        style="width: 300px"
        ref="upload"
        multiple
        :on-success="successHandle"
        :before-upload="uploadBefore"
        accept=".rar,.zip,.doc,.docx,.pdf,.jpg,.png,.gif,.mp4,.xls,.xlsx"
        :action="action"
        :file-list="fileList"
        :auto-upload="false"
        :on-remove="removeHande"
      >
        <el-button slot="trigger" size="small" type="primary"
          >选取文件</el-button
        >
        <el-button
          style="margin-left: 10px"
          size="small"
          type="success"
          @click="$refs['upload'].submit()"
          >开始上传</el-button
        >
        <div slot="tip" class="el-upload__tip">
          支持文件格式：.rar .zip .doc .docx .pdf .jpg .png .gif .mp4 .xls .xlsx
          <br />单个文件不能超过50M
        </div>
      </el-upload>
    </Modal>
  </div>
</template>

<script>
import { detailContract, editorContract } from "@/api/contract/contract";
export default {
  data() {
    return {
      id: "",
      isShow: false,
      action: process.env.VUE_APP_UPLOAD_API,
      fileList: [],
    };
  },
  methods: {
    setId(id) {
      this.id = id;
    },
    show() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    },
    //上传
    successHandle(response, file, fileList) {
      this.fileList = fileList;
    },
    removeHande(file, fileList) {
      this.fileList = fileList;
    },
    uploadBefore(file) {
      console.log(file);
      if (file.size / 1000 > 50 * 1024) {
        this.$message({
          type: "warning",
          message: "上传图片大小超过50M！",
        });
        return false;
      }
    },

    async getDetail() {
      const res = await detailContract({
        id: this.id,
      });
      this.detail = res;
      this.fileList = res.tender ? res.tender.map(i => ({
        url: i.url,
        name: i.original_name,
        response: i
      })) : []
    },
    submit() {
      this.detail.invite_status = 3;
      this.detail.tender_id = this.fileList.map(i => i.response?.id)
      editorContract(this.detail).then((res) => {
        this.hide();
        this.$emit("refresh");
      });
    },
  },
  computed: {},
  watch: {
    isShow(newVal) {
      if (newVal) {
        this.getDetail();
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>
