<template>
  <div class="app-container">
    <div id="printBox">
      <el-card ref="print" class="box-card" style="margin: 0 auto;">
        <div class="refund-item">
          <el-row :gutter="24" class="box-row">
            <el-col :span="6"><b>订单编号(ID)：</b> {{ shopOrder.orderNo }}({{ shopOrder.orderId }})</el-col>
            <el-col :span="6"><b>下单时间：</b> {{ shopOrder.orderTime }}</el-col>
            <el-col :span="6">
              <b>订单金额：</b>
              <span class="el-span-danger">¥{{ shopOrder.payTotalFee | amountfilters }}</span>
            </el-col></el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="6"><b>机构名称：</b> {{ shopOrder.clubName }}</el-col>
            <el-col :span="6"><b>机构运费：</b> <span>{{ shopOrder.postageInfo }}</span></el-col>
            <el-col :span="6">
              <b>收款状态：</b>
              <el-tag v-if="shopOrder.receiptStatus*1===1" type="danger" size="small">待收款</el-tag>
              <el-tag v-if="shopOrder.receiptStatus*1===2" type="warning" size="small">部分收款</el-tag>
              <el-tag v-if="shopOrder.receiptStatus*1===3" type="success" size="small">已收款</el-tag>
            </el-col>
            <el-col :span="6">
              <b>收款金额：</b>
              <span class="el-span-danger">¥{{ shopOrder.payableAmount | amountfilters }}</span>
            </el-col></el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="6"><b>子订单编号(ID)</b> {{ shopOrder.shopOrderNo }}({{ shopOrder.shopOrderId }})</el-col>
            <el-col :span="6"><b>商品费：</b> ¥{{ shopOrder.productAmount | amountfilters }}</el-col>
            <el-col :span="6">
              <b>付款状态：</b>
              <el-tag v-if="shopOrder.payStatus*1===1" type="danger" size="small">待付款</el-tag>
              <el-tag v-if="shopOrder.payStatus*1===2" type="warning" size="small">部分付款</el-tag>
              <el-tag v-if="shopOrder.payStatus*1===3" type="success" size="small">已付款</el-tag>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="6"><b>供应商名称：</b> {{ shopOrder.shopName }}</el-col>
            <el-col :span="6"><b>供应商运费：</b> ¥{{ shopOrder.shopPostFee | amountfilters }}</el-col>
            <el-col :span="12">
              <b>付供应商：</b>
              <b style="margin-left: 10px;">已付采美:</b>¥{{ shopOrder.payCmAmount | amountfilters }}
              <b style="margin-left: 10px;">已付供应商:</b>¥{{ shopOrder.payedShopAmount | amountfilters }}
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-table :data="shopOrder.newOrderProducts" border fit highlight-current-row :header-cell-style="{background:'#eef1f6',color:'#606266'}">
              <el-table-column label="商品名" align="center" prop="name" />
              <el-table-column label="规格" align="center" prop="unit" />
              <el-table-column label="数量" align="center" prop="num" />
              <el-table-column label="退货" align="center" prop="returnedNum" />
              <el-table-column label="单价" align="center" prop="price" />
              <el-table-column label="总价" align="center" prop="totalAmount" />
            </el-table>
          </el-row>
        </div>
        <div class="refund-item">
          <h1 class="refund-item-title">付款记录</h1>
          <el-table :data="pays" 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="付款单ID" align="center" prop="payShopId" />
            <el-table-column label="付款时间" align="center" prop="payTime" />
            <el-table-column label="付款方式" align="center" prop="bankNameType" />
            <el-table-column label="付款金额" align="center" prop="payAmount">
              <template slot-scope="{row}">
                ¥{{ row.payAmount | amountfilters }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="refund-item">
          <h1 class="refund-item-title">退款记录</h1>
          <el-table :data="returns" 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="退款记录ID" align="center" prop="unit" />
            <el-table-column label="退款时间" align="center" prop="num" />
            <el-table-column label="退款方式" align="center" prop="returnNum" />
            <el-table-column label="退款金额" align="center" prop="price" />
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { organizeReturnAndPay } from '@/api/finance'
export default {
  name: 'PaymentRecord',
  filters: {
    statusFilter(status) {
      const map = {
        0: '待付款',
        1: '已付款',
        2: '审核不通过'
      }
      return map[status]
    }
  },
  data() {
    return {
      shopOrder: {},
      pays: [],
      returns: []
    }
  },
  computed: {
    shopOrderId: function() {
      return this.$route.query.shopOrderId * 1
    }
  },
  created() {
    this.organizeReturnAndPay()
  },
  methods: {
    async organizeReturnAndPay() {
      try {
        const res = await organizeReturnAndPay(this.shopOrderId)
        this.shopOrder = res.data.shopOrder
        this.pays = res.data.pays
        console.log('pays', this.pays)
        this.returns = res.data.returns
      } catch (error) {
        console.log('error', error)
      }
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/finance/paysettle-list'
          })
        })
      })
    }
  }
}
</script>

<style scoped>
  .app-title{
    line-height: 36px;
    font-size: 26px;
    font-weight: bold;
    color: #409EFF;
    text-align: center;
  }
  .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;
  }
  .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>

