<!--
  @description: 采购员-服务费单-详情
  @author: 王俊楠
  @routerPath:/procurement/procurementServeOrderInfo
  @date： 2020-11-02 18:42:01
-->
<template>
  <div class="p0-16">
    <section class="title title_border">
      <i class="iconfont icon-fanhui pointer" @click="back()" />
      订单处理
    </section>
    <p class="page-title">
      1.服务费收款单信息
    </p>
    <table class="tableData mb16">
      <tr>
        <td>收款单编号</td>
        <td>{{ voucherEntityVo.voucherCode }}</td>
        <td>供应商名称</td>
        <td>{{ voucherEntityVo.supplierName }}</td>
      </tr>
      <tr>
        <td>服务费应收金额（元）</td>
        <td>{{ voucherEntityVo.voucherMoney }}</td>
        <td>收款人开户行</td>
        <td>{{ voucherEntityVo.accountOpeningBank }}</td>
      </tr>
      <tr>
        <td>收款账户名</td>
        <td>{{ voucherEntityVo.bankName }}</td>
        <td>收款账账号</td>
        <td>
          {{ voucherEntityVo.bankno }}
        </td>
      </tr>
      <tr>
        <td>收款单生成日期</td>
        <td>
          {{ voucherEntityVo.createTime && $Moment(voucherEntityVo.createTime).format(momentDate) }}
        </td>
        <td>状态</td>
        <td>
          {{ filterDictText(service_fee_voucher_statusList, voucherEntityVo.status) }}
        </td>
      </tr>
    </table>
    <p class="page-title">
      2.订单信息
    </p>
    <el-table :data="serviceFeeEntityVos" class="mb16">
      <el-table-column
        type="index"
        label="序号"
        width="55"
        align="center"
      />
      <el-table-column
        prop="orderCode"
        header-align="center"
        align="center"
        min-width="150"
        label="订单编号"
      />
      <el-table-column
        prop="purchaseDepartName"
        header-align="center"
        min-width="180"
        label="采购单位"
      />
      <el-table-column
        prop="taxOrderTotalMoney"
        header-align="center"
        align="right"
        min-width="80"
        label="订单含税总额(元)"
      />
      <el-table-column
        prop="orderCreateTime"
        header-align="center"
        align="center"
        min-width="180"
        label="订单生效日期"
      />
      <el-table-column
        prop="actualChargeMoney"
        header-align="center"
        align="right"
        min-width="150"
        label="服务费应收金额（元）"
      />
      <el-table-column
        prop="paidMoney"
        header-align="center"
        align="right"
        min-width="110"
        label="已交金额"
      />
      <el-table-column
        :formatter="formatterOrderStatus"
        prop="status"
        header-align="center"
        align="center"
        min-width="120"
        label="缴费状态"
      />
    </el-table>
    <p class="page-title">
      3.开票信息（<span style="color:red">如开票信息有误，请在缴费前修改基本信息并通过审核</span>）
    </p>
    <table class="tableData mb16">
      <tr>
        <td>发票抬头</td>
        <td>{{ financeEntityVo.invoiceTitle }}</td>
        <td>税号</td>
        <td>{{ financeEntityVo.correspondentNum }}</td>
      </tr>
      <tr>
        <td>开户行名称/账号</td>
        <td>{{ financeEntityVo.bankname }} / {{ financeEntityVo.bankaccount }}</td>
        <td>地址/电话</td>
        <td>{{ financeEntityVo.accountAddress }} / {{ financeEntityVo.accountPhone }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
/* api接口*/
import { getByVoucherIdVoucherDetailInfo } from '@/api/procurement/procurementOrder'
// 引入mixins方法
import { orderServeFeeMixins } from '@/views/procurement/procurementOrder/mixins/orderServeFeeMixins.js'
export default {
  name: 'ProcurementServeOrderInfoDetail',
  mixins: [orderServeFeeMixins],
  data() {
    return {
      // 1.服务费收款单信息
      voucherEntityVo: {
        accountOpeningBank: '', // 收款人开户行
        bankName: '', // 收款账户名
        bankno: '', // 收款账号
        createTime: '', // 创建时间
        status: '', // 00未缴费 01已缴费 02 部分缴费 03已取消缴费
        supplierName: '', // 供应商名称
        voucherCode: '', // 收款单号
        voucherMoney: 0 // 服务费金额
      },
      // 2.订单信息
      serviceFeeEntityVos: [],
      // 3.开票信息
      financeEntityVo: {
        accountAddress: '', // 地址
        accountPhone: '', // 电话
        bankaccount: '', // 基本账户账号
        bankname: '', // 开户银行
        correspondentNum: '' // 税号
      },
      voucherId: this.$route.params.voucherId // 收款单号主键id
    }
  },
  created() {
    this.getGroupType()
    this.getServeFeeInfo()
  },
  methods: {
    // 获取服务费详情
    getServeFeeInfo() {
      getByVoucherIdVoucherDetailInfo(this.voucherId).then(res => {
        const { data: { financeEntityVo, serviceFeeEntityVos, voucherEntityVo }} = res
        this.voucherEntityVo = voucherEntityVo
        this.financeEntityVo = financeEntityVo
        this.serviceFeeEntityVos = serviceFeeEntityVos
      }).catch(() => {
      })
    },
    // 返回按钮
    back() {
      this.$router.push({
        path: '/procurement/procurementOrderServeFeeDeliverList'
      })
    }
  }
}
</script>

<style scoped>

</style>
