<template>
  <nut-list v-if="carte.length > 0" :list-data="carte" @scroll-bottom="onScrollBottom" class="mt-[30rpx] flex-1 min-h-0 overflow-auto">
    <template #default="{ item }">
      <div class="bg-white mx-[30rpx] rounded-[20rpx] flex mb-[30rpx]">
        <img :src="item.cover" alt="food" class="h-[176rpx] aspect-square rounded-[20rpx_0_0_20rpx] object-cover" />
        <div class="px-[20rpx] flex-auto flex flex-col justify-between">
          <p class="text-[40rpx] font-500">{{ item.name }}</p>
          <p class="text-[30rpx] font-400 text-[#666] mb-[26rpx] mt-[10rpx]">{{ item.desc }}</p>

          <div class="flex items-center justify-between">
            <div class="flex items-baseline">
              <nut-price :price="item.price" :decimal-places="2" size="normal" class="font-600" />
              <span class="text-[28rpx] font-400 text-[#adafaf]">/份</span>
            </div>

            <nut-input-number v-model="item.count" :readonly="true" @reduce="(event) => handleMinus(event, item)" @add="handlePlus(item)" :min="0">
              <template #left-icon>
                <div class="w-[52rpx] h-[52rpx] bg-white rounded-full flex items-center justify-center border-[#28BEBB] border-[4rpx] border-solid">
                  <Minus :stroke-width="3" class="text-[#28BEBB]" />
                </div>
              </template>
              <template #right-icon>
                <div class="w-[52rpx] h-[52rpx] bg-[#28BEBB] rounded-full flex items-center justify-center">
                  <Plus :stroke-width="3" class="text-white" />
                </div>
              </template>
            </nut-input-number>
          </div>
        </div>
      </div>
    </template>
  </nut-list>
  <div v-else class="flex-1 min-h-0 overflow-auto flex items-center justify-center">
    <p class="text-[32rpx] font-500">暂无商品</p>
  </div>
</template>

<script lang="ts" setup>
  import { Plus, Minus } from "lucide-vue-next";
  import { useShoppingCartStore } from "@/store/shoppingCart";

  const shoppingCartStore = useShoppingCartStore();

  defineProps({
    carte: {
      type: Array as PropType<any[]>,
      default: () => [],
    },
  });

  const onScrollBottom = () => {
    console.log("onScrollBottom");
  };

  const handleMinus = (_event: any, item: any) => {
    const orderCount = Number(item.count) - 1;
    if(orderCount <= 0){
      shoppingCartStore.removeShoppingCart(item.id);
    }
  };

  const handlePlus = (_item: any) => {
    // console.log("handlePlus", item);
  };
</script>

<style scoped lang="scss">
  .nut-input-number {
    --nut-inputnumber-input-background-color: #fff;
    --nut-inputnumber-input-margin: 0;
    --nut-inputnumber-input-font-size: 18px;
    --nut-inputnumber-input-width: 20px;
  }
</style>
