<template>
	<view class="container">
		<view v-if="loading" class="loading">
			<text class="loading-text">加载中...</text>
		</view>
		<view v-else-if="categories.length > 0" class="category-list">
			<view 
				v-for="item in categories" 
				:key="item.sn" 
				class="category-item"
				@click="handleCategory(item)"
			>
				<view class="category-icon">{{ getCategoryIcon(item.category) }}</view>
				<text class="category-name">{{ item.category }}</text>
				<text class="arrow">›</text>
			</view>
		</view>
		<view v-else class="empty-state">
			<text class="empty-text">暂无类目</text>
			<button class="refresh-btn" @click="loadCategories">刷新</button>
		</view>
	</view>
</template>

<script>
import api from '../../utils/api.js'

export default {
	data() {
		return {
			categories: [],
			loading: false
		}
	},
	
	onLoad() {
		this.loadCategories()
	},
	
	methods: {
		async loadCategories() {
			this.loading = true
			try {
				const res = await api.getAllCategory()
				if (res.data && res.data.categories) {
					this.categories = res.data.categories
				}
			} catch (error) {
				console.error('获取类目列表失败:', error)
				uni.showToast({
					title: '获取类目失败',
					icon: 'none'
				})
			} finally {
				this.loading = false
			}
		},
		
		getCategoryIcon(category) {
			const iconMap = {
				'传统文化': '🏮',
				'动物世界': '🦁',
				'地理自然': '🌍',
				'文学历史': '📜',
				'文学成语': '📖',
				'生活常识': '🏠',
				'科技常识': '🔬',
				'美食文化': '🍜',
				'自然科学': '🧬'
			}
			return iconMap[category] || '📚'
		},
		
		handleCategory(item) {
			uni.navigateTo({
				url: `/pages/category-question/category-question?categorySn=${item.sn}&categoryName=${item.category}`
			})
		}
	}
}
</script>

<style scoped>
.container {
	padding: 40rpx;
}

.loading {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 60vh;
}

.loading-text {
	font-size: 32rpx;
	color: #999;
}

.category-list {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.category-item {
	display: flex;
	align-items: center;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s;
}

.category-item:active {
	transform: scale(0.98);
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.06);
}

.category-icon {
	font-size: 60rpx;
	margin-right: 30rpx;
}

.category-name {
	flex: 1;
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.arrow {
	font-size: 50rpx;
	color: #ccc;
	font-weight: bold;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
}

.empty-text {
	font-size: 32rpx;
	color: #999;
	margin-bottom: 40rpx;
}

.refresh-btn {
	width: 200rpx;
	height: 70rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
	font-size: 28rpx;
	border-radius: 35rpx;
	border: none;
}
</style>
