<!--
  @description:采购立项-供应商-正在参与项目-缴纳保证金-线下缴纳
  @Modifier:qk
  @routerPath:/procurement/procurementSupplier
  @date:2020/3/26-13:27
-->
<template>
  <div style="padding: 0 15px;">
    <el-form
      ref="form"
      :model="formData"
      :inline-message="true"
    >
      <p class="title">
        1.保证金缴纳信息
      </p>
      <table class="from_table">
        <tr>
          <td>
            <el-form-item label="保证金金额(元)" prop="tenderNo" />
          </td>
          <td>
            <p>{{ formData.projectBuyersName }}</p>
          </td>
          <td>
            <el-form-item label="保证金汇款账号" prop="tenderNo" />
          </td>
          <td>
            <p>{{ formData.projectBuyersName }}</p>
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="汇款账号户名" prop="tenderNo" />
          </td>
          <td>
            <p>{{ formData.projectBuyersName }}</p>
          </td>
          <td>
            <el-form-item label="汇款账号开户行" prop="tenderName" />
          </td>
          <td>
            <p>{{ formData.projectBuyersName }}</p>
          </td>
        </tr>
        <p class="title">
          2.保证金缴纳信息
        </p>
        <tr>
          <td>
            <el-form-item label="缴费凭证" prop="projectBuyersName" />
          </td>
          <td colspan="3">
            <upload
              ref="upload"
              :on-change="principalFile"
              :data="principalData"
              :file-list="principalList"
              :auto-delete="true"
              :auto-upload="true"
              :limit="1"
              :action="importFileUrl"
              tip-text=""
              file-ref="fileRef"
              but-text="点击上传"
              title=""
            />
          </td>
        </tr>
        <tr>
          <td>
            <el-form-item label="备注" prop="projectBuyersName" />
          </td>
          <td colspan="3">
            <p>{{ formData.projectBuyersName }}</p>
          </td>
        </tr>
      </table>
      <p style="margin-top:30px;">
        <span style="color:red;">汇款说明：</span>
      </p>
      <div style="margin-left:10px;">
        <p>1.请您按照上方“保证金缴纳信息”进行缴款。</p>
        <p>2.请您尽可能使用贵单位对公账号缴纳保证金。</p>
        <p>3.若因特殊情况只能使用个人账号缴纳保证金的，请务必在备注中注明单位全称，否则将可能造成系统无法正常匹配项目，在平台上的保证金缴纳状态显示为未缴纳。</p>
        <p>4.请使用对公账户一次性缴纳足额保证金。</p>
        <p>5.如若未按照上述要求操作导致项目参与失败，由贵单位自行承担责任。</p>
      </div>
    </el-form>
  </div>
</template>

<script>
/* 接口*/
import { queryProcurementProjectBuysersInfo, queryBaseProcurementProjectInfo } from '@/api/procurement/procurementProject' // 暂存获取
// vuex
import { mapGetters } from 'vuex'
import upload from '@comp/common/updownload/upload'// 文件上传组件
import { upLoadFileUrl } from '@/api/common/uploadCenter'
export default {
  name: 'ProcurementProjectAdd',
  components: {
    upload
  },
  data() {
    return {
      importFileUrl: upLoadFileUrl, // 文件上传地址
      principalList: [],
      principalData: {
        bizId: this.$route.query.id, // 业务主键Id
        fileType: 'pro_procurement_project_material_requirements_base'// 文件类型
      },
      status: '01', // 需要审批
      radio: 3,
      confirmLoading: false,
      formData: {
        projectBuyersName: '', // 联系人
        buyersLinkerTel: '', // 联系电话
        buyersLinkerEmail: '' // 邮箱
      },
      errorMsg: ''
    }
  },
  computed: {
    /* language 国际化*/
    ...mapGetters(['language'])
  },
  watch: {
  },
  created() {
    this.initUser() // 获取采购人信息
    const tenderId = this.$route.query.id// 采购项目信息Id
    if (tenderId) {
      // 编辑时
      // 查询采购项目信息
      this.initData(tenderId)
    }
  },
  methods: {
    // 获取采购人信息
    initUser() {
      queryProcurementProjectBuysersInfo().then(res => {
        this.formData.projectBuyersName = res.data.projectBuyersName // 采购人
      })
    },
    // 编辑获取采购项目信息
    initData(tenderId) {
      queryBaseProcurementProjectInfo({ tenderId: tenderId }).then((response) => {
        this.formData = response.data
      })
    }
  },
  // 保存组装数据
  assemblyData() {
    const data = {
      ...this.formData
    }
    return data
  },
  // 附件上传
  principalFile(file, fileList) {
    this.principalList = fileList
  },
  // 暂存，进行下一步
  nextStep(formName) {
    // 校验输入内容
    this.$refs[formName].validate((valid, field) => {
      if (valid) { // 校验通过
        this.saveData('next')// 下一步
      } else { // 校验不通过
        this.$confirm('基本信息未完善, 是否进入下一步?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmBtn',
          cancelButtonClass: 'cancelBtn',
          type: 'warning'
        }).then(() => {
          this.saveData()
        }).catch(() => {
        })
      }
    })
  }
}
</script>

<style lang="less" scoped>

  /deep/.show-word-limit-padding{
    .el-input__inner{
      padding-right: 70px;
    }
  }
  .title{
    font-weight: 600;
  }
</style>
