<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="5"
            ><b>订单编号(ID)：</b> {{ dataOrder.order.newShopOrders[0].shopOrderNo }}({{
              dataOrder.order.newShopOrders[0].shopOrderId
            }})</el-col>
            <el-col :span="4"><b>下单时间：</b> {{ dataOrder.order.newShopOrders[0].orderTime }}</el-col>
            <el-col :span="4"><b>机构名称：</b> {{ dataOrder.order.newShopOrders[0].clubName }}</el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5">
              <b>订单状态：</b>
              <template
                v-if="
                  ['11', '12', '13', '21', '22', '23', '31', '32', '33'].indexOf(
                    dataOrder.order.status
                  ) >= 0
                "
              >
                <el-tag type="success" size="small">交易中</el-tag>
              </template>
              <template v-else>
                <el-tag
                  :type="dataOrder.order.status * 1 === 6 ? 'info' : ''"
                  size="small"
                >{{ dataOrder.order.status | orderStatusFilter }}</el-tag>
              </template>
            </el-col>
            <el-col :span="4">
              <b>收款状态：</b>
              <el-tag
                v-if="dataOrder.order.newShopOrders[0].receiptStatus * 1 === 1"
                type="danger"
                size="small"
              >待收款</el-tag>
              <el-tag
                v-if="dataOrder.order.newShopOrders[0].receiptStatus * 1 === 2"
                type="warning"
                size="small"
              >部分收款</el-tag>
              <el-tag
                v-if="dataOrder.order.newShopOrders[0].receiptStatus * 1 === 3"
                type="success"
                size="small"
              >已收款</el-tag>
            </el-col>
            <el-col :span="4">
              <b>付款状态：</b>
              <el-tag
                v-if="dataOrder.order.newShopOrders[0].payStatus * 1 === 1"
                type="danger"
                size="small"
              >待付款</el-tag>
              <el-tag
                v-if="dataOrder.order.newShopOrders[0].payStatus * 1 === 2"
                type="warning"
                size="small"
              >部分付款</el-tag>
              <el-tag
                v-if="dataOrder.order.newShopOrders[0].payStatus * 1 === 3"
                type="success"
                size="small"
              >已付款</el-tag>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5">
              <b>收货人：</b>
              {{ dataOrder.order.receiver }}
            </el-col>
            <el-col :span="4">
              <b>手机：</b>
              {{ dataOrder.order.mobile }}</el-col>
            <el-col :span="15">
              <b>地址：</b>
              {{ dataOrder.order.address }}</el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col
              :span="5"
            ><b>订单金额：</b> ¥{{
              dataOrder.order.newShopOrders[0].totalAmount | amountfilters
            }}</el-col>
            <el-col
              :span="4"
            ><b>应收金额：</b> ¥{{
              dataOrder.order.newShopOrders[0].shouldPayShopAmount | amountfilters
            }}</el-col>
            <!-- <el-col :span="5">
              <b>运费：</b>
              <span>{{ dataOrder.order.postageInfo }}</span>
            </el-col> -->
            <el-col
              :span="4"
            ><b>退款金额：</b> ¥{{
              dataOrder.order.newShopOrders[0].refundsAmount | amountfilters
            }}</el-col>
          </el-row>
          <h1 class="refund-item-title">收款记录</h1>
          <el-table
            :data="dataOrder.receiptList"
            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="receiptId" />
            <el-table-column label="收款方式" align="center" prop="bankNameType" />
            <el-table-column label="收款金额" align="center" prop="receiptAmount">
              <template slot-scope="{ row }">
                ¥{{ row.receiptAmount | amountfilters }}
              </template>
            </el-table-column>
            <el-table-column label="收款时间" align="center" prop="receiptTime" />
          </el-table>
          <h1 class="refund-item-title">付款记录</h1>
          <el-table
            :data="dataOrder.payList"
            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="bankNameType" />
            <el-table-column label="付款金额" align="center" prop="payAmount">
              <template slot-scope="{ row }">
                ¥{{ row.payAmount | amountfilters }}
              </template>
            </el-table-column>
            <el-table-column label="付款时间" align="center" prop="payTime">
              <template slot-scope="{ row }">
                {{ row.payTime ? row.payTime : "---" }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

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

<style scoped lang="scss">
.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;
}
::v-deep .el-table__expanded-cell[class*="cell"] {
  padding: 10px 10px !important;
}
::v-deep .el-table__row td {
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 !important;
}
</style>
