<template>
	<view class="container">
		<!-- 代理商信息卡片 -->
		<view class="agent-card">
			<view class="agent-info">
				<image :src="agentInfo.avatar || '/static/default-avatar.png'" mode="aspectFill"></image>
				<view class="info">
					<text class="name">{{ agentInfo.name || '代理商' }}</text>
					<text class="region">{{ agentInfo.region || '服务区域' }}</text>
				</view>
			</view>
			<view class="level-badge">
				<text>{{ agentInfo.level || 'VIP' }}</text>
			</view>
		</view>

		<!-- 数据概览 -->
		<view class="overview-grid">
			<view class="overview-item">
				<text class="number">{{ overviewData.totalTechnicians }}</text>
				<text class="label">管理技师</text>
			</view>
			<view class="overview-item">
				<text class="number">{{ overviewData.monthOrders }}</text>
				<text class="label">本月订单</text>
			</view>
			<view class="overview-item">
				<text class="number">¥{{ overviewData.monthRevenue }}</text>
				<text class="label">本月营收</text>
			</view>
			<view class="overview-item">
				<text class="number">¥{{ overviewData.commission }}</text>
				<text class="label">待结佣金</text>
			</view>
		</view>

		<!-- 图表区域 -->
		<view class="chart-section">
			<view class="section-title">营收趋势</view>
			<view class="chart-placeholder">
				<text>图表区域 - 可集成echarts</text>
			</view>
		</view>

		<!-- 快速操作 -->
		<view class="quick-menu">
			<view class="menu-item" @click="goToTechnicians">
				<image src="/static/icon-tech-manage.png" mode="aspectFit"></image>
				<text>技师管理</text>
			</view>
			<view class="menu-item" @click="goToOrders">
				<image src="/static/icon-order-stat.png" mode="aspectFit"></image>
				<text>订单统计</text>
			</view>
			<view class="menu-item" @click="goToFinance">
				<image src="/static/icon-finance.png" mode="aspectFit"></image>
				<text>财务管理</text>
			</view>
			<view class="menu-item" @click="goToReports">
				<image src="/static/icon-report.png" mode="aspectFit"></image>
				<text>数据报表</text>
			</view>
		</view>

		<!-- 最新动态 -->
		<view class="section">
			<view class="section-title">最新动态</view>
			<view class="activity-list">
				<view class="activity-item" v-for="(item, index) in activities" :key="index">
					<view class="activity-icon">
						<text>{{ item.type === 'order' ? '📋' : item.type === 'tech' ? '👨‍🔧' : '💰' }}</text>
					</view>
					<view class="activity-content">
						<text class="content">{{ item.content }}</text>
						<text class="time">{{ item.time }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			agentInfo: {},
			overviewData: {
				totalTechnicians: 0,
				monthOrders: 0,
				monthRevenue: 0,
				commission: 0
			},
			activities: []
		}
	},
	onLoad() {
		this.loadData()
	},
	methods: {
		loadData() {
			// 加载代理商信息
			this.agentInfo = uni.getStorageSync('agentInfo') || {}
			// 加载概览数据
			this.loadOverviewData()
			// 加载最新动态
			this.loadActivities()
		},
		
		loadOverviewData() {
			this.$api.get('/api/agent/overview').then(res => {
				this.overviewData = res.data
			})
		},
		
		loadActivities() {
			this.$api.get('/api/agent/activities').then(res => {
				this.activities = res.data
			})
		},
		
		goToTechnicians() {
			uni.switchTab({
				url: '/pages/technicians/technicians'
			})
		},
		
		goToOrders() {
			uni.switchTab({
				url: '/pages/orders/orders'
			})
		},
		
		goToFinance() {
			uni.switchTab({
				url: '/pages/finance/finance'
			})
		},
		
		goToReports() {
			uni.navigateTo({
				url: '/pages/reports/reports'
			})
		}
	}
}
</script>

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

.agent-card {
	background: linear-gradient(135deg, #6c5ce7 0%, #a29bfe 100%);
	padding: 20px;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.agent-info {
	display: flex;
	align-items: center;
}

.agent-info image {
	width: 60px;
	height: 60px;
	border-radius: 30px;
	border: 2px solid white;
	margin-right: 15px;
}

.info .name {
	display: block;
	font-size: 18px;
	font-weight: bold;
}

.info .region {
	display: block;
	font-size: 14px;
	opacity: 0.8;
}

.level-badge {
	padding: 6px 12px;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 15px;
	border: 1px solid white;
}

.overview-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 15px;
	margin: 15px;
}

.overview-item {
	background: white;
	border-radius: 10px;
	padding: 20px;
	text-align: center;
}

.overview-item .number {
	display: block;
	font-size: 24px;
	font-weight: bold;
	color: #6c5ce7;
	margin-bottom: 5px;
}

.overview-item .label {
	display: block;
	font-size: 14px;
	color: #999;
}

.chart-section {
	margin: 15px;
	background: white;
	border-radius: 10px;
	padding: 20px;
}

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

.chart-placeholder {
	height: 200px;
	background: #f8f8f8;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
}

.quick-menu {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 15px;
	margin: 15px;
}

.menu-item {
	background: white;
	border-radius: 10px;
	padding: 20px 10px;
	text-align: center;
}

.menu-item image {
	width: 30px;
	height: 30px;
	margin-bottom: 8px;
}

.menu-item text {
	display: block;
	font-size: 12px;
}

.section {
	margin: 15px;
	background: white;
	border-radius: 10px;
	padding: 20px;
}

.activity-list {
	margin-top: 15px;
}

.activity-item {
	display: flex;
	align-items: flex-start;
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px solid #f0f0f0;
}

.activity-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.activity-icon {
	width: 30px;
	height: 30px;
	border-radius: 15px;
	background: #f0f0f0;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
	font-size: 14px;
}

.activity-content .content {
	display: block;
	font-size: 14px;
	margin-bottom: 5px;
}

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