<template>
  <div class="flex flex-col w-full h-full bg-[#f5f5f5]">
    <div class="w-full grid grid-cols-2 bg-white">
      <div
        v-for="(item, index) in tabs"
        :key="item.name"
        class="h-[110rpx] bg-white flex items-center justify-center relative"
        :class="activeTab === index ? 'tab-custom' : ''"
        @click="handleTabClick(index)">
        <svg class="w-[120rpx] h-[100rpx] z-2">
          <text x="50%" y="30%" text-anchor="middle" dominant-baseline="hanging" class="text-[#333] animate-stroke text-[52rpx] font-900 italic custom-stroke">
            {{ item.name }}
          </text>
        </svg>
        <img :src="item.icon" alt="icon" class="w-[100rpx] h-[100rpx] z-2" />
        <div
          class="w-[234rpx] h-[16rpx] absolute bottom-[10rpx] left-50% bg-[#28BEBB] skew-x-[-15deg] translate-x-[-50%] z-[1]"
          v-show="activeTab === index"></div>
      </div>
    </div>

    <nut-list :list-data="wrapperFoodList" @scroll-bottom="onScrollBottom" class="mt-[30rpx] flex-1 min-h-0 overflow-auto" v-if="activeTab === 0">
      <template #default="{ item }">
        <div class="h-[256rpx] bg-white mx-[30rpx] rounded-[20rpx] flex mb-[30rpx]">
          <img :src="item.image" alt="food" class="h-full aspect-square rounded-[20rpx_0_0_20rpx]" @click="toDetail(item)" />
          <div class="px-[30rpx] pt-[30rpx] pb-[34rpx] flex-auto">
            <p class="text-[40rpx] font-500">{{ item.name }}</p>
            <p class="text-[30rpx] font-400 text-[#666] mb-[36rpx] mt-[20rpx]">{{ item.desc }}</p>

            <div class="flex items-center justify-between">
              <div class="flex items-baseline">
                <nut-price :price="item.price" :decimal-places="2" size="large" class="font-600" />
                <span class="text-[28rpx] font-400 text-[#adafaf]">/份</span>
              </div>
              <nut-input-number v-model="item.orderCount" :readonly="true" @reduce="(event) => handleMinus(event, item)" @add="handlePlus(item)" :min="0">
                <template #left-icon>
                  <div class="w-[60rpx] h-[60rpx] 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-[60rpx] h-[60rpx] 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>

    <nut-list :list-data="wrapperFoodSetList" @scroll-bottom="onScrollBottom" class="mt-[30rpx] flex-1 min-h-0 overflow-auto" v-if="activeTab === 1">
      <template #default="{ item }">
        <div class="rounded-[20rpx] bg-white mx-[30rpx] mb-[30rpx] flex flex-col pb-[20rpx]">
          <img :src="item.image" alt="food" class="w-full h-[360rpx] rounded-[20rpx_20rpx_0_0] object-contain" @click="toDetail(item)" />
          <div class="mx-[30rpx] mt-[20rpx] text-[40rpx] font-500">{{ item.name }}</div>
          <div class="mx-[30rpx] text-[30rpx] font-400 text-[#666] mb-[24rpx] mt-[10rpx]">{{ item.desc }}</div>
          <div class="mx-[30rpx] flex items-center justify-between">
            <div class="flex items-baseline">
              <nut-price :price="item.price" :decimal-places="2" size="large" class="font-600" />
              <span class="text-[28rpx] font-400 text-[#adafaf]">/份</span>
            </div>
            <nut-input-number v-model="item.orderCount" :readonly="true" @reduce="(event) => handleMinus(event, item)" @add="handlePlus(item)" :min="0">
              <template #left-icon>
                <div class="w-[60rpx] h-[60rpx] 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-[60rpx] h-[60rpx] bg-[#28BEBB] rounded-full flex items-center justify-center">
                  <Plus :stroke-width="3" class="text-white" />
                </div>
              </template>
            </nut-input-number>
          </div>
        </div>
      </template>
    </nut-list>

    <RestaurantCart class="mx-[30rpx] my-[16rpx]" />
  </div>
</template>

