<template>
    <div class="h-[120rpx] rounded-full bg-[#25262A] flex">
      <nut-badge :value="shoppingCartTotal" top="10" right="5" @click="showShoppingCart">
        <img src="/images/checkout/basket.png" alt="" class="w-[100rpx] h-[100rpx] ml-[30rpx] my-[10rpx]" />
      </nut-badge>
      <div class="flex-1 min-w-0 flex flex-col justify-center ml-[6rpx]">
        <nut-price :price="shoppingCartTotalPrice" size="normal" class="font-700 custom-price mb-[6rpx]" />
        <div class="flex items-center text-white text-[26rpx]">
          <div class="mr-[10rpx]">含运费 ¥{{ shippingFee }}</div>
          <div>打包费 ¥{{ packingFee }}</div>
        </div>
      </div>
      <div class="checkout-button w-[224rpx] relative text-white flex items-center justify-center" @click="handleCheckoutBtn">
        <div class="text-white z-2 text-[40rpx] font-600">去结算</div>
      </div>
  
    </div>
  </template>
  
  <script lang="ts" setup>
    import { packingFee, shippingFee } from "@/composables/useRestaurant";
    import { useShoppingCartStore } from "@/store/shoppingCart";
  
    const shoppingCartStore = useShoppingCartStore();
    const shoppingCartTotal = computed(() => {
      return shoppingCartStore.getShoppingCartByRestaurant.reduce((total, item) => total + Number(item.count), 0);
    });
  
    const shoppingCartTotalPrice = computed(() => {
      return shoppingCartStore.getShoppingCartByRestaurant.reduce((total, item) => total + item.price * item.count, 0);
    });
  
    const emit = defineEmits(["showShoppingCart","handleCheckoutBtn"]);
    const showShoppingCart = () => {
      emit("showShoppingCart");
    };

    const handleCheckoutBtn = () => {
      emit("handleCheckoutBtn");
    };
  </script>
  
  <style scoped lang="scss">
    .custom-price {
      --nut-price-symbol-medium-size: 18px;
      --nut-price-decimal-medium-size: 18px;
      --nut-price-medium-size: 24px;
      --nut-primary-color: #fff;
    }
  
    .checkout-button {
      &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 50px;
        bottom: 0;
        border-radius: 20px 100% 100% 20px;
        background: #f68e1d;
        transform: skewX(-15deg);
        z-index: 1;
      }
  
      &::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 0 113px 113px 0;
        width: 80%;
        height: 100%;
        background: #f68e1d;
        z-index: 1;
      }
    }
  </style>
  