<!--
  @description:采购立项-供应商-正在参与项目-报名情况-收取标书费-在线支付成功
  @Modifier:gaoMy
  @routerPath:
  @date:2020/3/26-13:27
-->
<template>
  <div>
    <el-form
      ref="form"
      :model="invoiceData"
    >
      <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>
      <p class="title">
        开票信息
      </p>
      <table class="from_table">
        <tr>
          <td>
            <p>发票抬头</p>
          </td>
          <td>
            <p>{{ invoiceData.invoiceTitle }}</p>
          </td>
          <td>
            <p>发票类型</p>
          </td>
          <td>
            电子发票<span v-for="(item,index) in invoiceTypeData" v-if="item.typecode===invoiceData.invoiceType" :key="index">{{ `(${item.typename})` }}</span>
          </td>
        </tr>
        <tr>
          <td>
            <p>纳税人识别号</p>
            <p style="margin-left: 10px">
              (统一社会信用代码)
            </p>
          </td>
          <td>
            <p>{{ invoiceData.taxpayerIdentificationNumber }}</p>
          </td>
          <td>
            <p>地址、电话</p>
          </td>
          <td>
            <p>{{ invoiceData.taxpayeraddr }}</p>
          </td>
        </tr>
        <tr>
          <td>
            <p>开户行及账号</p>
          </td>
          <td>
            <p>{{ invoiceData.bankname }}</p>
          </td>
          <td>
            <span>邮箱</span>
            <el-popover
              placement="top-start"
              popper-class="hint"
              width="420"
              offset="5"
              trigger="hover"
              content="用于接收电子发票"
            >
              <el-button slot="reference" type="info" class="prompt">
                <i class="iconfont icon-qm" />
              </el-button>
            </el-popover>
          </td>
          <td>
            <p>{{ invoiceData.email }}</p>
          </td>
        </tr>
      </table>
      <p class="title">
        订单支付
      </p>
      <table class="tableData">
        <tr class="singleRow">
          <td>
            <p>标书费(元)</p>
          </td>
          <td colspan="3">
            <p class="money">
              {{ invoiceData.payAmount }}
            </p>
          </td>
        </tr>
        <tr class="singleRow">
          <td>
            <p>支付方式</p>
          </td>
          <td colspan="3">
            <p
              v-for="(item) in paymentWaylist"
              v-if="item.typecode===invoiceData.payType"
              :key="item.typecode"
            >
              <i v-if="invoiceData.payType==='00'" class="iconfont icon-alipay" />
              <i v-if="invoiceData.payType==='01'" class="iconfont icon-weixinpay" />
              <span :class="{'alipay':item.payType==='00','weixinpay':item.payType==='01'}"> {{ item.payTypeName }}</span>
            </p>
          </td>
        </tr>
        <tr class="singleRow">
          <td>附件</td>
          <td colspan="3">
            <downloadFile :data="principalData" />
          </td>
        </tr>
      </table>
    </el-form>
  </div>
</template>

