<template>
	<view class="content">

		<view class="header-title">
			{{ $t('appointment.allServices') }}
		</view>

		<view class="divider"></view>

		<view class="main-container">

			<view class="category-sidebar">

				<view 
					class="category-item" 
					v-for="(category, index) in categories" 
					:key="category.key" 
					@click="clickType(index, category.key)"
					:class="{ 'category-item-active': currentIndex === index }">
					<view class="category-indicator" v-if="currentIndex === index"></view>
					<text class="category-text">{{ getCategoryName(category) }}</text>
				</view>

			</view>
			
			<view class="divider-vertical"></view>

			<view class="service-list">

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

				<!-- 服务列表 -->
				<view v-else-if="services.length > 0" class="service-items">
					<view class="service-item" v-for="service in services" :key="service.key" @click="goToServiceDetail(service)">

						<view class="service-image-wrapper">
							<image 
								v-if="service.image"
								:src="getImageUrl(service.image)"
								class="service-image"
								mode="aspectFill"
								@error="handleImageError(service)"></image>
							<view v-else class="service-image-placeholder">
								<text class="placeholder-icon">📷</text>
							</view>
						</view>

						<text class="service-title">{{ getServiceName(service) }}</text>

					</view>
				</view>

				<!-- 空状态 -->
				<view v-else class="empty-container">
					<text class="empty-text">{{ $t('common.noData') || '暂无服务' }}</text>
				</view>

			</view>

		</view>

	</view>
</template>

