<template>
	<view class="container">
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<text class="loading-text">{{ $t('common.loading') || '加载中...' }}</text>
		</view>

		<!-- 服务详情 -->
		<view v-else-if="service" class="content">
			<!-- 服务图片 -->
			<view class="service-image-wrapper">
				<image 
					v-if="service.image"
					:src="getImageUrl(service.image)" 
					class="service-image" 
					mode="aspectFill"
					@error="handleImageError">
				</image>
				<view v-else class="service-image-placeholder">
					<text class="placeholder-icon">📷</text>
					<text class="placeholder-text">暂无图片</text>
				</view>
			</view>

			<!-- 服务信息 -->
			<view class="service-info">
				<text class="service-name">{{ getServiceName(service) }}</text>
				<text class="service-description">{{ getServiceDescription(service) }}</text>
			</view>

			<!-- 预约按钮 -->
			<view class="action-bar">
				<button class="book-button" @click="handleBook">
					{{ $t('appointment.bookNow') || '立即预约' }}
				</button>
			</view>
		</view>

		<!-- 错误状态 -->
		<view v-else class="error-container">
			<text class="error-text">{{ $t('common.loadFailed') || '加载失败' }}</text>
			<button class="retry-button" @click="loadServiceDetail">{{ $t('common.retry') || '重试' }}</button>
		</view>
	</view>
</template>

<script>
import { AppServer } from '@/modules/api/AppServer.js'
import Config from '@/modules/Config.js'

export default {
	data() {
		return {
			serviceKey: '',
			service: null,
			loading: false,
			currentLanguage: 'zh'
		}
	},
	onLoad(options) {
		if (options.key) {
			this.serviceKey = options.key
			this.currentLanguage = uni.getStorageSync('language') || 'zh'
			this.loadServiceDetail()
		} else {
			uni.showToast({
				title: '服务Key缺失',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
	},
	methods: {
		// 加载服务详情
		async loadServiceDetail() {
			this.loading = true
			try {
				const appserver = new AppServer()
				const response = await appserver.GetServiceByKey(this.serviceKey, this.currentLanguage)
				
				console.log('服务详情响应:', response)
				
				if (response.code === 0 && response.data) {
					this.service = response.data
				} else {
					console.error('获取服务详情失败:', response.message)
					uni.showToast({
						title: response.message || '获取服务详情失败',
						icon: 'none'
					})
					this.service = null
				}
			} catch (error) {
				console.error('加载服务详情异常:', error)
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
				this.service = null
			} finally {
				this.loading = false
			}
		},
		
		// 获取服务名称
		getServiceName(service) {
			if (!service) return ''
			// 后端返回的是 title 字段，已经根据语言格式化
			return service.title || ''
		},
		
		// 获取服务描述
		getServiceDescription(service) {
			if (!service) return ''
			// 后端返回的是 description 字段，已经根据语言格式化
			return service.description || ''
		},
		
		// 获取完整的图片 URL
		getImageUrl(imagePath) {
			if (!imagePath) return ''
			if (imagePath.startsWith('http')) return imagePath
			// 如果是相对路径，拼接 API 基础地址
			const baseUrl = Config.API_BASE_URL || 'http://localhost:3000'
			return `${baseUrl}${imagePath}`
		},
		
		// 处理预约
		handleBook() {
			if (!this.service) return
			
			// 跳转到预约表单页面（需要创建）
			uni.navigateTo({
				url: `/pages/booking-form/booking-form?serviceId=${this.serviceId}`
			})
		},
		
		// 处理图片加载错误
		handleImageError() {
			console.error('图片加载失败:', this.service.image)
			this.service.image = null
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: #f5f5f5;
}

.loading-container,
.error-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 200rpx 40rpx;
}

.loading-text,
.error-text {
	font-size: 28rpx;
	color: #999;
	margin-bottom: 40rpx;
}

.retry-button {
	width: 200rpx;
	height: 70rpx;
	line-height: 70rpx;
	background-color: #17a2b8;
	color: #fff;
	border-radius: 35rpx;
	font-size: 28rpx;
	text-align: center;
}

.content {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding-bottom: 120rpx;
}

.service-image-wrapper {
	width: 100%;
	height: 400rpx;
	background-color: #f0f0f0;
	position: relative;
}

.service-image {
	width: 100%;
	height: 100%;
}

.service-image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
}

.placeholder-icon {
	font-size: 100rpx;
	opacity: 0.5;
	margin-bottom: 20rpx;
}

.placeholder-text {
	font-size: 28rpx;
	color: #999;
}

.service-info {
	display: flex;
	flex-direction: column;
	padding: 40rpx;
	background-color: #fff;
}

.service-name {
	font-size: 36rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 30rpx;
}

.service-description {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
}

.action-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx 40rpx;
	background-color: #fff;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	z-index: 100;
}

.book-button {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	background: linear-gradient(135deg, #17a2b8 0%, #138496 100%);
	color: #fff;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-weight: 600;
	text-align: center;
	border: none;
}

.book-button::after {
	border: none;
}
</style>
