<template>
  <div class="app-container">
    <div class="filter-container" style="text-align: right;">
      <el-button v-print="printObj" type="primary">打印</el-button>
      <el-button plain @click="backToList">返回</el-button>
    </div>
    <div id="printBox" style="margin: 0 auto;">
      <h1 class="app-title">退款单</h1>
      <el-card class="box-card" style="margin: 5px auto;">
        <div class="refund-item">
          <h1 class="refund-item-title">退款信息</h1>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>退款编号：</b> {{ cmReturnedPurchase.returnedNo }}</el-col>
            <el-col :span="5"><b>申请时间：</b> {{ cmReturnedPurchase.returnTime }}</el-col>
            <el-col :span="4"><b>申请金额：</b> ¥{{ cmReturnedPurchase.refundFee | amountfilters }} </el-col>
            <!-- <el-col :span="4"><b>退款审核状态：</b>
              <el-tag v-if="cmReturnedPurchase.status*1===1" type="warning" size="small">待审核</el-tag>
              <el-tag v-if="cmReturnedPurchase.status*1===2" type="success" size="small">审核通过</el-tag>
              <el-tag v-if="cmReturnedPurchase.status*1===3" type="danger" size="small">审核不通过</el-tag>
            </el-col> -->
          </el-row>
          <h1 class="refund-item-title">退款方式</h1>
          <el-row :gutter="24" class="box-row">
            <el-col v-if="cmReturnedPurchase.returnedWay*1===4" :span="4"><b>未支付无退款</b> </el-col>
            <template v-else-if="cmReturnedPurchase.returnedWay*1===1">
              <template v-if="cmReturnedPurchase.refundOnlineFee*1 !== 0">
                <el-col :span="5">
                  <b>线上退回:</b>
                  <span>¥{{ cmReturnedPurchase.refundOnlineFee | amountfilters }}</span>
                </el-col>
              </template>
              <template v-if="cmReturnedPurchase.refundOfflineFee*1 !== 0">
                <el-col :span="5">
                  <b>线下转账：</b>
                  <span>¥{{ cmReturnedPurchase.refundOfflineFee | amountfilters }}</span>
                </el-col>
                <!-- <el-col :span="4"><b>开户名：</b><span>{{ cmReturnedPurchase.bankAccountName }}</span> </el-col>
                <el-col :span="4"><b>账号：</b> <span>{{ cmReturnedPurchase.bankAccountNo }}</span> </el-col>
                <el-col :span="4"><b>开户行：</b> <span>{{ cmReturnedPurchase.openBank }}</span> </el-col>
                <el-col :span="4"><b>账户类型：</b> <span>{{ cmReturnedPurchase.bankAccountType*1 === 1 ? '公账' : '私账' }}</span> </el-col> -->
              </template>
            </template>
            <span v-else>----</span>
          </el-row>
        </div>
      </el-card>
      <el-card ref="print" class="box-card" style="margin: 5px auto;">
        <div class="refund-item">
          <!-- <el-row :gutter="24" class="box-row">
            <el-col :span="5">
              <b>订单编号(ID)：</b>{{ orderData.orderNo }}({{ orderData.orderId }})
            </el-col>
            <el-col :span="5">
              <b>下单时间：</b>{{ orderData.orderTime }}
            </el-col>
            <el-col :span="5">
              <b>订单状态：</b>
              <template v-if="['11','12','13','21','22','23','31','32','33'].indexOf(orderData.status)>=0">
                <el-tag type="success" size="small">交易中({{ orderData.status | orderStatusFilter }})</el-tag>
              </template>
              <template v-else>
                <el-tag :type="orderData.status*1===6?'info':''" size="small">{{ orderData.status | orderStatusFilter }}</el-tag>
              </template>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>订单金额：</b> ¥{{ orderData.payTotalFee }}</el-col>
            <el-col :span="5"><b>应收金额：</b> ¥{{ orderData.payableAmount }}</el-col>
            <el-col :span="14"><b>机构运费：</b>
              <span>{{ orderData.postageInfo }}</span>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5">
              <b>收款状态：</b>
              <el-tag v-if="orderData.receiptStatus*1===1" type="danger" size="small">待收款</el-tag>
              <el-tag v-if="orderData.receiptStatus*1===2" type="warning" size="small">部分收款</el-tag>
              <el-tag v-if="orderData.receiptStatus*1===3" type="success" size="small">已收款</el-tag>
            </el-col>
            <el-col :span="5">
              <b>发货状态：</b>
              <el-tag v-if="orderData.sendOutStatus*1===1" type="danger" size="small">待发货</el-tag>
              <el-tag v-if="orderData.sendOutStatus*1===2" type="warning" size="small">部分发货</el-tag>
              <el-tag v-if="orderData.sendOutStatus*1===3" type="success" size="small">已发货</el-tag>
            </el-col>
            <el-col :span="5">
              <b>付款状态：</b>
              <el-tag v-if="orderData.payStatus*1===1" type="danger" size="small">待付款</el-tag>
              <el-tag v-if="orderData.payStatus*1===2" type="warning" size="small">部分付款</el-tag>
              <el-tag v-if="orderData.payStatus*1===3" type="success" size="small">已付款</el-tag>
            </el-col>
            <el-col :span="5">
              <b>退款状态：</b>
              <el-tag v-if="orderData.refundType*1===1" type="warning" size="small">部分退款</el-tag>
              <el-tag v-if="orderData.refundType*1===2" type="success" size="small">全部付款</el-tag>
              <el-tag v-else type="info" size="small">无退款</el-tag>
            </el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>机构名称：</b> {{ orderData.clubName }}</el-col>
            <el-col :span="5"><b>收货人：</b> {{ orderData.receiver }}({{ orderData.mobile }})</el-col>
            <el-col :span="14"><b>地址：</b> {{ orderData.address }}</el-col>
          </el-row> -->
          <el-table :data="orderData.newShopOrders" border fit highlight-current-row default-expand-all :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
            <el-table-column label="商品信息" type="expand" width="110">
              <template slot-scope="{row}">
                <el-table :data="row.newOrderProducts" border fit highlight-current-row :header-cell-style="{background:'#f9f9f9',color:'#606266'}">
                  <el-table-column label="商品图片" align="center" prop="productImage" width="100">
                    <template slot-scope="scope">
                      <el-popover
                        placement="top-start"
                        title=""
                        width="120"
                        trigger="hover"
                      >
                        <img :src="scope.row.productImage" alt="" style="width:100px;height:100px;">
                        <img slot="reference" :src="scope.row.productImage" alt="" style="width:50px;height:50px;">
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column label="商品名" align="center" prop="name" />
                  <el-table-column label="规格" align="center" prop="unit" />
                  <el-table-column label="购买数量" align="center" prop="num" width="100" />
                  <el-table-column label="单价" align="center" prop="price" />
                  <el-table-column label="总额" align="center" prop="totalAmount" />
                  <el-table-column label="已发货" align="center" prop="sendOutNum" width="100" />
                  <el-table-column label="已退货" align="center" prop="returnedPurchaseProductNum" width="100" />
                  <el-table-column label="本次退货" align="center" prop="actualReturnedNum" width="100" />
                  <el-table-column label="待发货" align="center" prop="notOutStore" width="100" />
                  <el-table-column label="已取消" align="center" prop="cancelProductNum" width="100" />
                  <el-table-column label="本次取消" align="center" prop="actualCancelNum" width="100" />
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNo">
              <template slot-scope="{row}">
                <span>{{ row.shopOrderNo }}({{ row.shopOrderId }})</span>
              </template>
            </el-table-column>
            <el-table-column label="子订单金额" align="center" prop="totalAmount" />
            <el-table-column label="发货状态" align="center" prop="sendOutStatus">
              <template slot-scope="{row}">
                <el-tag v-if="row.sendOutStatus*1===1" type="danger" size="small">待发货</el-tag>
                <el-tag v-if="row.sendOutStatus*1===2" type="warning" size="small">部分发货</el-tag>
                <el-tag v-if="row.sendOutStatus*1===3" type="success" size="small">已发货</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="退款状态" align="center" prop="receiptStatus">
              <template slot-scope="{row}">
                <el-tag v-if="row.refundType*1===1" type="warning" size="small">部分退款</el-tag>
                <el-tag v-if="row.refundType*1===2" type="success" size="small">全部付款</el-tag>
                <el-tag v-else type="info" size="small">无退款</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="运费" align="center" prop="postageInfo" />
            <el-table-column label="供应商" align="center" prop="shopName" />
          </el-table>
        </div>
      </el-card>
      <!-- <el-card ref="print" class="box-card" style="margin: 5px auto;">
        <div class="refund-item">
          <h1 class="refund-item-title">审核信息</h1>
          <el-row :gutter="24" class="box-row">
            <el-col :span="6">
              <b>审核时间：</b>
              {{ cmReturnedPurchase.confirmReturnTime ? cmReturnedPurchase.confirmReturnTime :'--' }}
            </el-col>
            <el-col :span="11">
              <b>审核备注：</b>
              {{ cmReturnedPurchase.reviewRemarks ? cmReturnedPurchase.reviewRemarks :'无' }}
            </el-col>
          </el-row>
        </div>
      </el-card> -->
      <el-card ref="print" class="box-card" style="margin: 5px auto;">
        <div class="refund-item">
          <h1 class="refund-item-title">申请信息</h1>
          <el-row :gutter="24" class="box-row">
            <el-col :span="6">
              <b>申请时间：</b>
              {{ cmReturnedPurchase.returnTime ? cmReturnedPurchase.returnTime :'--' }}
            </el-col>
            <el-col :span="11">
              <b>退款备注：</b>
              {{ cmReturnedPurchase.remarks ? cmReturnedPurchase.remarks :'无' }}
            </el-col>
          </el-row>
        </div>
      </el-card>
      <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="14"><b>申请退款金额：</b>￥{{ cmReturnedPurchase.refundFee }}元</el-col>
            <el-col :span="5"><b>财务签名：</b> </el-col>
            <el-col :span="5"><b>总经理签名：</b> </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getRefundDetail } from '@/api/order'