<script>
	import { updateTabBarI18n } from '@/utils/tabbar-i18n.js'
	import { AppServer } from '@/modules/api/AppServer.js'
	import Config from '@/modules/Config.js'
	import { isLoggedIn, requireAuth } from '@/utils/auth.js'
	
	export default {
		data() {
			return {
				currentIndex: 0,
				currentCategoryKey: null,
				categories: [],
				services: [],
				loading: false,
				currentLanguage: 'zh'
			}
		},
		onLoad() {
			// 获取当前语言
			this.currentLanguage = uni.getStorageSync('language') || 'zh'
			// 加载分类和服务
			this.loadCategories()
		},
		onShow() {
			updateTabBarI18n(this)
			this.checkUnreadNotifications()
		},
		methods: {
			// 加载分类列表
			async loadCategories() {
				try {
					const appserver = new AppServer()
					const response = await appserver.GetCategories({ language: this.currentLanguage })
					
					console.log('分类列表响应:', response)
					
					if (response.code === 0 && response.data) {
						this.categories = response.data.categories || response.data || []
						
						// 默认选中第一个分类
						if (this.categories.length > 0) {
							this.currentIndex = 0
							this.currentCategoryKey = this.categories[0].key
							this.loadServices(this.currentCategoryKey)
						}
					} else {
						console.error('获取分类失败:', response.message)
						uni.showToast({
							title: response.message || '获取分类失败',
							icon: 'none'
						})
					}
				} catch (error) {
					console.error('加载分类异常:', error)
					uni.showToast({
						title: '加载分类失败',
						icon: 'none'
					})
				}
			},
			
			// 加载服务列表
			async loadServices(categoryKey) {
				this.loading = true
				try {
					const appserver = new AppServer()
					const params = {
						language: this.currentLanguage
					}
					// 只有当 categoryKey 有值时才传递
					if (categoryKey) {
						params.categoryKey = categoryKey
					}
					const response = await appserver.GetServices(params)
					
					console.log('服务列表响应:', response)
					
					if (response.code === 0 && response.data) {
						this.services = response.data.services || response.data || []
					} else {
						console.error('获取服务失败:', response.message)
						this.services = []
					}
				} catch (error) {
					console.error('加载服务异常:', error)
					this.services = []
				} finally {
					this.loading = false
				}
			},
			
			// 点击分类
			clickType(index, categoryKey) {
				this.currentIndex = index
				this.currentCategoryKey = categoryKey
				this.loadServices(categoryKey)
			},
			
			// 获取分类名称（根据当前语言）
			getCategoryName(category) {
				if (!category) return ''
				// 后端返回的是单个 name 字段，已经根据语言格式化
				return category.name || ''
			},
			
			// 获取服务名称（根据当前语言）
			getServiceName(service) {
				if (!service) return ''
				// 后端返回的是 title 字段，已经根据语言格式化
				return service.title || ''
			},
			
			// 获取完整的图片 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}`
			},
			
			// 根据服务类型跳转到对应的预约填写页面
			goToServiceDetail(service) {
				// 检查登录状态
				if (!requireAuth()) {
					return
				}
				
				// 服务类型到页面的映射
				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',
					'train': 'rail-ticket-page',
					'telemedicine': 'medical-consultation-page',
					'special_passenger': 'special-needs-page',
					'pet_transport': 'pet-transportation-page',
					'guide_translation': 'guide-translation-page',
					'visa': 'visa-consultation-page',
					'exhibition': 'exhibition-service-page',
					'air_logistics': 'air-logistics-page',
					'sea_freight': 'sea-freight-page',
					'travel_planning': 'travel-planning-page',
					'insurance': 'insurance-consultation-page'
				}
				
				const serviceType = service.serviceType
				const pageName = servicePageMap[serviceType]
				
				if (pageName) {
					const title = this.getServiceName(service)
					uni.navigateTo({
						url: `/pages/appointment/${pageName}?id=${service.id}&title=${encodeURIComponent(title)}`
					})
				} else {
					// 未知服务类型，提示用户
					uni.showToast({
						title: this.$t('common.serviceNotAvailable') || '该服务暂未开放预约',
						icon: 'none'
					})
				}
			},
			
			// 处理图片加载错误
			handleImageError(service) {
				console.error('图片加载失败:', service.image)
				// 将图片设置为 null，显示占位符
				service.image = null
			},
			
			// 检查未读通知并更新TabBar红点
			async checkUnreadNotifications() {
				if (!isLoggedIn()) {
					uni.removeTabBarBadge({ index: 2 })
					return
				}
				try {
					const appserver = new AppServer()
					const response = await appserver.GetNotificationUnreadCount()
					if (response.code === 0 && response.data) {
						const unreadCount = response.data.all || 0
						if (unreadCount > 0) {
							uni.setTabBarBadge({
								index: 2,
								text: unreadCount > 99 ? '99+' : String(unreadCount)
							})
						} else {
							uni.removeTabBarBadge({ index: 2 })
						}
					}
				} catch (error) {
					console.error('检查未读通知失败:', error)
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		height: 100vh;
		background-color: #F3F4F8;
		flex-direction: column;
		overflow: hidden;
	}

	.header-title {
		width: 100%;
		margin-top: 120rpx;
		font-size: 30rpx;
		text-align: center;
	}

	.divider {
		width: 100%;
		height: 2rpx;
		background-color: #E0E0E0;
		margin-top: 32rpx;
	}

	.divider-vertical {
		width: 2rpx;
		background-color: #E0E0E0;
	}

	.main-container {
		display: flex;
		flex-direction: row;
		flex: 1;
		height: calc(100vh - 120rpx - 32rpx - 2rpx);
		overflow: hidden;
	}

	.category-sidebar {
		display: flex;
		flex-direction: column;
		width: 218rpx;
		min-width: 218rpx;
		background-color: #F7F7F7;
		overflow-y: auto;
	}

	.category-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 88rpx;
		padding: 16rpx 12rpx;
		position: relative;
		background: #F7F7F7;
		color: #000000;
		transition: all 0.3s ease;
		box-sizing: border-box;
	}

	.category-item-active {
		background: linear-gradient(to right, #E5FBFF, #77F6F4);
		color: #00A0BC;
	}

	.category-indicator {
		width: 6rpx;
		height: 30rpx;
		border-radius: 20rpx;
		background-color: #00A0BC;
		position: absolute;
		left: 12rpx;
	}

	.category-text {
		font-size: 28rpx;
		text-align: center;
		word-break: break-word;
		line-height: 1.4;
		flex: 1;
	}

	.service-list {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow-y: auto;
		padding-bottom: 80rpx;
	}

	.loading-container,
	.empty-container {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		width: 100%;
	}

	.loading-text,
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}

	.service-items {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.service-item {
		display: flex;
		flex-direction: column;
		width: 468rpx;
		margin: 40rpx auto 0;
		cursor: pointer;
		transition: transform 0.2s;
	}

	.service-item:active {
		transform: scale(0.98);
	}

	.service-image-wrapper {
		width: 100%;
		height: 180rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background-color: #f0f0f0;
	}

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

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

	.placeholder-icon {
		font-size: 60rpx;
		opacity: 0.5;
	}

	.service-title {
		font-size: 28rpx;
		margin-top: 12rpx;
		color: #333;
		font-weight: 500;
	}
</style>