<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> {{ repacts.orderNo }}({{ repacts.orderId }})</el-col>
            <el-col :span="4"><b>下单时间：</b> {{ repacts.applyTime }}</el-col>
            <el-col :span="4"><b>机构名称：</b> {{ repacts.clubName }}</el-col>
            <el-col :span="4"><b>订单金额：</b> ¥{{ repacts.payableAmount }}</el-col>
            <el-col :span="4"><b>机构运费：</b>  <span>{{ repacts.postageInfo }}</span></el-col>
            <el-col :span="3"><b>订单状态：</b> 交易中</el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>应收金额：</b> ¥{{ repacts.payableAmount }}</el-col>
            <el-col :span="4"><b>已收金额：</b> ¥{{ repacts.payableAmount }}</el-col>
            <el-col :span="4"><b>应付金额：</b> ¥{{ repacts.payableAmount }}</el-col>
            <el-col :span="4"><b>已付金额：</b> ¥{{ repacts.payableAmount }}</el-col>
          </el-row>
          <el-row :gutter="24" class="box-row">
            <el-col :span="5"><b>收款状态：</b> {{ repacts.status | statusFilter }}</el-col>
            <el-col :span="4"><b>付款状态：</b> {{ repacts.status | statusFilter }}</el-col>
            <el-col :span="4"><b>退款状态：</b> {{ repacts.status | statusFilter }}</el-col>
            <el-col :span="4"><b>退款金额：</b> ¥{{ repacts.payableAmount }}</el-col>
          </el-row>
          <el-table :data="repacts.shopOrderIdList" border fit highlight-current-row default-expand-all :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
            <el-table-column label="商品信息" type="expand" width="80px">
              <template slot-scope="scope">
                <el-table :data="scope.row.products" border fit highlight-current-row :header-cell-style="{background:'#f9f9f9',color:'#606266'}">
                  <el-table-column label="商品名" align="center" prop="productName" />
                  <el-table-column label="规格" 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-column label="总价" align="center" prop="totalPrice" />
                </el-table>
              </template>
            </el-table-column>
            <el-table-column label="子订单编号(ID)" align="center" prop="shopOrderNos" width="240">
              <template slot-scope="scope">
                <span>{{ scope.row.shopOrderNos }}({{ scope.row.shopOrderIds }})</span>
              </template>
            </el-table-column>
            <el-table-column label="供应商" align="center" prop="shopName" />
            <el-table-column label="商品费" align="center" prop="payShopTotals" />
            <el-table-column label="已付供应商/合作方" align="center" prop="payShopTotals" />
            <el-table-column label="供应商退款" align="center" prop="payShopTotals" />
            <el-table-column label="应付供应商/合作方" align="center" prop="payShopTotals" />
            <el-table-column label="供应商运费" align="center" prop="payShopTotals" />
          </el-table>
        </div>
        <div class="refund-item">
          <h1 class="refund-item-title">付款记录</h1>
          <el-table :data="products" border fit highlight-current-row :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
            <el-table-column label="序号" align="center" prop="productName" />
            <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>
        <div class="refund-item">
          <h1 class="refund-item-title">退款记录</h1>
          <el-table :data="products" border fit highlight-current-row :header-cell-style="{background:'#e9f3f7',color:'#606266'}">
            <el-table-column label="序号" align="center" prop="productName" />
            <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 { getDetail, getRemarks } from '@/api/order'
