<template>
  <ul class="px-[30rpx] bg-[#f5f5f5] flex-auto w-full min-h-0 overflow-auto pb-[20rpx]">
    <li class="p-[20rpx] rounded-[20rpx] bg-white w-full mt-[30rpx]" v-for="(item, index) in shoppingCartList" :key="index">
      <div class="flex">
        <img :src="item.cover" alt="cover" class="w-[192rpx] h-[192rpx] rounded-[20rpx]" />
        <div class="flex flex-col ml-[16rpx] justify-between">
          <div class="text-[40rpx] font-500">{{ item.name }}</div>
          <div class="text-[30rpx] text-[#666] font-400 mt-[10rpx]">{{ item.desc }}</div>
        </div>
      </div>
      <div class="flex justify-between items-center mt-[30rpx]">
        <div class="text-[32rpx] text-[#333] font-400">产品单价</div>
        <nut-price :price="item.price" size="normal" class="text-[36rpx] font-500" />
      </div>
      <div class="flex justify-between items-center mt-[22rpx]">
        <div class="text-[32rpx] text-[#333] font-400">购买数量</div>
        <nut-input-number v-model="item.count" readonly :min="0" @overlimit="(event, type) => handleOverLimit(event, type, item)"/>
      </div>
    </li>
  </ul>

  <div class="flex pl-[24rpx] py-[16rpx] pr-[30rpx] items-center justify-between">
    <nut-price :price="totalPrice" size="large" class="font-500" />
    <div class="w-[416rpx] h-[100rpx] rounded-[20rpx] bg-[#28BEBB] text-white text-[44rpx] font-600 flex items-center justify-center" @click="toPayment">立即支付</div>
  </div>
</template>

<script lang="ts" setup>
  import { useShoppingCartStore } from "@/store/shoppingCart";
import { CartTypeEnum } from "@/types/cart";
  import { useRouter } from "vue-router";

  const router = useRouter();

  const shoppingCartStore = useShoppingCartStore();
  const shoppingCartList  = ref(shoppingCartStore.getShoppingCartByMall);  

  const totalPrice = computed(() => {
    return shoppingCartList.value.reduce((acc, item) => acc + item.price * item.count, 0);
  });

  const toPayment = () => {
    router.push({ path: "/checkout/payment", query: { type: CartTypeEnum.Mall } });
  };
  const handleOverLimit = (_event:any,type:string,item:any) => {
    if(type === "reduce"){      
      shoppingCartStore.removeShoppingCart(item.id);
    }
  };
</script>

<style lang="scss" scoped>
  :deep(.nut-input-number) {
    --nut-inputnumber-height: 32px;
    --nut-inputnumber-input-margin: 0 2px;
    --nut-inputnumber-input-border-radius: 0;

    & .nut-input-number__icon {
      height: 32px;
      width: 32px;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    & :nth-child(1) {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }

    & :nth-child(3) {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
</style>
