<template>
  <div class="app-container">
    <div class="app-header-top" style="width: 100%;float: right;margin-bottom: 10px;">
      <div class="app-title">收款详情</div>
      <el-button type="primary" icon="el-icon-back" style="float: right;" @click="backToList">返回</el-button>
    </div>
    <el-card class="box-card">
      <div class="refund-item">
        <h1 style="font-size: 16px;color: #409EFF;">收款信息</h1>
        <el-row :gutter="24" class="box-row">
          <el-col :span="4"><b>收款ID：</b> {{ repacts.receiptId }}</el-col>
          <el-col :span="4"><b>收款类型：</b> {{ repacts.bankNameType }}</el-col>
          <el-col :span="4"><b>收款金额：</b> ¥{{ repacts.receiptAmount }}</el-col>
          <el-col :span="4"><b>收款时间：</b> {{ repacts.receiptDate }}</el-col>
        </el-row>
      </div>
      <div class="refund-item">
        <h1 style="font-size: 16px;color: #409EFF;">关联订单</h1>
        <div v-for="order in repacts.orderInfos" :key="order.orderId">
          <el-row :gutter="22" class="box-row">
            <el-col :span="5"><b>订单编号：</b> {{ order.orderNo + '(' + order.orderId + ')' }}</el-col>
            <el-col :span="5"><b>订单金额：</b> ¥{{ order.orderAmount | amountfilters }}</el-col>
            <el-col :span="4"><b>应收金额：</b> ¥{{ order.payableAmount | amountfilters }}</el-col>
            <el-col :span="4"><b>已收金额：</b> ¥{{ order.receiptAmount | amountfilters }}</el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>机构名称：</b> {{ order.clubName }}</el-col>
            <el-col :span="5"><b>下单日期：</b> {{ order.orderTime }}</el-col>
            <!-- <el-col :span="5"><b>订单类型：</b> {{ order.orderTime }}</el-col> -->
          </el-row>
          <template v-if="repacts.payWay === 1">
            <h1 class="refund-item-title">订单收款记录：</h1>
            <el-table :data="order.records" border fit highlight-current-row :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
              <el-table-column label="序号" align="center" width="50">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column label="收款时间" align="center" prop="receiptTime" />
              <el-table-column label="收款类型" align="center" prop="bankNameType" />
              <el-table-column label="收款金额" align="center" prop="receiptAmount" />
              <el-table-column label="交易号" align="center" prop="mbOrderId" />
            </el-table>
          </template>
        </div>
        <template v-if="repacts.payWay === 2 && repacts.vouchers.length > 0">
          <h1 style="font-size: 14px;color: #409EFF;">线下支付凭证：</h1>
          <el-row v-for="(vouch,index) in repacts.vouchers" :key="index" style="padding:5px 0">
            <p class="refund-item-p">{{ vouch.addTime }}</p>
            <div class="refund-item-imgs">
              <div v-for="(imgage,imgIndex) in vouch.images" :key="imgIndex" class="item-image">
                <a :href="imgage" target="_blank" rel="noopener noreferrer">
                  <img :src="imgage" alt="">
                </a>
              </div>
            </div>
            <p v-if="vouch.remarks" class="refund-item-p">备注：{{ vouch.remarks }}</p>
          </el-row>
        </template>
      </div>
    </el-card>
    <template>
      <el-backtop style="right: 40px; bottom: 40px;">
        <i class="el-icon-upload2" />
      </el-backtop>
    </template>
  </div>
</template>

<script>
import { getReceiptDetail } from '@/api/finance'
export default {
  filters: {
    receiptStatusFilters(value) {
      // 收款状态
      const map = {
        2: '待审核',
        3: '审核通过',
        4: '审核未通过',
        5: '收款撤销'
      }
      return map[value]
    },
    orderReceiptStatus(value) {
      // 收款方式
      const map = {
        1: '待收款',
        2: '部分收款',
        3: '已收款'
      }
      return map[value]
    }
  },
  data() {
    return {
      repacts: {},
      receiptAmount: 0
    }
  },
  computed: {

  },
  created() {
    this.getReceiptDetail(this.$route.query.receiptId)
  },
  methods: {
    async getReceiptDetail(receiptId) {
      try {
        const res = await getReceiptDetail(receiptId)
        this.repacts = res.data
      } catch (error) {
        console.log('error', error)
      }
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/finance/list'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
  .app-title{
    float: left;
    line-height: 36px;
    font-size: 18px;
    font-weight: bold;
    color: #999999;
  }
  .box-card{
    margin-top: 20px;
    font-size: 14px;
  }
  .box-row{
    padding: 10px 0;
  }
  .box-row .dropdown{
    margin-top: -10px;
  }
  .refund-item{
    padding: 10px 0;
  }
  .refund-item-title{
    line-height: 24px;
    font-size: 14px;
    color: #409EFF;
  }
  .refund-item-p{
    width: 100%;
    line-height: 18px;
    font-size: 14px;
    color: #666666;
    float: left;
  }
  .refund-item-imgs{
    width: 100%;
    height: auto;
    margin: 5px 0;
  }
  .refund-item-imgs .item-image{
    width: 148px;
    height: 148px;
    margin-right: 10px;
    border: 1px dashed #E1E1E1;
    float: left;
  }
  .refund-item-imgs .item-image a{
    width: 148px;
    height: 148px;
    display: block;
  }
  .refund-item-imgs .item-image a img{
    width: 148px;
    height: 148px;
    display: block;
  }
  .order-item{
    background:#f7f7f7;
    margin-bottom: 20px;
    padding: 10px 15px;
    border-radius: 5px;
  }
  .product-row{
    padding: 10px 0;
    background: #EBEEF5;
    border-top: 1px dashed #DCDFE6;
  }
  .op-item{
    padding: 5px 0;
  }
  .el-span-warning{
    color: #E6A23C;
  }
  .el-span-success{
    color: #67C23A;
  }
  .el-span-danger{
    color: #F56C6C;
  }
</style>

