<!--
  @description:  采购方澄清-回执
  @Modifier: 杨胜国
  @routerPath:/procurement/procurementDriveSupplier/procClarificationSupplier/procClarificationAdd
  @date: 2021-02-08 10:48:06
-->
<template>
  <div>
    <el-form
      ref="form"
      :rules="rules"
      :inline-message="true"
      :model="formData"
    >
      <table class="tableData">
        <tr>
          <td>
            澄清内容
          </td>
          <td colspan="3">
            {{ formData.clarificationTitle }}
          </td>
        </tr>
        <tr>
          <td>
            澄清文件
          </td>
          <td colspan="3">
            <downloadFile :data="questionContent" />
          </td>
        </tr>
        <!-- <tr>
          <td>
            澄清内容文件
          </td>
          <td colspan="3">
            <downloadFile :data="clarificationContent" />
          </td>
        </tr> -->
        <tr>
          <td>
            <el-form-item label="上传回执文件" prop="clarificationAttachment" />
          </td>
          <td colspan="3">
            <upload
              ref="clarificationAttachment"
              :on-change="clarificationAttachmentFile"
              :data="clarificationAttachment"
              :auto-delete="true"
              :auto-upload="true"
              :file-size="200"
              title=""
              accept=".doc, .docx, .pdf, .png, .jpg, .zip;.jpeg;.txt;.xlsx;. xls;.ppt;.pptx;.rar"
              tip-text="上传附件格式（*.doc;*.docx;*.pdf;*.png;*.jpg;*.zip;*.jpeg;*.txt;*.xlsx;*.xls;*.ppt;*.pptx;*.rar）单个文件不得超过200M"
              file-ref="fileRef"
            />
          </td>
        </tr>
      </table>
    </el-form>
    <div class="but_footer">
      <div class="but_footer-h" />
      <div class="but_footer-but">
        <el-button :loading="confirmLoading" type="primary" @click="saveQuestion('form')">
          提交回执
        </el-button>
        <el-button @click="back">
          返 回
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
/* api*/
import { getEditClarificationInfo, saveClarificationReceiptInfo } from '@/api/procurement/procurementProject'// 澄清
/* 混合开发方法-参数字段*/
import { randomData } from '@/assets/js/utils/index'
// import { clarificationMixin } from '../mixins/clarificationMixin'// 澄清质疑-公用参数
/* 组件*/
import upload from '@comp/common/updownload/upload' // 附件上传组件
import downloadFile from '@comp/common/updownload/downloadFile' // 展示附件
export default {
  name: 'ClarificationQuestionAdd',
  components: {
    downloadFile,
    upload
  },
  // mixins: [clarificationMixin],
  data() {
    return {
      confirmLoading: false, // 控制按钮重复点击Loding
      formData: {
        clarificationId: this.$route.params.clarificationId // 澄清ID
        // clarificationReceiptId: ''
      },
      // 问题附件-详情
      questionContent: {
        bizId: '',
        fileType: 'procurement_clarification_attachment'
      },
      // 澄清内容文件
      clarificationContent: {
        bizId: '',
        fileType: 'procurement_clarification_content'
      },
      rules: {
        clarificationAttachment: [{ required: true, message: '请上传', trigger: 'blur' }] // 澄清附件
      },
      // 回执附件-新增
      clarificationAttachment: {
        bizId: '',
        fileType: 'procurement_clarification_receipt_content'
      }
    }
  },
  created() {
    this.init() // 初始化
  },
  methods: {
    init() {
      // 获取信息
      this.getEditQuestionInfo()
      // 附件ID
      this.clarificationAttachment.bizId = this.formData.clarificationReceiptId = randomData()
    },
    // 获取澄清信息
    getEditQuestionInfo() {
      const params = {
        clarificationId: this.$route.params.clarificationId
      }
      getEditClarificationInfo(params).then(response => {
        this.formData = response.data
        this.questionContent.bizId = this.clarificationContent.bizId = response.data.clarificationId
      }).catch(() => {
      })
    },
    // 回执
    saveQuestion(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm('是否确认提交?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            confirmButtonClass: 'confirmBtn',
            cancelButtonClass: 'cancelBtn',
            type: 'warning'
          }).then(() => {
            this.confirmLoading = true
            const params = {
              clarificationId: this.formData.clarificationId, // 澄清id
              clarificationReceiptId: this.clarificationAttachment.bizId // 澄清回执id(附件ID)
            }
            saveClarificationReceiptInfo(params).then(response => {
              this.confirmLoading = false
              this.$message.success(response.header.msg)
              // 返回
              this.$router.push({
                name: 'procClarificationSupList'
              })
            }).catch(() => {
              this.confirmLoading = false
            })
          }).catch(() => {
          })
        }
      })
    },
    // 返回
    back() {
      this.$router.push({
        name: 'procClarificationSupList'
      })
    },
    // 扫描件
    clarificationAttachmentFile(file, fileList) {
      if (fileList.length > 0) {
        this.$set(this.formData, 'clarificationAttachment', 'true')// 上传了
      } else {
        this.$set(this.formData, 'clarificationAttachment', '')// 未上传
      }
    }
  }
}
</script>

<style scoped>
</style>
