<!--
  @description:采购立项-供应商-正在参与项目-缴纳标书费-在线支付
  @Modifier:gaoMy
  @date:2020/8/5-9:22
-->
<template>
  <div>
    <!-- 支付成功后显示采购文件的下载 -->
    <div v-if="feeData.isFeeType==='01'">
      <p class="page-title">
        1.采购文件下载
      </p>
      <table v-loading="loading" class="tableData">
        <tr class="singleRow">
          <td>采购文件</td>
          <td colspan="3">
            <downloadFile v-if="noTenderFeeFilsData.bizId" :down-load="true" :data="noTenderFeeFilsData" :down-load-click="down" />
          </td>
        </tr>
        <tr class="singleRow">
          <td>附件信息</td>
          <td colspan="3">
            <downloadFile :data="openTenderProjectFileType" :down-load="true" />
          </td>
        </tr>
      </table>
    </div>

    <div class="p16">
      <p v-if="feeData.isFeeType==='01'" class="title">
        2.订单支付
      </p>
      <p v-else class="title">
        1.订单支付
      </p>
      <table class="from_table">
        <tr class="singleRow">
          <td>
            标书费(元)
          </td>
          <td colspan="3">
            <p class="orange-color">
              {{ feeData.payAmount }}
            </p>
          </td>
        </tr>
        <tr class="singleRow">
          <td>
            收款单号
          </td>
          <td colspan="3">
            <p>{{ feeData.gatheringOld }}</p>
          </td>
        </tr>
        <tr class="singleRow">
          <td>
            支付状态
          </td>
          <td colspan="3">
            未支付
          </td>
        </tr>
        <tr class="singleRow">
          <td>
            支付时间
          </td>
          <td colspan="3">
            {{ feeData.feeTime }}
          </td>
        </tr>
      </table>
      <p style="margin-top:30px;margin-bottom:30px;">
        <span style="color:red;">注意：</span> 支付页面在新窗口打开，若为打开，请检查浏览器是否拦截
      </p>
    </div>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h">
        <div class="but_footer-but">
          <!-- 下一步 -->
          <el-button v-if="feeData.isFeeType==='02'" :loading="confirmLoading" plain @click="saveData('save')">
            重新支付
          </el-button>
          <el-button v-if="feeData.isFeeType==='00'" :loading="confirmLoading" type="primary" @click="nextStep('form')">
            提交订单
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* 接口*/
import { paymentOfTenderFeeMessage } from '@/api/procurement/procurementProtdoc'
// vuex
import { mapGetters } from 'vuex'
/* 公共方法 */
import { procurementTenderfeeMixins } from '../mixins/procurementTenderfeeMixins'

export default {
  name: 'ProcurementProjectAdd',
  inject: ['getTenderBase'],
  mixins: [procurementTenderfeeMixins],
  props: {
    procfileId: {
      type: String,
      default: () => {
        return ''
      }
    }
  },
  data() {
    return {
      confirmLoading: false,
      isFeeType: '00', // 支付状态 00 未支付 01 支付成功 02支付失败
      // 获取缴费信息数据
      feeData: {
        packId: '', // 标段Id
        isFeeType: '00', // 支付状态 00 未支付 01 支付成功 02支付失败
        payAmount: 200, // 标书费金额
        gatheringOld: 'BSF20200803000001', // 收款单号
        feeTime: '' // 支付时间
      },
      tenderBase: this.getTenderBase() // 项目基本信息

    }
  },
  computed: {
    /* language 国际化*/
    ...mapGetters(['language'])
  },
  created() {
    const packId = this.tenderBase.packId// 采购项目信息Id
    if (packId) {
      // 编辑时
      // 查询采购项目信息
      // this.initData(packId)
    }
  },
  methods: {
    // 提交订单
    nextStep(formName) {
      this.saveDatas.status = '01'
      // this.confirmLoading = true
    },
    // 初次加载页面获取请求开票数据字段信息
    initData(packId) {
      // 获取开票信息字段
      paymentOfTenderFeeMessage(packId).then((response) => {
      })
    }
  }
}
</script>

<style lang="less" scoped>

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