<template>
	<view class="distribution-page">
		<view class="header-card">
			<view class="header-top flex justify-between">
				<view class="title-wrap">
					<view class="title-row flex items-center">
						<text class="iconfont icon-yonghu title-icon"></text>
						<text class="title-text">分销中心</text>
					</view>
					<view class="role-row flex items-center">
						<view class="role-tag">{{ userInfo.role }}</view>
						<text class="team-size">团队 {{ userInfo.teamSize }} 人</text>
					</view>
				</view>
				<button class="invite-btn" @click="handleInvite">
					<text class="iconfont icon-zhifeiji1"></text>
					邀请
				</button>
			</view>
			<view class="commission-panel">
				<view class="panel-label">累计佣金</view>
				<view class="panel-value">¥{{ commission.total }}</view>
				<view class="progress-bar">
					<view class="progress-inner" :style="{ width: commission.progress + '%' }"></view>
				</view>
				<view class="progress-text">
					升级进度 {{ commission.progress }}%
				</view>
			</view>
		</view>

		<view class="content-wrap">
		<view class="overview-card shadow" v-if="activeTab === 0">
				<view class="card-title flex items-center">
					<text class="iconfont icon-tubiaoshangshengqushi"></text>
					数据概览
				</view>
				<view class="overview-grid">
					<view class="overview-item highlight">
						<view class="item-label">今日佣金</view>
						<view class="item-value">¥{{ overview.today.amount }}</view>
						<view class="item-desc success">+{{ overview.today.growth }}%</view>
					</view>
					<view class="overview-item">
						<view class="item-label">团队人数</view>
						<view class="item-value">{{ overview.team.total }}</view>
						<view class="item-desc">活跃 {{ overview.team.active }}</view>
					</view>
					<view class="overview-item">
						<view class="item-label">本月订单</view>
						<view class="item-value">{{ overview.orders }}</view>
					</view>
					<view class="overview-item">
						<view class="item-label">月度营收</view>
						<view class="item-value">¥{{ overview.revenue }}</view>
					</view>
					<view class="overview-item span-2">
						<view class="item-label">转化率</view>
						<view class="item-value purple">{{ overview.conversion.rate }}%</view>
						<view class="item-desc muted">{{ overview.conversion.remark }}</view>
					</view>
				</view>
			</view>

		<view class="tabs-row">
			<view
				v-for="(tab, index) in tabs"
				:key="tab"
				class="tab-item"
				:class="{ active: activeTab === index }"
				@click="changeTab(index)"
			>
				{{ tab }}
			</view>
		</view>

		<view class="team-card shadow" v-if="activeTab === 1">
			<view class="card-title flex items-center justify-between">
				<view class="title-left flex items-center">
					<text class="iconfont icon-yonghu"></text>
					团队成员
				</view>
				<view class="team-count">{{ teamMembers.length }} 人</view>
			</view>
			<view
				class="team-item"
				v-for="member in teamMembers"
				:key="member.id"
			>
				<image class="avatar" :src="member.avatar" mode="aspectFill"></image>
				<view class="member-info">
					<view class="member-header flex items-center">
						<view class="member-name">{{ member.name }}</view>
						<view class="member-role">{{ member.role }}</view>
					</view>
					<view class="member-stats">
						<view class="stat">
							<view class="stat-label">订单</view>
							<view class="stat-value">{{ member.orders }}</view>
						</view>
						<view class="stat">
							<view class="stat-label">佣金</view>
							<view class="stat-value">¥{{ member.commission }}</view>
						</view>
					</view>
				</view>
				<view class="member-right">
					<view class="growth">{{ member.growth > 0 ? '+' : '' }}{{ member.growth }}%</view>
					<view class="arrow">></view>
				</view>
			</view>
		</view>

		<view class="achievement-card shadow" v-if="activeTab === 0">
				<view class="card-title flex items-center">
					<text class="iconfont icon-lihe"></text>
					成就进度
				</view>
				<view
					class="achievement-item"
					v-for="achievement in achievements"
					:key="achievement.id"
				>
					<view class="achievement-icon">
						<text class="iconfont" :class="achievement.icon"></text>
					</view>
					<view class="achievement-content">
						<view class="achievement-header flex justify-between items-center">
							<view class="achievement-title">{{ achievement.title }}</view>
							<view class="achievement-percent">{{ achievement.percent }}%</view>
						</view>
						<view class="achievement-desc">
							{{ achievement.description }}
						</view>
						<view class="achievement-progress">
							<view class="progress-track">
								<view class="progress-chunk" :style="{ width: achievement.percent + '%' }"></view>
							</view>
							<view class="progress-meta">
								{{ achievement.current }} / {{ achievement.goal }}
							</view>
						</view>
						<view class="achievement-reward flex items-center">
							<text class="reward-badge">解锁奖励</text>
							<text class="reward-text">{{ achievement.reward }}</text>
						</view>
					</view>
				</view>
			</view>
		<view class="settlement-card shadow" v-if="activeTab === 2">
			<view class="card-title flex items-center">
				<text class="info-icon">i</text>
				佣金结算说明
			</view>
			<view class="settlement-list">
				<view
					class="settlement-item"
					v-for="rule in settlementRules"
					:key="rule.id"
					:class="rule.tone"
				>
					<view class="rule-icon">
						<text v-if="rule.iconType === 'font'" class="iconfont" :class="rule.icon"></text>
						<text v-else>{{ rule.icon }}</text>
					</view>
					<view class="rule-content">
						<view class="rule-title">{{ rule.title }}</view>
						<view class="rule-desc">{{ rule.description }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="detail-card shadow" v-if="activeTab === 2">
			<view class="card-title flex items-center">
				<text class="iconfont icon-tubiaoshangshengqushi"></text>
				佣金明细
			</view>
			<view
				class="detail-item"
				v-for="detail in commissionDetails"
				:key="detail.id"
			>
				<view class="detail-info">
					<view class="detail-header flex items-center">
						<view class="detail-tag" :class="detail.type">{{ detail.typeLabel }}</view>
						<view class="detail-title">{{ detail.product }}</view>
					</view>
					<view class="detail-meta">来自: {{ detail.customer }}</view>
					<view class="detail-time">{{ detail.time }}</view>
				</view>
				<view class="detail-amount">+¥{{ detail.amount }}</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				role: '品鉴分销员',
				teamSize: 23
			},
			commission: {
				total: '2580.50',
				progress: 65
			},
			overview: {
				today: {
					amount: '156',
					growth: 12.5
				},
				team: {
					total: 23,
					active: 18
				},
				orders: 45,
				revenue: '8.9K',
				conversion: {
					rate: 8.3,
					remark: '行业领先'
				}
			},
			tabs: ['概览', '团队', '收益'],
			activeTab: 0,
			achievements: [
				{
					id: 'invite',
					title: '邀请3位好友',
					description: '成功邀请3位好友注册并完成首单',
					current: 2,
					goal: 3,
					percent: 67,
					reward: '解锁高佣金商品推广权',
					icon: 'icon-zhifeiji1'
				},
				{
					id: 'sales',
					title: '月销售额达到5000元',
					description: '单月团队销售额突破5000元',
					current: 4200,
					goal: 5000,
					percent: 84,
					reward: '晋升为调香分销员',
					icon: 'icon-tubiaoshangshengqushi'
				}
			],
			teamMembers: [
				{
					id: 'member-1',
					name: '小美',
					role: '探索分销员',
					orders: 15,
					commission: '234.5',
					growth: 15,
					avatar: 'https://picsum.photos/seed/distribution-1/120'
				},
				{
					id: 'member-2',
					name: '香香公主',
					role: '品鉴分销员',
					orders: 28,
					commission: '456.8',
					growth: 23,
					avatar: 'https://picsum.photos/seed/distribution-2/120'
				},
				{
					id: 'member-3',
					name: '花仙子',
					role: '调香分销员',
					orders: 42,
					commission: '789.2',
					growth: 8,
					avatar: 'https://picsum.photos/seed/distribution-3/120'
				}
			],
			settlementRules: [
				{
					id: 'cycle',
					title: '结算周期',
					description: '每月1日结算上月佣金，T+7个工作日到账',
					icon: 'icon-shijian',
					iconType: 'font',
					tone: 'tone-blue'
				},
				{
					id: 'rate',
					title: '佣金比例',
					description: '直推订单10%，团队订单5%，高级分销员享受更高比例',
					icon: '$',
					iconType: 'text',
					tone: 'tone-green'
				},
				{
					id: 'withdraw',
					title: '提现规则',
					description: '最低提现金额100元，每月可提现2次，手续费2元/笔',
					icon: 'icon-shaixuan1',
					iconType: 'font',
					tone: 'tone-purple'
				},
				{
					id: 'frozen',
					title: '冻结说明',
					description: '订单完成后佣金冻结15天，确保售后服务质量',
					icon: 'icon-shandian',
					iconType: 'font',
					tone: 'tone-yellow'
				}
			],
			commissionDetails: [
				{
					id: 'detail-1',
					type: 'direct',
					typeLabel: '直推',
					product: '经典玫瑰香水30ml',
					customer: '张小姐',
					time: '2025-04-02 14:30',
					amount: '19.9'
				},
				{
					id: 'detail-2',
					type: 'team',
					typeLabel: '团队',
					product: '薰衣草精油礼盒',
					customer: '李女士',
					time: '2025-04-02 13:15',
					amount: '14.95'
				}
			]
		};
	},
	methods: {
		changeTab(index) {
			this.activeTab = index;
		},
		handleInvite() {
			uni.showToast({
				title: '分享邀请即将开放',
				icon: 'none'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.distribution-page {
	min-height: 100vh;
	background: #f7f7ff;
	padding-bottom: 60rpx;
}

.header-card {
	background: var(--background-linear-gradient);
	color: #ffffff;
	padding: 120rpx 44rpx 220rpx;
	border-bottom-left-radius: 48rpx;
	border-bottom-right-radius: 48rpx;
	box-shadow: 0 28rpx 48rpx rgba(136, 45, 255, 0.3);
	position: relative;
}

.header-top {
	align-items: flex-start;
}

.title-wrap {
	.title-row {
		margin-bottom: 20rpx;
	}

	.title-icon {
		font-size: 44rpx;
		margin-right: 16rpx;
	}

	.title-text {
		font-size: 44rpx;
		font-weight: 600;
	}

	.role-row {
		.role-tag {
			background: rgba(255, 255, 255, 0.18);
			border-radius: 32rpx;
			padding: 12rpx 24rpx;
			font-size: 24rpx;
			margin-right: 16rpx;
		}

		.team-size {
			font-size: 26rpx;
			opacity: 0.85;
		}
	}
}

.invite-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9810fa;
	background: #ffffff;
	border-radius: 999rpx;
	padding: 0 36rpx;
	height: 72rpx;
	font-size: 28rpx;
	font-weight: 500;
	box-shadow: 0 12rpx 24rpx rgba(255, 255, 255, 0.3);
}

.invite-btn .iconfont {
	margin-right: 12rpx;
	font-size: 32rpx;
}

.commission-panel {
	margin-top: 80rpx;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 32rpx;
	padding: 48rpx 40rpx;
	backdrop-filter: blur(8rpx);
}

.panel-label {
	font-size: 28rpx;
	opacity: 0.85;
}

.panel-value {
	font-size: 72rpx;
	font-weight: 600;
	margin-top: 20rpx;
	letter-spacing: 2rpx;
}

.progress-bar {
	height: 16rpx;
	border-radius: 999rpx;
	background: rgba(255, 255, 255, 0.32);
	margin-top: 40rpx;
	overflow: hidden;
}

.progress-inner {
	height: 100%;
	background: linear-gradient(to right, #ffe2ff, #ffe5f9, #fff7d7);
	border-radius: inherit;
}

.progress-text {
	margin-top: 20rpx;
	font-size: 24rpx;
	text-align: right;
	opacity: 0.9;
}

.content-wrap {
	position: relative;
	margin-top: -160rpx;
	padding: 0 32rpx;
}

.shadow {
	box-shadow: 0 20rpx 40rpx rgba(102, 106, 255, 0.12);
}

.overview-card {
	background: #ffffff;
	border-radius: 32rpx;
	padding: 40rpx 34rpx;
}

.card-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #2c2d50;
	gap: 12rpx;
	margin-bottom: 36rpx;
}

.card-title .iconfont {
	font-size: 32rpx;
	color: #9810fa;
}

.title-left {
	gap: 12rpx;
}

.overview-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-gap: 28rpx;
}

.overview-item {
	background: #f7f8ff;
	border-radius: 28rpx;
	padding: 32rpx 30rpx;
	box-shadow: inset 0 0 0 1rpx rgba(152, 16, 250, 0.05);

	&.highlight {
		background: rgba(152, 16, 250, 0.12);
		color: #39146b;
	}

	&.span-2 {
		grid-column: span 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}

.item-label {
	font-size: 26rpx;
	color: #61638a;
}

.item-value {
	font-size: 42rpx;
	font-weight: 600;
	margin: 16rpx 0 8rpx;
	color: #2b2d4f;
}

.item-value.purple {
	color: #9810fa;
}

.item-desc {
	font-size: 24rpx;
	color: #7f80aa;
}

.item-desc.success {
	color: #00c951;
}

.item-desc.muted {
	color: #a2a6d1;
}

.tabs-row {
	margin-top: 32rpx;
	background: #ffffff;
	border-radius: 999rpx;
	padding: 12rpx;
	display: flex;
	justify-content: space-between;
	gap: 12rpx;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 22rpx 0;
	border-radius: 999rpx;
	font-size: 28rpx;
	color: #7d7fad;
	transition: all 0.3s;
}

.tab-item.active {
	background: linear-gradient(135deg, #a548ff, #f24bbf);
	color: #ffffff;
	box-shadow: 0 10rpx 20rpx rgba(152, 16, 250, 0.25);
}

.achievement-card {
	margin-top: 32rpx;
	background: #ffffff;
	border-radius: 32rpx;
	padding: 40rpx 34rpx;
}

.settlement-card {
	margin-top: 32rpx;
	background: #ffffff;
	border-radius: 32rpx;
	padding: 40rpx 34rpx;
}

.info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	background: rgba(152, 16, 250, 0.12);
	color: #9810fa;
	font-weight: 600;
	margin-right: 12rpx;
	font-size: 28rpx;
}

.settlement-list {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.settlement-item {
	display: flex;
	align-items: center;
	padding: 28rpx;
	border-radius: 28rpx;
	background: #f7f8ff;
	gap: 24rpx;

	&.tone-blue {
		background: rgba(118, 141, 255, 0.14);
		.rule-icon {
			color: #4a6cff;
			background: rgba(74, 108, 255, 0.16);
		}
	}

	&.tone-green {
		background: rgba(0, 201, 81, 0.14);
		.rule-icon {
			color: #00c951;
			background: rgba(0, 201, 81, 0.16);
		}
	}

	&.tone-purple {
		background: rgba(152, 16, 250, 0.12);
		.rule-icon {
			color: #9810fa;
			background: rgba(152, 16, 250, 0.18);
		}
	}

	&.tone-yellow {
		background: rgba(255, 166, 0, 0.14);
		.rule-icon {
			color: #ff8b0d;
			background: rgba(255, 166, 0, 0.2);
		}
	}
}

.rule-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36rpx;
	color: #9810fa;
	background: rgba(152, 16, 250, 0.12);
}

.rule-content {
	flex: 1;
}

.rule-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #2b2d4f;
	margin-bottom: 12rpx;
}

.rule-desc {
	font-size: 26rpx;
	color: #5a5c8f;
	line-height: 1.6;
}

.detail-card {
	margin-top: 32rpx;
	background: #ffffff;
	border-radius: 32rpx;
	padding: 40rpx 34rpx;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 0;
	border-bottom: 1rpx solid #f0f1ff;
	gap: 32rpx;

	&:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

.detail-info {
	flex: 1;
}

.detail-header {
	gap: 16rpx;
	margin-bottom: 12rpx;
}

.detail-tag {
	font-size: 22rpx;
	border-radius: 999rpx;
	padding: 10rpx 22rpx;
	background: rgba(152, 16, 250, 0.12);
	color: #9810fa;

	&.direct {
		background: rgba(0, 201, 81, 0.12);
		color: #00c951;
	}

	&.team {
		background: rgba(118, 141, 255, 0.14);
		color: #4a6cff;
	}
}

.detail-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #2b2d4f;
}

.detail-meta,
.detail-time {
	font-size: 24rpx;
	color: #9a9cc0;
	margin-top: 8rpx;
}

.detail-amount {
	font-size: 32rpx;
	font-weight: 600;
	color: #00c951;
	white-space: nowrap;
}

.team-card {
	margin-top: 32rpx;
	background: #ffffff;
	border-radius: 32rpx;
	padding: 40rpx 34rpx;
}

.team-count {
	font-size: 26rpx;
	color: #7c7ea7;
	background: rgba(152, 16, 250, 0.12);
	padding: 10rpx 26rpx;
	border-radius: 999rpx;
}

.team-item {
	display: flex;
	align-items: center;
	padding: 32rpx 0;
	border-bottom: 1rpx solid #f0f1ff;
	gap: 24rpx;

	&:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

.avatar {
	width: 96rpx;
	height: 96rpx;
	border-radius: 50%;
	object-fit: cover;
}

.member-info {
	flex: 1;
}

.member-header {
	gap: 16rpx;
	margin-bottom: 12rpx;
}

.member-name {
	font-size: 30rpx;
	font-weight: 600;
	color: #2b2d4f;
}

.member-role {
	font-size: 22rpx;
	color: #7c7ea7;
	background: rgba(152, 16, 250, 0.12);
	padding: 8rpx 16rpx;
	border-radius: 999rpx;
}

.member-stats {
	display: flex;
	gap: 56rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #9a9cc0;
	margin-bottom: 8rpx;
}

.stat-value {
	font-size: 26rpx;
	color: #2b2d4f;
	font-weight: 600;
}

.member-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16rpx;
}

.growth {
	background: rgba(0, 201, 81, 0.12);
	color: #00c951;
	padding: 10rpx 28rpx;
	border-radius: 999rpx;
	font-size: 24rpx;
	font-weight: 600;
}

.arrow {
	font-size: 28rpx;
	color: #a2a6d1;
}

.achievement-item {
	display: flex;
	padding: 32rpx 0;
	border-bottom: 1rpx solid #f0f1ff;
	gap: 24rpx;

	&:last-child {
		border-bottom: 0;
		padding-bottom: 0;
	}
}

.achievement-icon {
	width: 96rpx;
	height: 96rpx;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(152, 16, 250, 0.12);
	color: #9810fa;

	.iconfont {
		font-size: 44rpx;
	}
}

.achievement-content {
	flex: 1;
}

.achievement-header {
	margin-bottom: 12rpx;

	.achievement-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #2b2d4f;
	}

	.achievement-percent {
		font-size: 26rpx;
		color: #9810fa;
		font-weight: 600;
	}
}

.achievement-desc {
	font-size: 24rpx;
	color: #7c7ea7;
	line-height: 1.6;
	margin-bottom: 24rpx;
}

.achievement-progress {
	margin-bottom: 20rpx;
}

.progress-track {
	height: 18rpx;
	border-radius: 999rpx;
	background: #f1f2fe;
	overflow: hidden;
	margin-bottom: 12rpx;
}

.progress-chunk {
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(135deg, #a246ff, #f447c3);
}

.progress-meta {
	font-size: 24rpx;
	color: #9a9cc0;
}

.achievement-reward {
	gap: 12rpx;
}

.reward-badge {
	background: rgba(152, 16, 250, 0.12);
	color: #9810fa;
	border-radius: 999rpx;
	padding: 8rpx 20rpx;
	font-size: 22rpx;
}

.reward-text {
	font-size: 24rpx;
	color: #5a5c8f;
}
</style>