<template>
  <view class="h-screen overflow-hidden bg-slate-50 flex flex-col">
    <TopNavBar
      title="商品详情"
      subtitle="费用说明与购买须知"
      title-align="left"
      background="#ffffff"
      @back="emit('back')"
    />

    <scroll-view class="min-h-0 flex-1" scroll-y>
      <image class="h-[280px] w-full bg-slate-200" :src="product.images && product.images[0]" mode="aspectFill" />

      <view class="mx-[12px] -mt-[14px] rounded-[16px] bg-white p-[16px]">
        <text v-if="product.shortTitle" class="block text-[13px] text-slate-500">{{ product.shortTitle }}</text>
        <text class="mt-[4px] block text-[20px] font-bold leading-[28px] text-slate-900">{{ product.name }}</text>
        <view class="mt-[10px] flex flex-wrap gap-[6px]">
          <text v-for="highlight in product.highlights || []" :key="highlight" class="rounded-[5px] bg-violet-50 px-[7px] py-[3px] text-[11px] text-violet-700">{{ highlight }}</text>
        </view>
        <view class="mt-[14px] flex items-end justify-between">
          <text class="text-[12px] text-slate-400">已售 {{ product.sold || 0 }}</text>
          <view class="flex items-end">
            <text v-if="product.marketPrice" class="mr-[8px] text-[12px] text-slate-400 line-through">¥{{ product.marketPrice }}</text>
            <text class="text-[14px] font-medium text-[#f26b32]">¥<text class="text-[28px] font-bold">{{ product.salePrice }}</text></text>
          </view>
        </view>
      </view>

      <view class="mx-[12px] mt-[12px] rounded-[16px] bg-white p-[16px]">
        <text class="block text-[16px] font-semibold text-slate-800">费用包含</text>
        <text v-for="item in product.included || []" :key="item" class="mt-[10px] block text-[14px] leading-[20px] text-slate-600">· {{ item }}</text>
        <text v-if="!(product.included || []).length" class="mt-[10px] block text-[14px] text-slate-400">以商品说明为准</text>
      </view>

      <view class="mx-[12px] mt-[12px] rounded-[16px] bg-white p-[16px]">
        <text class="block text-[16px] font-semibold text-slate-800">费用不含</text>
        <text v-for="item in product.excluded || []" :key="item" class="mt-[10px] block text-[14px] leading-[20px] text-slate-600">· {{ item }}</text>
        <text v-if="!(product.excluded || []).length" class="mt-[10px] block text-[14px] text-slate-400">无</text>
      </view>

      <view class="mx-[12px] mt-[12px] rounded-[16px] bg-white p-[16px]">
        <text class="block text-[16px] font-semibold text-slate-800">商品详情</text>
        <text class="mt-[10px] block text-[14px] leading-[22px] text-slate-600">{{ product.detail || product.description || '暂无商品详情' }}</text>
      </view>

      <view class="mx-[12px] mb-[20px] mt-[12px] rounded-[16px] bg-white p-[16px]">
        <text class="block text-[16px] font-semibold text-slate-800">购买须知</text>
        <text class="mt-[10px] block text-[14px] leading-[22px] text-slate-600">{{ product.purchaseNotice || '请以实际预约规则为准。' }}</text>
      </view>
    </scroll-view>

    <view class="shrink-0 border-t border-slate-100 bg-white px-[16px] pb-[calc(env(safe-area-inset-bottom)+10px)] pt-[10px]">
      <view class="flex items-center justify-between">
        <view>
          <text class="text-[12px] text-slate-500">优惠价</text>
          <text class="ml-[4px] text-[14px] font-medium text-[#f26b32]">¥<text class="text-[25px] font-bold">{{ product.salePrice }}</text>起</text>
        </view>
        <view class="rounded-full bg-[#f26b32] px-[28px] py-[11px]" @click="emit('buy', product.id)">
          <text class="text-[15px] font-semibold text-white">去预订</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import TopNavBar from "@/components/TopNavBar/index.vue"

defineProps({
  product: { type: Object, required: true },
})

const emit = defineEmits(['back', 'buy'])
</script>
