<!--
 Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

 https://www.mall4j.com/

 未经允许，不可做商业用途！

 版权所有，侵权必究！
-->
<template>
  <!-- 财务对账 -->
  <div class="Mall4j box">
    <div class="manage-check">
      <div class="title">
        <span class="manage-title">{{ $t('finance.billingDetails.settlementDetails') }}</span>
        <span>

          <el-tooltip
            class="item"
            effect="dark"
            placement="right"
          >

            <template #content><div class="title-con-pit">

              <p>如果一笔订单进行整单退款或每个订单项都已经退款完成，那么会立即结算给商家。其他情况皆为确认收货15天后进行结算；</p>
              <p>&nbsp;</p>
              <p>名词解释：</p>
              <p>- 购买数量：用户购买商品数量，不包含售后数量；</p>
              <p>- 商品总金额：商品原价*购买数量，不包含售后金额；</p>
              <p>- 用户支付金额：扣除平台优惠(平台优惠券优惠、会员折扣优惠、积分抵扣金额)、店铺优惠(优惠券、满减折、秒杀优惠、团购优惠、优惠套餐、订单改价)，商品实际支付的金额；</p>
              <p>- 商家优惠金额：商品使用店铺优惠总和，包含商家改价金额；</p>
              <p>- 平台优惠金额：商品使用平台优惠总和，成本由平台承担，在结算时补偿给商家；</p>
              <p>&nbsp;&nbsp;&nbsp;商家未改价：平台优惠金额=平台优惠券优惠+会员折扣优惠+积分抵扣金额</p>
              <p>&nbsp;&nbsp;&nbsp;商家改价：平台优惠金额=原平台优惠-(商品减少金额/商品原价*(平台优惠券优惠+会员折扣优惠+积分抵扣金额))</p>
              <p>- 平台津贴减少金额：商家改价减少的平台优惠金额；</p>
              <p>&nbsp;&nbsp;&nbsp;商家改价：平台津贴减少金额=商品减少金额/商品原价*(平台优惠券优惠+会员折扣优惠+积分抵扣金额)</p>
              <p>- 分销金额：商家支付给分销员的佣金；</p>
              <p>&nbsp;&nbsp;&nbsp;按比例奖励：分销金额=商品扣除平台优惠支付金额*分销奖励比例</p>
              <p>&nbsp;&nbsp;&nbsp;按固定数值奖励：分销金额=固定数值奖励，商品扣除平台优惠支付金额如果小于奖励数值，分销金额为0</p>
              <p>- 使用积分：用户在支付时使用的积分；</p>
              <p>类目扣率：该商品签约分类的对应扣率；</p>
              <p>- 平台佣金：商品所属类目产生销售时需支付给平台的佣金；</p>
              <p>每件商品的平台佣金=（商品实付金额+平台优惠券优惠+会员折扣优惠+积分抵扣金额）*类目扣率；</p>
              <p>- 积分抵扣金额：用户使用积分抵扣的金额，根据平台端的使用比例和抵扣比例计算；</p>
              <p>- 会员折扣金额：会员等级特权中折扣产生的优惠金额，成本由平台承担，在结算时补偿给商家；</p>
              <p>- 平台优惠券优惠金额：商品使用了平台优惠券减免的金额，成本由平台承担，在结算时补偿给商家；</p>
              <p>- 商家优惠券优惠金额：商品使用了店铺优惠券减免的金额，成本由商家承担；</p>
              <p>- 满减优惠金额：商品参加满减、满折活动减免的金额，成本由商家承担；</p>
              <p>- 拼团优惠金额：商品参加拼团活动减免的金额，成本由商家承担；</p>
              <p>- 秒杀优惠金额：商品参加秒杀活动减免的金额，成本由商家承担；</p>
              <p>- 套餐优惠金额：商品参加优惠套餐活动减免的金额，成本由商家承担；</p>
              <p>- 店铺改价金额：用户提交订单后商家更改商品的金额；</p>
              <p>- 退款金额：订单发生售后，用户申请的退款金额；</p>
              <p>- 退款数量：订单发生售后，用户申请的退款数量；</p>
              <p>- 运费：计算优惠时，不包含运费；</p>
              <p>&nbsp;&nbsp;&nbsp;商家改运费：用户提交订单后商家更改订单运费金额</p>
              <p>&nbsp;&nbsp;&nbsp;直营店包邮：用户等级特权中包邮产生的优惠金额，成本由平台承担，在结算时补偿给商家</p>
            </div></template>
            <span style="font-size:14px;color:#155bd4;cursor:pointer;">{{ $t('finance.billingDetails.settlementDescription') }}<el-icon><QuestionFilled /></el-icon></span>
          </el-tooltip>
        </span>
      </div>
      <div class="table">
        <el-table
          :data="data.tableData"
          style="width: 100%;margin-bottom: 20px;"
          row-key="id"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          default-expand-all
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
          <el-table-column
            prop="shopName"
            :label="$t('finance.billingDetails.consignmentMerchant')"
            align="center"
          />
          <el-table-column
            prop="supplierSpuName"
            :label="$t('finance.billingDetails.tradeName')"
            align="center"
          />
          <el-table-column
            prop="spuTotalAmount"
            :label="$t('finance.billingDetails.goodsTotalAmount')"
            align="center"
          >
            <template #default="scope">
              <span>￥ {{ handlerPrice(scope.row.spuTotalAmount) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="actualTotal"
            :label="$t('finance.billingDetails.userPaymentAmount')"
            align="center"
          >
            <template #default="scope">
              <span>￥ {{ handlerPrice(scope.row.actualTotal) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('finance.billingDetails.supplyUnitPrice')"
            align="center"
          >
            <template #default="scope">
              <span>￥ {{ handlerPrice(scope.row.itemPurchaseAmount / scope.row.count) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="count"
            :label="$t('finance.billingDetails.quantity')"
            align="center"
          >
            <template #default="scope">
              <span>{{ scope.row.count || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="platformShareReduce"
            :label="$t('multishop.shopWalletLog.platformSubsidies')"
            align="center"
          >
            <template #default="scope">
              <span>￥ {{ handlerPrice(scope.row.platformShareReduce) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="refundAmount"
            :label="$t('finance.billingDetails.refundAmount')"
            align="center"
          >
            <template #default="scope">
              <span>￥ {{ handlerPrice(scope.row.refundAmount) || 0 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="supplierRate"
            :label="$t('finance.billingDetails.supplierRate')"
            width="130"
            align="center"
          >
            <template #default="scope">
              <span>{{ scope.row.supplierRate }}%</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="purchasePlatformCommission"
            :label="$t('finance.billingDetails.purchasePlatformCommission')"
            width="140"
            align="center"
          >
            <template #default="scope">
              <span>￥ {{ handlerPrice(scope.row.purchasePlatformCommission) }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div
        v-if="data.freightAmount"
        class="freight-con"
      >
        {{ $t('finance.billingDetails.freight') }}： ￥{{ handlerPrice(data.freightAmount) }}
      </div>
      <div
        v-if="data.freeFreightAmount"
        class="freight-con"
      >
        {{ $t('finance.billingDetails.freeFreightAmount') }}： ￥{{ handlerPrice(data.freeFreightAmount) }}
      </div>
      <div
        v-if="data.platformFreeFreightAmount"
        class="freight-con"
      >
        {{ $t('finance.billingDetails.platformFreeFreightAmount') }}： ￥{{ handlerPrice(data.platformFreeFreightAmount) }}
      </div>
      <div class="back">
        <el-button
          type="primary"
          @click="back"
        >
          {{ $t('finance.billingDetails.backPreviousPage') }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { orderDetaiList } from '@/api/multishop/shop_wallet_log'
import Big from 'big.js'

const orderId = ref(useRoute().query.orderId)
const refundId = ref(useRoute().query.refundId || '')

const data = ref({
  freightAmount: 0,
  tableData: []
})

onMounted(() => {
  getData(orderId.value, refundId.value)
})

// 获取订单详情
const getData = (orderIdVal, refundIdVal) => {
  orderDetaiList(orderIdVal, refundIdVal).then(res => {
    data.value.freightAmount = res.freightAmount
    data.value.freeFreightAmount = res.freeFreightAmount ? res.freeFreightAmount : 0
    data.platformFreeFreightAmount = res.platformFreeFreightAmount ? res.platformFreeFreightAmount : 0
    data.value.tableData = res.orderItemDetailList
  })
}
const router = useRouter()
const back = () => {
  router.back()
}
/**
 * 精度运算-过滤
 */
const handlerPrice = (val) => {
  if (val == null) {
    return ''
  }
  return new Big(val).div(100).toFixed(2)
}

</script>

<style lang="scss" scoped>
  .box {
    padding: 24px;
    width: 100%;
    height: 100%;
  }
 .manage-check {
   background: #FFFFFF;
   width: 100%;
   padding: 0;
   .title {
     font-size: 18px;
     margin-bottom: 16px;
     display: flex;
     justify-content: space-between;
     .manage-title {
       font-weight: bold;
     }
   }
 }
 .table {
   margin-top: 20px;
 }
  .title-con-pit{
  max-height:80vh ;
  max-width: 80vw;
  overflow-y: auto;
  }
  .freight-con {
    margin: 10px 0;
  }
</style>
