<!--
  @description:采购立项-供应商-正在参与项目-报名情况-缴纳标书费-其他支付方式的凭证审核情况
  @Modifier:gmy
  @routerPath:/procurement/procurementDriveSupplier/procurementCollectionAudit
  @date:2020/5/9-9:22
-->
<template>
  <div class="nobiddint">
    <el-form
      ref="form"
      :model="invoiceData"
    >
      <!--审核通过时显示采购文件 00 待审核 01 审核通过 02 审核不通过-->
      <p v-if="auditStatus === '01'" class="title">
        采购文件下载
      </p>
      <table v-if="auditStatus === '01'" class="from_table">
        <tr class="singleRow">
          <td>附件1</td>
          <td colspan="3">
            <downloadFile :data="upLoadData" />
          </td>
        </tr>
        <tr class="singleRow">
          <td>附件2</td>
          <td colspan="3">
            <downloadFile :data="upLoadDataLast" />
          </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" />
              {{ item.typename }}
            </p>
          </td>
        </tr>
        <tr class="singleRow">
          <td>附件</td>
          <td colspan="3">
            <downloadFile :data="feeData" />
          </td>
        </tr>
      </table>
    </el-form>
    <!--    审核信息-->
    <p class="title">
      审核信息
    </p>
    <el-table
      v-if="reviewList"
      :data="reviewList"
      :border="true"
      style="width: 100%;min-height:100px;"
    >
      <el-table-column
        label="审核时间"
        prop="auditTime"
        width="180"
        align="center"
      />
      <el-table-column
        label="审核人"
        prop="auditUserRealName"
        width="120"
        align="center"
      />
      <el-table-column
        label="审核状态"
        prop="reviewState"
        width="140"
        align="center"
      >
        <template slot-scope="scope">
          <p>
            213
          </p>
        </template>
      </el-table-column>
      <el-table-column
        label="审核意见"
        align="center"
      >
        <template slot-scope="scope">
          <p v-if="scope.row.auditNotPassReason">
            {{ scope.row.auditNotPassReason }}
          </p>
          <p v-else>
            暂未审核意见
          </p>
        </template>
      </el-table-column>
    </el-table>
    <!--    审核状态盖章-->
    <div
      v-for="(item, index) in reviewPicture"
      v-if="item.typecode===auditStatus"
      :key="index"
      class="nobiddingPicture"
    >
      <img :src="item.imgUrl" alt="">
    </div>
  </div>
</template>

<script>
// vuex
import { mapGetters } from 'vuex'
import downloadFile from '@comp/common/updownload/downloadFile'// 文件上传组件
/* 接口*/
import { paymentOfTenderFeeMessage } from '@/api/procurement/procurementProtdoc'
import { queryFeeInfoForSupplier } from '@api/procurement/procurementFee'
/* 公共数据*/
import { procurementTenderfeeMixins } from '../mixins/procurementTenderfeeMixins'
export default {
  name: 'ProcurementCollectionVoucher',
  components: {
    downloadFile
  },
  mixins: [procurementTenderfeeMixins],
  data() {
    return {
      auditStatus: '', // 审核字段 00 待审核 01 已审核 02审核不通过
      radio: 9,
      confirmLoading: false,
      errorMsg: '',
      reviewList: [],
      // 开票信息数据
      invoiceData: {
        id: '',
        invoiceTitle: '',
        invoiceType: '',
        taxpayerIdentificationNumber: '',
        bankname: '',
        taxpayeraddr: '',
        email: '',
        payAmount: '',
        payType: ''
      },
      // 获取缴费信息数据
      feeData: {
        packId: '', // 标段Id
        feeType: '' // 保证金 标书费
      }
    }
  },
  computed: {
    /* language 国际化*/
    ...mapGetters(['language'])
  },
  created() {
    const packId = this.$route.query.packId// 采购项目信息Id
    this.feeData.packId = this.$route.query.packId
    this.principalData.bizId = this.$route.query.bizId
    if (packId) {
      // 编辑时
      // 查询采购项目信息
      this.initData(packId)
    }
  },
  methods: {
    // 初次加载页面获取请求开票数据字段信息
    initData(packId) {
      // 获取开票信息字段
      paymentOfTenderFeeMessage(packId).then((response) => {
        this.feeData.feeType = response.data.feeType // 保证金或者标书费字段
        // 调用获取页面开票数据方法
        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 => {
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .footer-h{
    text-align: center;
  }
  .nobiddint {
    position: relative;
  }
  .nobiddingPicture {
    position: absolute;
    right: 26px;
    top: 26px;
    width: 96px;
    height: 96px;
    img {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
  .money{
    color:#ff0000;
    font-weight: bold;
  }
</style>