<script>
/* 接口*/
import { paymentOfTenderFeeMessage, saveDownloadProcfileRecord } from '@/api/procurement/procurementProtdoc'
import { queryFeeInfoForSupplier } from '@api/procurement/procurementFee'
// vuex
import { mapGetters } from 'vuex'
// 公共方法
import { procurementTenderfeeMixins } from '../mixins/procurementTenderfeeMixins'
/*   公共组件 */
import procurementNotCharge from '../procurementSubscription/procurementSubscription-detail' // 不收取标书费
export default {
  name: 'ProcurementProjectAdd',
  inject: ['getTenderBase'],
  components: {
    procurementNotCharge
  },
  mixins: [procurementTenderfeeMixins],
  data() {
    return {
      loaderReload: true, // 页面首次加载状态
      // 开票信息数据
      invoiceData: {
        id: '',
        invoiceTitle: '',
        invoiceType: '',
        taxpayerIdentificationNumber: '',
        bankname: '',
        taxpayeraddr: '',
        email: '',
        payAmount: '',
        payType: ''
      },
      // 获取缴费信息数据
      feeData: {
        packId: '', // 标段Id
        feeType: '' // 保证金 标书费
      },
      status: '01', // 需要审批
      radio: 3,
      confirmLoading: false,
      formData: {
        projectBuyersName: '', // 联系人
        buyersLinkerTel: '', // 联系电话
        buyersLinkerEmail: '' // 邮箱
      },
      errorMsg: '',
      savaData: {
        downloadStatus: '', // 下载状态 00失败 01成功
        downloadTerminal: '00', // 下载终端00:平台端 01:投标管家端 02:招标管家端 03:开标工具端 04:评标工具端 05:安卓端 06:苹果端
        procfileId: '' // 文件id
      },
      tenderBase: this.getTenderBase() // 项目基本信息
    }
  },
  computed: {
    /* language 国际化*/
    ...mapGetters(['language'])
  },
  watch: {
  },
  created() {
    const packId = this.tenderBase.packId// 采购项目信息Id
    this.feeData.packId = packId
    if (packId) {
      // 查询采购项目信息
      this.initData(packId)
    }
  },
  methods: {
    // 查询采购项目信息
    initData(packId) {
      // 获取开票信息字段
      paymentOfTenderFeeMessage(packId).then((response) => {
        this.feeData.feeType = response.data.feeType // 保证金或者标书费字段
        this.savaData.procfileId = response.data.procfileId
        this.noTenderFeeFilsData.bizId = this.savaData.procfileId // 获取采购文件主键id
        this.openTenderProjectFileType.bizId = this.tenderBase.tenderId // 获取附件信息业务id
        // 调用获取页面开票数据方法
        this.getProtFeeData(this.feeData)
      })
    },
    // 封装获取页面开票数据
    getProtFeeData(data) {
      queryFeeInfoForSupplier(data).then(res => {
        const { invoiceVo } = res.data.data
        // 获取发票信息
        this.invoiceData.invoiceTitle = invoiceVo.invoiceTitle // 发票抬头
        this.invoiceData.invoiceType = invoiceVo.invoiceType // 发票类型
        this.invoiceData.taxpayerIdentificationNumber = invoiceVo.taxpayerIdentificationNumber // 纳税号
        this.invoiceData.bankname = invoiceVo.bankname // 银行名称和账号
        this.invoiceData.taxpayeraddr = invoiceVo.taxpayeraddr // 用户电话号地址
        this.invoiceData.email = invoiceVo.email // 邮箱
        this.invoiceData.payAmount = res.data.data.payAmount // 费用类型
        this.invoiceData.payType = res.data.data.payType // 支付方式
        this.auditStatus = res.data.data.auditStatus // 审核状态字段
      }).catch(res => {
      })
    },
    // 下载成功触发的回调
    down(file) {
      // 判断文件fileid是否存在，区分是否下载成功
      if (file.fileId) {
        this.savaData.downloadStatus = '01'
        const data = this.savaData
        this.savaDownLoad(data) // 调用保存下载记录方法
      } else {
        this.savaData.downloadStatus = '00'
      }
    },
    // 封装保存下载记录方法
    savaDownLoad(data) {
      saveDownloadProcfileRecord(data).then(res => {
      }).catch(() => {
      })
    }
  }
}
</script>

<style lang="less" scoped>

  /deep/.show-word-limit-padding{
    .el-input__inner{
      padding-right: 70px;
    }
  }
  .title{
    font-weight: 600;
  }
  .money{
    color:#ff0000;
    font-weight: bold;
  }
  .icon-weixinpay{
    display: inline-block;
    margin-top: 5px;
    width:24px;
    height:24px;
    color:#3CB034;
    font-size: 24px;
  }
  .alipay{
    color:#00A8F2;
  }
  .weixinpay{
    color:#3CB034;
  }
</style>