<script lang="ts" setup>
  import { Plus, Minus } from "lucide-vue-next";
  import { useRestaurantFoodList, foodList, useRestaurantFoodSet, foodSetList } from "@/composables/useRestaurant";
  import RestaurantCart from "@/components/restaurant-cart/index.vue";
  import { useShoppingCartStore } from "@/store/shoppingCart";
  import { useRouter } from "vue-router";
  import { CartTypeEnum } from "@/types/cart";

  const router = useRouter();

  const shoppingCartStore = useShoppingCartStore();

  const tabs = [
    { name: "单点", icon: "/images/mine/bowl.png" },
    { name: "套餐", icon: "/images/mine/plate.png" },
  ];

  const activeTab = ref(0);

  useRestaurantFoodList();
  useRestaurantFoodSet();

  const wrapperFoodList = computed(() => {
    const list = toRaw(foodList.value);

    let flag = shoppingCartStore.getShoppingCartByRestaurant.length === 0;
    list.forEach((item) => {
      if (flag) {
        item.orderCount = 0;
      } else {
        shoppingCartStore.getShoppingCartByRestaurant.forEach((cart) => {
          if (item.id === cart.id) {
            item.orderCount = Number(cart.count);
          }
        });
      }
    });
    return [...list];
  });

  const wrapperFoodSetList = computed(() => {
    const list = toRaw(foodSetList.value);
    let flag = shoppingCartStore.getShoppingCartByRestaurant.length === 0;
    list.forEach((item) => {
      if (flag) {
        item.orderCount = 0;
      } else {
        shoppingCartStore.getShoppingCartByRestaurant.forEach((cart) => {
          if (item.id === cart.id) {
            item.orderCount = Number(cart.count);
          }
        });
      }
    });
    return [...list];
  });

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

  const handleTabClick = (index: number) => {
    activeTab.value = index;
  };
  const handleMinus = (_event: any, item: any) => {
    const orderCount = Number(item.orderCount) - 1;

    if (orderCount <= 0) {
      shoppingCartStore.removeShoppingCart(item.id);
      return;
    }
    shoppingCartStore.updateShoppingCart(item.id, {
      type: CartTypeEnum.Restaurant,
      name: item.name,
      price: item.price,
      count: orderCount,
      cover: item.image,
      id: item.id,
      desc: item.desc,
    });
  };

  const handlePlus = (item: any) => {
    shoppingCartStore.addShoppingCart({
      type: CartTypeEnum.Restaurant,
      name: item.name,
      price: item.price,
      count: 1,
      cover: item.image,
      id: item.id,
      desc: item.desc,
    });
  };

  const toDetail = (item: any) => {
    router.push({ name:'restaurant-detail',params:{id:item.id} });
  };
</script>

<style scoped lang="scss">
  .tab-custom {
    --circle-size: 20px;
    --circle-color: #f5f5f5;
    background: linear-gradient(to bottom, #9be1e0 0%, #f5f5f5 82%);

    &:nth-child(1) {
      border-top-right-radius: 20px;

      &::after {
        content: "";
        position: absolute;
        z-index: 2;
        width: var(--circle-size); /* 设置宽度 */
        height: var(--circle-size); /* 设置高度 */
        bottom: 0; /* 设置底部对齐 */
        right: calc(var(--circle-size) * -1); /* 设置右边位置 */
        background: radial-gradient(circle at var(--circle-size) 0, transparent var(--circle-size), var(--circle-color) var(--circle-size));
      }
    }
    &:nth-child(2) {
      border-top-left-radius: 20px;

      &::before {
        content: "";
        position: absolute;
        z-index: 2;
        width: var(--circle-size); /* 设置宽度 */
        height: var(--circle-size); /* 设置高度 */
        bottom: 0; /* 设置底部对齐 */
        left: calc(var(--circle-size) * -1); /* 设置左边位置 */
        background: radial-gradient(circle at 0 0, transparent var(--circle-size), var(--circle-color) var(--circle-size));
      }
    }
  }

  .custom-stroke {
    fill: #333;
    stroke: #fff;
    stroke-width: 5;
    paint-order: stroke;
  }

  .nut-input-number {
    --nut-inputnumber-input-background-color: #fff;
    --nut-inputnumber-input-margin: 0;
    --nut-inputnumber-input-font-size: 18px;
  }
</style>
