<template>
  <div class="flex flex-col min-h-screen bg-white pb-safe">
    <div class="flex-auto min-h-0 overflow-y-auto bg-[#f5f5f5]">
      <!-- 商品主图 -->
      <div class="h-[640rpx]">
        <nut-swiper :auto-play="3000" @change="onChange" :is-prevent-default="false">
          <nut-swiper-item v-for="(item, index) in foodDetail?.cover" :key="index" class="h-full">
            <img :src="item" alt="" class="h-[640rpx] object-cover" draggable="false" @click.stop="showFn" />
          </nut-swiper-item>
          <template #page>
            <div
              class="w-[76rpx] h-[44rpx] bg-[#545255] absolute bottom-[16rpx] right-[16rpx] flex items-center justify-center rounded-full text-[#FDFDFD] text-[28rpx]">
              {{ val }}/4
            </div>
          </template>
        </nut-swiper>
      </div>

      <div class="mx-[20rpx] rounded-[20rpx] bg-white px-[30rpx] py-[20rpx] mt-[20rpx]">
        <h1 class="text-[44rpx] font-500">{{ foodDetail?.name }}</h1>
        <p class="text-[#666] text-[30rpx] font-400 my-[20rpx]">分量{{ foodDetail?.weight }}</p>
        <div class="flex justify-between">
          <div class="flex items-baseline">
            <nut-price :price="foodDetail?.price" class="font-600 food-price mr-[6rpx]"></nut-price>
            <span class="text-[#abadad] text-[28rpx] font-400">/份</span>
          </div>
          <nut-button class="w-[248rpx]! add-btn rounded-full! flex" shape="square" @click="addToCart">
            <div class="flex items-center">
              <Plus class="w-[32rpx] h-[32rpx] mr-[6rpx]" stroke-width="4" />
              加入购物车
            </div>
          </nut-button>
        </div>
      </div>

      <img :src="foodDetail?.detail" alt="" class=" object-contain px-[30rpx] mt-[20rpx]" />
    </div>

    <RestaurantCart class="mx-[20rpx] my-[16rpx]" />

    <nut-image-preview :show="state.showPreview" :images="state.imgData" @close="hideFn" />
  </div>
</template>

<script lang="ts" setup>
  import { useShoppingCartStore } from "@/store/shoppingCart";
  import RestaurantCart from "@/components/restaurant-cart/index.vue";
  import { useRestaurantFoodDetail } from "@/composables/useRestaurant";
  import { Plus } from "lucide-vue-next";

  import { CartTypeEnum } from "@/types/cart";

  const val = ref(1);

  const { foodDetail } = useRestaurantFoodDetail();

  const onChange = (index: number) => {
    val.value = index + 1;
  };

//   const productionImgs = ref<string[]>([]);

  const state = reactive<{ showPreview: boolean; imgData: { src: string }[] }>({
    showPreview: false,
    imgData: [],
  });
  const showFn = () => {
    state.showPreview = true;
  };
  const hideFn = () => {
    state.showPreview = false;
  };

  const shoppingCartStore = useShoppingCartStore();
  const shoppingCount = ref(shoppingCartStore.getShoppingCartByMall.map((item) => item.count).reduce((a, b) => Number(a) + Number(b), 0));

  shoppingCartStore.$subscribe((_mutation, state) => {
    shoppingCount.value = state.shoppingCartList
      .filter((item) => item.type === CartTypeEnum.Mall)
      .map((item) => Number(item.count))
      .reduce((a, b) => Number(a) + Number(b), 0);
  });

  const addToCart = () => {
    shoppingCartStore.addShoppingCart({
      type: CartTypeEnum.Restaurant,
      id: foodDetail.value.id,
      count: 1,
      name: foodDetail.value.name,
      price: foodDetail.value.price,
      cover: foodDetail.value.cover[0],
    });
  };
</script>

<style lang="scss" scoped>
  .food-price {
    --nut-price-symbol-medium-size: 16px;
    --nut-price-medium-size: 28px;
    --nut-price-decimal-medium-size: 21px;
  }

  .add-btn {
    --nut-button-default-font-size: 15px;
    --nut-button-default-padding: 8px 10px;
    --nut-button-default-bg-color: #28bebb;
    --nut-button-default-color: #fff;
    --nut-button-default-height: auto;
  }
</style>