export default {
  name: 'RefundRecord',
  filters: {
    statusFilter(status) {
      const map = {
        0: '待付款',
        1: '已付款',
        2: '审核不通过'
      }
      return map[status]
    }
  },
  data() {
    return {
      printObj: {
        id: 'printBox', // 局部打印的<div> Id
        popTitle: '', // 打印配置页上方标题
        extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签,使用逗号分隔
        preview: '', // 是否启动预览模式，默认是false（开启预览模式，可以先预览后打印）
        previewTitle: '', // 打印预览的标题（开启预览模式后出现）,
        previewPrintBtnLabel: '', // 打印预览的标题的下方按钮文本，点击可进入打印（开启预览模式后出现）
        zIndex: '', // 预览的窗口的z-index，默认是 20002（此值要高一些，这涉及到预览模式是否显示在最上面）
        previewBeforeOpenCallback() {}, // 预览窗口打开之前的callback（开启预览模式调用）
        previewOpenCallback() {}, // 预览窗口打开之后的callback（开启预览模式调用）
        beforeEntryIframe() {
          const cells = document.querySelectorAll('.cell')
          const tableNode = document.querySelectorAll('.el-table__header,.el-table__body')
          // el-table 打印不全的问题
          for (let j = 0; j < tableNode.length; j++) {
            const tableItem = tableNode[j]
            tableItem.style.width = '100%'
            const child = tableItem.childNodes
            for (let i = 0; i < child.length; i++) {
              const element = child[i]
              if (element.localName === 'colgroup') {
                element.innerHTML = ''
              }
            }
          }
          // el-table 格子里面打印超过格子的问题
          for (let i = 0; i < cells.length; i++) {
            const cell = cells[i]
            cell.style.width = '100%'
            cell.removeAttribute('style')
          }
        },
        openCallback() {

        }, // 调用打印之后的回调事件
        closeCallback() {}, // 关闭打印的回调事件（无法确定点击的是确认还是取消）
        url: '',
        standard: '',
        extraCss: '',
        loading: false
      },
      orderData: {}, // 订单信息
      cmReturnedPurchaseList: [], // 退款信息
      cmReturnedPurchase: {}// 审核信息
    }
  },
  computed: {

  },
  created() {
    this.getRefundDetail(this.$route.query.id)
  },
  methods: {
    async getRefundDetail() {
      try {
        const res = await getRefundDetail(this.$route.query.id)
        this.orderData = res.data
        this.cmReturnedPurchaseList.push(res.data.cmReturnedPurchase)
        this.cmReturnedPurchase = res.data.cmReturnedPurchase
      } catch (error) {
        console.log('error', error)
      }
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/order/refund'
          })
        })
      })
    }
  }
}
</script>

<style scoped lang="scss">
  .app-title{
    line-height: 32px;
    font-size: 24px;
    font-weight: bold;
    color: #409EFF;
    text-align: center;
    margin: 10px 0;
  }
  .box-card{
    margin-top: 20px;
    font-size: 14px;
  }
  .box-row{
    padding: 10px 0;
  }
  .box-row .dropdown{
    margin-top: -10px;
  }
  .refund-item{
    padding: 5px 0;
  }
  .refund-item-title{
    line-height: 24px;
    font-size: 14px;
    color: #409EFF;
    margin: 0;
  }
  .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-card__body{
    padding: 5px 20px !important;
  }
</style>

