<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] z-[1] relative">
      <!-- 商品主图 -->
      <div class="h-[640rpx]">
        <nut-swiper :auto-play="3000" @change="onChange" :is-prevent-default="false">
          <nut-swiper-item v-for="(item, index) in serviceDetail?.images" :key="index" class="h-full">
            <img :src="item" alt="" class="h-[640rpx] w-full object-contain" draggable="false" @click.stop="showFn" />
          </nut-swiper-item>
          <template #page>
            <div
              class="w-[76rpx] h-[44rpx] bg-[#545255] absolute bottom-[36rpx] right-[16rpx] flex items-center justify-center rounded-full text-[#FDFDFD] text-[28rpx]">
              {{ val }}/{{ serviceDetail?.images.length }}
            </div>
          </template>
        </nut-swiper>
      </div>

      <div class="rounded-[29rpx_29rpx_0_0] bg-white pt-[26rpx] pl-[30rpx] pr-[34rpx] pb-[30rpx] mt-[-20rpx] relative z-2">
        <div class="flex items-center justify-between">
          <div>
            <nut-price :price="serviceDetail?.price" size="large" class="font-700 price-custom mr-[20rpx]" />
            <span class="text-[#2E333166] font-400 text-[36rpx]">起</span>
          </div>
          <div class="flex flex-col">
            <img src="/images/product/wechat.png" alt="" class="w-[56rpx] h-[56rpx]" />
            <span class="text-[#43C93E] text-[32rpx] font-500">分享</span>
          </div>
        </div>

        <h1 class="text-[44rpx] mt-[26rpx] mb-[20rpx] font-500">{{ serviceDetail?.title }}</h1>
        <p class="text-[30rpx] text-[#666] font-400">{{ serviceDetail?.serviceTime }}</p>
      </div>

      <div class="mt-[20rpx]">
        <img :src="serviceDetail?.detail" alt="">
      </div>
    </div>
    <div class="py-[16rpx] px-[30rpx] flex items-center mt-auto">
      <a class="flex flex-col text-[#1D86FF] text-[28rpx] justify-center items-center" :href="`tel:${serviceDetail?.contactPhone}`">
        <PhoneCall :stroke-width="1" fill="#1D86FF" class="mb-[4rpx]" />
        <span>电话咨询</span>
      </a>
      <div class="rounded-[20rpx] text-white bg-[#28BEBB] text-[40rpx] font-500 flex-auto py-[26rpx] text-center ml-[24rpx]" @click="toCheckoutPage">立即预约</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useRoute } from "vue-router";
  import { useGetServiceDetail } from "@/composables/useHealthCheck";
  import { PhoneCall } from "lucide-vue-next";
  import { useRouter } from "vue-router";
  import { useShoppingCartStore } from "@/store/shoppingCart";
import { CartTypeEnum } from "@/types/cart";

  const route = useRoute();
  const router = useRouter();
  const id = route.params.id;

  const { serviceDetail } = useGetServiceDetail();

  const val = ref(1);
  const onChange = (index: number) => {
    val.value = index + 1;
  };
  const showFn = () => {
    console.log("showFn");
  };

  const shoppingCartStore = useShoppingCartStore();
  const toCheckoutPage = () => {
    shoppingCartStore.addShoppingCart({
      type: CartTypeEnum.HealthCare,
      id:serviceDetail.value.id,
      name:serviceDetail.value.title,
      price:serviceDetail.value.price,
      count:1,
      cover:serviceDetail.value.cover,
      desc:serviceDetail.value.serviceTime
    })
    router.push({path:"/checkout/health-care",query:{id}})
  }
</script>

<style lang="scss" scoped>
  .price-custom {
    --nut-price-symbol-big-size: 26px;
    --nut-price-big-size: 40px;
    --nut-price-decimal-big-size: 24px;
  }
</style>