export default {
  name: 'ShopRecord',
  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
      },
      payRepacts: {
        name: '卢海珠',
        account: '6214 8328 2826 4957 ',
        accountBank: '中国建设银行',
        accountType: '公账'
      },
      repacts: {
        id: 7580,
        name: '卢海珠',
        account: '6214 8328 2826 4957 ',
        accountBank: '中国建设银行',
        accountType: '公账',
        type: '子订单付款',
        shopName: '采美信息技术有限公司',
        payableAmount: '20000.00',
        shopOrderNo: 'P1682650952091471001',
        shopOrderId: '19747',
        orderNo: 'P16265095220221471',
        orderId: '18179',
        clubName: '广州白云区松洲蒂亚美容院',
        applyMan: '路海珠',
        applyTime: '2020-01-01:20:30:56',
        verifyMan: '李昕',
        verifyTime: '2020-01-01:20:30:56',
        status: 0,
        totalProduct: '3000.00',
        payShopTotal: '3000.00',
        childOrderId: ['P16265095220221471', 'P16265095220221471', 'P16265095220221471'],
        shopOrderIdList: [
          {
            shopName: '采美信息技术有限公司',
            shopOrderNos: 'P1682650952091471001',
            shopOrderIds: '19747',
            orderNos: 'P16265095220221471',
            orderIds: '18179',
            clubNames: '广州白云区松洲蒂亚美容院',
            applyMans: '路海珠',
            applyTimes: '2020-01-01:20:30:56',
            verifyMans: '李昕',
            verifyTimes: '2020-01-01:20:30:56',
            statuss: 0,
            totalProducts: '3000.00',
            payShopTotals: '3000.00',
            products: [
              {
                productName: '阶雪山之恋保滋润面霜吖',
                unit: '50ml',
                num: 3,
                returnNum: 0,
                price: '2000.00',
                totalPrice: '6000.00',
                costPrice: '1000.00',
                totalCostPrice: '3000.00'
              },
              {
                productName: '阶雪山之恋保滋润面霜吖',
                unit: '50ml',
                num: 3,
                returnNum: 0,
                price: '2000.00',
                totalPrice: '6000.00',
                costPrice: '1000.00',
                totalCostPrice: '3000.00'
              }
            ]
          }
        ]
      },
      products: [
        {
          productName: '阶雪山之恋保滋润面霜吖',
          unit: '50ml',
          num: 3,
          returnNum: 0,
          price: '2000.00',
          totalPrice: '6000.00',
          costPrice: '1000.00',
          totalCostPrice: '3000.00'
        },
        {
          productName: '阶雪山之恋保滋润面霜吖',
          unit: '50ml',
          num: 3,
          returnNum: 0,
          price: '2000.00',
          totalPrice: '6000.00',
          costPrice: '1000.00',
          totalCostPrice: '3000.00'
        },
        {
          productName: '阶雪山之恋保滋润面霜吖',
          unit: '50ml',
          num: 3,
          returnNum: 0,
          price: '2000.00',
          totalPrice: '6000.00',
          costPrice: '1000.00',
          totalCostPrice: '3000.00'
        },
        {
          productName: '阶雪山之恋保滋润面霜吖',
          unit: '50ml',
          num: 3,
          returnNum: 0,
          price: '2000.00',
          totalPrice: '6000.00',
          costPrice: '1000.00',
          totalCostPrice: '3000.00'
        }
      ],
      activeIndex: '2',
      order: null,
      receiptAmount: 0,
      returnValue: 0,
      returnedPurchaseFee: 0,
      bpClauses: null,
      dialogRemarkList: [],
      dialogRemarksVisible: false,
      dialogRemarksOrderId: 0,
      statusObj: {
        '0': '待确认',
        '4': '交易完成',
        '5': '订单完成',
        '6': '已关闭',
        '7': '交易全退',
        '11': '待收款、待发货',
        '12': '待收款、部分发货',
        '13': '待收款、全部发货',
        '21': '部分收款、待发货',
        '22': '部分收款、部分发货',
        '23': '部分收款、全部发货',
        '31': '全部收款、待发货',
        '32': '全部收款、部分发货',
        '33': '全部收款、全部发货'
      }
    }
  },
  computed: {
    orderID: function() {
      return this.$route.query.orderID * 1
    }
  },
  created() {
    // this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getDetail({ id: this.orderID }).then(response => {
        this.order = response.data.order
        this.bpClauses = response.data.bpClauses
        this.receiptAmount = response.data.receiptAmount
        this.returnValue = response.data.returnValue
        this.returnedPurchaseFee = response.data.returnedPurchaseFee
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    RemarksOrder: function(id) {
      getRemarks({ orderID: id }).then(response => {
        this.dialogRemarkList = response.data
      })
      this.dialogRemarksOrderId = id
      this.dialogRemarksVisible = true
    },
    backToList() {
      this.$store.dispatch('tagsView/delView', this.$route).then(() => {
        this.$nextTick(() => {
          this.$router.replace({
            path: '/finance/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;
  }
  /deep/ .el-table__expanded-cell[class*=cell]{
    padding:10px 10px !important;
  }
  /deep/ .el-table__row td {
    height: 34px !important;
    line-height: 34px !important;
    padding: 0 !important;
  }
</style>

