<template>
	<view class="content">

		<view class="row" style="width: 100%; margin-top: 100rpx; align-items: center; justify-content: space-between;">
			<view class="center" style="width: 50rpx; height: 50rpx; margin-left: 32rpx;">
				<image src="/static/ic_back.png" @click="back" style="width: 48rpx; height: 48rpx;" mode=""></image>
			</view>
			<text style="font-size: 30rpx;">{{ title }}</text>
			<view style="width: 50rpx;margin-right: 32rpx;"></view>
		</view>

		<view class="" style="width: 100%; flex: 1; overflow-y: auto; margin-top: 28rpx;">
			<!-- 详情图片 -->
			<image v-if="detailImage" :src="detailImage" style="width: 100%;" mode="widthFix" @error="handleImageError">
			</image>
			<view v-else class="center" style="width: 100%; height: 400rpx; background-color: #f5f5f5;">
				<text style="color: #999;">{{ loading ? $t('common.loading') : '暂无详情图片' }}</text>
			</view>
		</view>

		<view class="center" @click="toEntry()"
			style="width: 600rpx; height: 92rpx; background-color: #1DB6D1; position: fixed; bottom: 54rpx; border-radius: 10rpx; font-size: 32rpx; color: white;">
			{{ $t('reserveDetails.reserve') }}
		</view>

	</view>
</template>

<script>
	import Config from '@/modules/Config.js'

	export default {
		data() {
			return {
				id: '',
				title: '',
				detailImage: '',
				serviceType: '',
				loading: true
			}
		},
		onLoad(options) {
			this.id = options.id || ''
			this.title = decodeURIComponent(options.title || '')
			this.serviceType = decodeURIComponent(options.serviceType || '')
			if (this.id) {
				this.loadHotServiceDetail()
			} else {
				this.loading = false
			}
		},
		methods: {
			/**
			 * 加载热门服务详情
			 */
			async loadHotServiceDetail() {
				try {
					uni.request({
						url: Config.API_BASE_URL + '/api/v1/home/hot-services',
						method: 'GET',
						header: {
							'Accept-Language': this.$i18n?.locale || 'zh'
						},
						success: (res) => {
							if (res.statusCode === 200 && res.data.code === 0) {
								const service = res.data.data.find(item => item.id == this.id)
								if (service && service.detail_image) {
									this.detailImage = Config.getImageUrl(service.detail_image)
								}
							}
							this.loading = false
						},
						fail: (error) => {
							console.error('加载热门服务详情失败:', error)
							this.loading = false
						}
					})
				} catch (error) {
					console.error('加载热门服务详情失败:', error)
					this.loading = false
				}
			},

			handleImageError(e) {
				console.error('详情图片加载失败:', e)
				this.detailImage = ''
			},

			back() {
				uni.navigateBack({
					delta: 1,
					animationType: 'slide-out-right',
					animationDuration: 300
				});
			},

			toEntry() {
				// 服务类型到页面的映射
				const servicePageMap = {
					'flight': 'airfare-info-entry-page',
					'hotel': 'hotel-reservation-page',
					'lounge': 'vip-lounge-page',
					'airport_transfer': 'airport-transfer-page',
					'unaccompanied_minor': 'unaccompanied-minor-page',
					'rail_ticket': 'rail-ticket-page',
					'medical_consultation': 'medical-consultation-page',
					'special_passenger': 'special-needs-page',
					'pet_transportation': 'pet-transportation-page',
					'guide_translation': 'guide-translation-page',
					'visa_consultation': 'visa-consultation-page',
					'exhibition_service': 'exhibition-service-page',
					'air_logistics': 'air-logistics-page',
					'sea_freight': 'sea-freight-page',
					'travel_planning': 'travel-planning-page',
					'insurance_consultation': 'insurance-consultation-page'
				}
				
				const pageName = servicePageMap[this.serviceType]
				
				if (pageName) {
					// source=hot 表示来自热门服务
					uni.navigateTo({
						url: `/pages/appointment/${pageName}?id=${this.id}&source=hot&title=${encodeURIComponent(this.title)}`
					});
				} else {
					// 未知服务类型，使用通用提示
					uni.showToast({
						title: '该服务暂未开放预约',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #F7F7F7;
	}
</style>