<template>
  <div class="flex flex-col">
    <div class="relative">
      <img :src="nursingDetail.coverImage" alt="cover" class="w-full h-[560rpx]" />
      <div
        class="w-[152rpx] h-[64rpx] rounded-full bg-[#00000099] text-[32rpx] text-[#FDFDFD] flex items-center justify-center absolute bottom-[34rpx] right-[30rpx] z-2" @click="toImagesPage">
        <Image :stroke-width="1.5" />
        相册
      </div>
    </div>
    <div class="rounded-[29rpx_29rpx_0_0] bg-white pt-[26rpx] pl-[30rpx] pr-[34rpx] pb-[30rpx] mt-[-20rpx]">
      <div class="flex items-center justify-between">
        <div>
          <nut-price :price="nursingDetail.price?.amount" size="large" class="font-700 price-custom mr-[20rpx]" />
          <span class="text-[#2E333166] font-400 text-[36rpx]">{{ nursingDetail.price?.unit }}</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">{{ nursingDetail.name }}</h1>

      <div class="bg-[#F3F6FF] rounded-[20rpx] flex items-center pl-[24rpx]">
        <div class="text-[34rpx] text-[#333] leading-[48rpx]">{{ nursingDetail.location?.address }}</div>
        <img src="/images/map/map-check.png" alt="" class="w-[218rpx] h-136rpx" />
      </div>
    </div>

    <div class="w-full h-[20rpx] bg-[#F5F5F5]"></div>

    <div class="bg-white px-[30rpx] py-[34rpx]">
      <div class="flex items-center">
        <img src="/images/nursing/nursing-icon.png" alt="icon" class="w-[48rpx] h-[48rpx] mr-[10rpx]" />
        <span class="text-[36rpx] font-500">机构简介</span>
      </div>
      <article class="text-[#333] text-[30rpx] mt-[16rpx] leading-[48rpx]">{{ nursingDetail?.description }}</article>
    </div>

    <div class="py-[16rpx] px-[30rpx] flex items-center mt-auto">
      <div class="flex flex-col text-[#1D86FF] text-[28rpx] justify-center items-center">
        <PhoneCall :stroke-width="1" fill="#1D86FF" class="mb-[4rpx]" />
        <span>电话咨询</span>
      </div>
      <div class="rounded-[20rpx] text-white bg-[#28BEBB] text-[40rpx] font-500 flex-auto py-[26rpx] text-center ml-[24rpx]">立即预约</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useRoute, useRouter } from "vue-router";
  import { useNursingDetail } from "@/composables/useNursing";
  import { Image, PhoneCall } from "lucide-vue-next";

  const route = useRoute();
  const router = useRouter();
  const id = route.params.id;
  console.log(id);
  
  const { nursingDetail } = useNursingDetail();

  const toImagesPage = () => {
    console.log(1234);

    router.push({
      name: "jinze-images",
      params: {
        id: nursingDetail.value.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>
