<template>
  <div class="component-order-prod-table">
    <table>
      <thead>
        <tr>
          <th style="width: 380px;">
            商品信息
          </th>
          <th>sku编码</th>
          <th>单价</th>
          <th>数量</th>
          <th>售后</th>
          <th>小计</th>
        </tr>
      </thead>
      <tbody
        class="body-list"
      >
        <tr
          v-for="(item, index) in orderInfo.orderItems"
          :key="index"
        >
          <td>
            <div class="df">
              <ImgShow
                :src="item.supplierPic"
                :img-style="{width:'60px',height:'60px'}"
              />
              <div class="name">
                {{ item.supplierSpuName + ' ' + (item.supplierSkuName === null?' ':item.supplierSkuName) }}
                <div
                  v-if="
                    item.returnMoneySts &&
                      item.returnMoneySts < 6 &&
                      item.returnMoneySts > 0
                  "
                  class="order-status"
                >
                  {{
                    [
                      "",
                      $t("order.order.buyerApplication"),
                      $t("order.order.sellerAccepts"),
                      $t("order.order.selShipment"),
                      $t("order.order.sellerReceiving"),
                      $t("order.order.refundsuccessfully"),
                    ][item.returnMoneySts]
                  }}
                </div>
              </div>
            </div>

            <!-- 组合 -->
            <div
              v-if="item.comboItemList"
              class="order-prod-item-give-con"
            >
              <div
                v-for="(combo, comboIndex) in item.comboItemList"
                :key="comboIndex"
                class="giveaway-item"
              >
                <span class="giveaway-item-name">【组合】{{ combo.spuName }}</span>
                <span
                  v-if="combo.supplierSkuName"
                  class="giveaway-item-name sku"
                >{{ combo.supplierSkuName }}</span>
                <span class="giveaway-item-sku-count">×{{ combo.count }}</span>
              </div>
            </div>
          </td>
          <td>
            <span>{{ item.partyCode }}</span>
          </td>
          <td>
            <span>￥{{ onHandlerSpuTotalAmount(item.spuTotalAmount, item.count) }}</span>
          </td>

          <td>
            <span>{{ item.count }}</span>
          </td>
          <td>
            <span v-if="item.refundStatus && item.refundStatus !== 4">
              {{ ['',
                  $t('order.order.refundApplication'),
                  $t('order.order.refundsuccessfully'),
                  $t('order.order.partialRefundSucc')][item.refundStatus] }}
            </span>
            <span v-else>
              {{ $t('order.order.noAfterSales') }}
            </span>
          </td>
          <td>
            <span>￥{{ onHandlerPrice(item.spuTotalAmount) }}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import Big from 'big.js'

const props = defineProps({
  dataForm: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

// 精度运算-过滤
const onHandlerPrice = (val) => {
  if (val == null) {
    return ''
  }
  return new Big(val).div(100).toFixed(2)
}

// 过滤
const onHandlerSpuTotalAmount = (val, count) => {
  if (val == null) {
    return ''
  }
  return new Big(val).div(100).div(count).toFixed(2)
}

const orderInfo = computed(() => {
  const { dataForm } = props
  return dataForm
})

</script>

<style scoped lang="scss">
@use "../../index";
.component-order-prod-table {
  table {
    border-collapse: collapse;
    letter-spacing: 1px;
    width: 100%;
    border-spacing: inherit;
    border: 1px solid #eaecef;

    th {
      border: 1px solid #eaecef;
      padding: 8px 12px;
      color: rgb(144, 147, 153);
      font-size: 14px;
      user-select: none;
    }

    .body-list {
      tr {
        td {
          text-align: center;
          border: 1px solid #eaecef;
          padding: 8px 12px;
        }

        &:hover {
          background-color: rgb(245, 247, 250);
        }
      }
    }
  }

  .order-status {
    display: inline-block;
    width: auto;
    text-align: center;
    margin-top: 5px;
    padding: 0 4px;
    border: 1px solid #e43130;
    border-radius: 2px;
    color: #e43130;
    font-size: 12px;
    margin-right: 3px;
  }

  // 赠品盒子
  .order-prod-item-give-con {
    width: 100%;
    padding: 10px 50px 0 63px;
    box-sizing: border-box;

    .giveaway-item {
      text-align: left;
      display: flex;
      align-items: center;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .giveaway-item-name {
      margin-right: 5px;
      box-sizing: border-box;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }

    .giveaway-item-name.sku {
      color: grey;
    }

    .giveaway-item-sku-count {
      white-space: nowrap;
      margin-left: 10px;
      color: #999;
    }
  }
}
</style>
