<!--
  @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">
        保证金缴纳信息 <el-button type="primary" style="margin-left:20px;">
          刷新缴费状态
        </el-button>
      </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>
        <tr>
          <td>
            <el-form-item label="是否缴纳" prop="tenderNo" />
          </td>
          <td>
            <p>{{ formData.projectBuyersName }}</p>
          </td>
          <td>
            <el-form-item prop="tenderName" />
            <label slot="label">缴纳时间</label>
          </td>
          <td>
            <p>{{ formData.projectBuyersName }}</p>
          </td>
        </tr>
      </table>
      <p style="margin-top:20px;">
        <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>
      <p style="margin-top:20px;">
        <span style="color:red;">投标保证金事项说明：</span>
      </p>
      <div style="margin-left:10px;">
        <p>1.为保证项目的顺利进行设置保证金环节，保证金账号为本项目专用账号。</p>
        <p>2.项目保证金金额由采购人设定，项目结束后，由采购人发起退款，平台受理后在五个工作日处理退款事宜。</p>
        <p>3.受采购人委托，国信创新电子招标投标交易平台对该保证金进行托管，托管期间，平台将确保资金安全。</p>
        <p>4.由采购人发起保证金扣款事项，解释权归采购人所有，国信创新电子招标投标交易平台不承担任何责任。</p>
      </div>
    </el-form>
  </div>
</template>

<script>
/* 接口*/
import { queryProcurementProjectBuysersInfo, queryBaseProcurementProjectInfo } from '@/api/procurement/procurementProject' // 暂存获取
// vuex
import { mapGetters } from 'vuex'
export default {
  name: 'ProcurementProjectAdd',
  components: {
  },
  data() {
    return {
      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>
