<template>
	<view class="container">
		<!-- 轮播图 -->
		<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
			<swiper-item v-for="(item, index) in banners" :key="index">
				<image :src="item.image" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		
		<!-- 服务分类 -->
		<view class="service-grid">
			<view class="grid-item" v-for="(item, index) in services" :key="index" @click="goToService(item)">
				<image :src="item.icon" mode="aspectFit"></image>
				<text>{{ item.name }}</text>
			</view>
		</view>
		
		<!-- 推荐技师 -->
		<view class="section">
			<view class="section-title">推荐技师</view>
			<scroll-view scroll-x="true" class="technician-list">
				<view class="technician-item" v-for="(item, index) in technicians" :key="index">
					<image :src="item.avatar" mode="aspectFill"></image>
					<view class="info">
						<text class="name">{{ item.name }}</text>
						<text class="rating">⭐ {{ item.rating }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			banners: [
				{ image: '/static/banner1.jpg' },
				{ image: '/static/banner2.jpg' }
			],
			services: [
				{ name: '家政清洁', icon: '/static/service-clean.png', type: 'clean' },
				{ name: '家电维修', icon: '/static/service-repair.png', type: 'repair' },
				{ name: '管道疏通', icon: '/static/service-pipe.png', type: 'pipe' },
				{ name: '搬家服务', icon: '/static/service-move.png', type: 'move' }
			],
			technicians: []
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		loadData() {
			// 加载首页数据
			this.loadTechnicians()
		},
		loadTechnicians() {
			// 加载推荐技师
			this.$api.get('/api/technicians/recommend').then(res => {
				this.technicians = res.data
			})
		},
		goToService(service) {
			uni.navigateTo({
				url: `/pages/services/services?type=${service.type}`
			})
		}
	}
}
</script>

<style scoped>
.container {
	padding: 0;
}

.banner {
	height: 200px;
}

.banner image {
	width: 100%;
	height: 100%;
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 20px;
}

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

.grid-item image {
	width: 40px;
	height: 40px;
	margin-bottom: 8px;
}

.section {
	margin: 20px;
}

.section-title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 15px;
}

.technician-list {
	white-space: nowrap;
}

.technician-item {
	display: inline-block;
	width: 120px;
	margin-right: 15px;
	text-align: center;
}

.technician-item image {
	width: 60px;
	height: 60px;
	border-radius: 30px;
}

.info {
	margin-top: 8px;
}

.name {
	display: block;
	font-size: 14px;
}

.rating {
	display: block;
	font-size: 12px;
	color: #999;
}
</style>