<template>
	<view class="functions-container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input">
				<text class="search-icon">🔍</text>
				<input 
					type="text" 
					v-model="searchKeyword" 
					placeholder="搜索功能..." 
					@confirm="handleSearch"
					class="input"
				/>
			</view>
		</view>

		<!-- 常用功能 -->
		<view class="section">
			<view class="section-title">
				<text>常用功能</text>
			</view>
			<view class="function-grid">
				<view 
					class="function-item" 
					v-for="(func, index) in commonFunctions" 
					:key="index"
					@click="handleFunction(func)"
				>
					<view class="func-icon" :style="{ backgroundColor: func.bgColor }">
						<text>{{ func.icon }}</text>
					</view>
					<text class="func-name">{{ func.name }}</text>
				</view>
			</view>
		</view>

		<!-- 管理工具 -->
		<view class="section">
			<view class="section-title">
				<text>管理工具</text>
			</view>
			<view class="function-list">
				<view 
					class="list-item" 
					v-for="(item, index) in manageTools" 
					:key="index"
					@click="handleFunction(item)"
				>
					<view class="list-icon" :style="{ backgroundColor: item.bgColor }">
						<text>{{ item.icon }}</text>
					</view>
					<view class="list-info">
						<text class="list-name">{{ item.name }}</text>
						<text class="list-desc">{{ item.desc }}</text>
					</view>
					<text class="arrow">></text>
				</view>
			</view>
		</view>

		<!-- 数据服务 -->
		<view class="section">
			<view class="section-title">
				<text>数据服务</text>
			</view>
			<view class="function-list">
				<view 
					class="list-item" 
					v-for="(item, index) in dataServices" 
					:key="index"
					@click="handleFunction(item)"
				>
					<view class="list-icon" :style="{ backgroundColor: item.bgColor }">
						<text>{{ item.icon }}</text>
					</view>
					<view class="list-info">
						<text class="list-name">{{ item.name }}</text>
						<text class="list-desc">{{ item.desc }}</text>
					</view>
					<text class="arrow">></text>
				</view>
			</view>
		</view>

		<!-- 系统工具 -->
		<view class="section">
			<view class="section-title">
				<text>系统工具</text>
			</view>
			<view class="function-list">
				<view 
					class="list-item" 
					v-for="(item, index) in systemTools" 
					:key="index"
					@click="handleFunction(item)"
				>
					<view class="list-icon" :style="{ backgroundColor: item.bgColor }">
						<text>{{ item.icon }}</text>
					</view>
					<view class="list-info">
						<text class="list-name">{{ item.name }}</text>
						<text class="list-desc">{{ item.desc }}</text>
					</view>
					<text class="arrow">></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchKeyword: '',
			commonFunctions: [
				{ name: '文章管理', icon: '📄', bgColor: '#e8f4fd', path: '', type: 'common' },
				{ name: '图片管理', icon: '🖼️', bgColor: '#fef3e8', path: '', type: 'common' },
				{ name: '文件管理', icon: '📁', bgColor: '#e8faef', path: '', type: 'common' },
				{ name: '评论审核', icon: '💬', bgColor: '#fce8ec', path: '', type: 'common' },
				{ name: '用户反馈', icon: '📮', bgColor: '#f3e8fd', path: '', type: 'common' },
				{ name: '数据统计', icon: '📊', bgColor: '#e8f0fe', path: '', type: 'common' },
				{ name: '公告通知', icon: '📢', bgColor: '#fff4e8', path: '', type: 'common' },
				{ name: '日志查看', icon: '📋', bgColor: '#e8fcf4', path: '', type: 'common' }
			],
			manageTools: [
				{ name: '内容发布', desc: '发布文章、图片等内容', icon: '✏️', bgColor: '#e8f4fd', path: '' },
				{ name: '分类管理', desc: '管理内容分类标签', icon: '🏷️', bgColor: '#fef3e8', path: '' },
				{ name: '权限设置', desc: '配置用户角色权限', icon: '🔐', bgColor: '#e8faef', path: '' },
				{ name: '站点配置', desc: '网站基本设置项', icon: '⚙️', bgColor: '#fce8ec', path: '' }
			],
			dataServices: [
				{ name: '数据备份', desc: '一键备份所有数据', icon: '💾', bgColor: '#e8f4fd', path: '' },
				{ name: '数据恢复', desc: '从备份中恢复数据', icon: '♻️', bgColor: '#fef3e8', path: '' },
				{ name: '数据导出', desc: '导出为Excel/CSV', icon: '📤', bgColor: '#e8faef', path: '' },
				{ name: '数据清理', desc: '清理冗余临时数据', icon: '🧹', bgColor: '#fce8ec', path: '' }
			],
			systemTools: [
				{ name: '缓存管理', desc: '清除系统缓存加速访问', icon: '🚀', bgColor: '#e8f4fd', path: '' },
				{ name: '安全检测', desc: '扫描系统安全隐患', icon: '🛡️', bgColor: '#e8faef', path: '' },
				{ name: '版本更新', desc: '检查并更新系统版本', icon: '🔄', bgColor: '#fef3e8', path: '' },
				{ name: '关于系统', desc: '系统信息与帮助文档', icon: 'ℹ️', bgColor: '#f3e8fd', path: '' }
			]
		}
	},
	methods: {
		handleSearch() {
			if (this.searchKeyword.trim()) {
				uni.showToast({ title: '搜索：' + this.searchKeyword, icon: 'none' })
			}
		},
		handleFunction(func) {
			uni.showToast({ title: func.name + ' 功能开发中', icon: 'none' })
		}
	}
}
</script>

<style scoped>
.functions-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 32rpx;
}

.search-bar {
	padding: 24rpx 24rpx 0;
}

.search-input {
	display: flex;
	align-items: center;
	background-color: #fff;
	border-radius: 48rpx;
	padding: 16rpx 32rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.search-icon {
	font-size: 32rpx;
	margin-right: 16rpx;
}

.input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
}

.section {
	margin: 24rpx 24rpx 0;
	background-color: #fff;
	border-radius: 20rpx;
	padding: 32rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.section-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #333;
	margin-bottom: 28rpx;
}

.function-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24rpx;
}

.function-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.func-icon {
	width: 96rpx;
	height: 96rpx;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 12rpx;
}

.func-icon text {
	font-size: 42rpx;
}

.func-name {
	font-size: 24rpx;
	color: #666;
	text-align: center;
}

.function-list {
	display: flex;
	flex-direction: column;
}

.list-item {
	display: flex;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.list-item:last-child {
	border-bottom: none;
}

.list-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 18rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 24rpx;
	flex-shrink: 0;
}

.list-icon text {
	font-size: 36rpx;
}

.list-info {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.list-name {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 6rpx;
}

.list-desc {
	font-size: 24rpx;
	color: #999;
}

.arrow {
	font-size: 28rpx;
	color: #ccc;
	margin-left: 16rpx;
}
</style>
