<template>
  <view class="order-totalCount">
    <text class="totalCount"
      >共{{ item.skuCount }}种{{ item.goodsCount }}件商品</text
    >
    <view>
      {{
        item.vendorPayPercentage != 0
          ? item.vendorPayPercentage < 50
            ? '实际支付:'
            : '实际收入:'
          : isPointStore
          ? '实际支付:'
          : '实际收入:'
      }}<jx-real-income :orderData="item" color="#585858" />
    </view>

    <!-- 预定单 -->
    <view class="preIcon" v-if="item.businessType === 2">预订单</view>
  </view>
</template>

<script lang="ts" setup>
import { store } from '@/store'
import { computed } from 'vue'

interface PropsType {
  item: any
}
defineProps<PropsType>()

const isPointStore = computed(() => {
  return store.getters['storeInfo/isPointStore']
})
</script>

<style lang="scss" scoped>
// 商品数量
.order-totalCount {
  display: flex;
  align-items: center;
  padding: 15rpx;
  border-bottom: 2rpx dashed #e7e7e7;
  color: #585858;

  .play-money {
    margin-left: 30rpx;
  }

  .totalCount {
    margin-right: 25rpx;
  }
}

.preIcon {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4rpx 20rpx 6rpx 20rpx;
  font-size: 26rpx;
  color: #fff;
  border-radius: 0 0 0 10rpx;
  background-color: #ff702c;
}

@keyframes enlarge {
  0% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(0.9);
  }
}
</style>