<template>
	<view class="assemble">
		<view style="height: 20rpx;"></view>
		<!-- 时间筛选 -->
		<view class="filter-section">
			<picker mode="date" fields="month" :value="currentDate" @change="onDateChange">
				<view class="date-picker">
					<text>{{currentDate}}</text>
					<image class="drop-image" :src="$util.img('/static/images/drop.png')" mode="aspectFit"></image>
				</view>
			</picker>
		</view>
		
		<!-- 本月提成卡片 -->
		<view class="commission-card">
			<view class="card-title">本月提成</view>
			<view class="commission-amount">¥{{totalCommission}}</view>
		</view>
		
		<!-- 续费体测记录 -->
		<view class="record-card">
			<view class="card-title">续费提成</view>
			<view class="table">
				<view class="table-header">
					<view class="th">时间</view>
					<view class="th">到期数</view>
					<view class="th">续费数</view>
					<view class="th">续费率</view>
					<view class="th">提成</view>
				</view>
				<view class="table-body">
					<view class="tr" v-for="(item, index) in renewalRecords" :key="index">
						<view class="td">{{item.time}}</view>
						<view class="td">{{item.expireCount}}</view>
						<view class="td">{{item.renewCount}}</view>
						<view class="td">{{item.renewRate}}%</view>
						<view class="td">¥{{item.commission}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 新招课包 -->
		<view class="record-card">
			<view class="card-title">新招课包</view>
			<view class="table">
				<view class="table-header">
					<view class="th">成交数</view>
					<view class="th">提成</view>
					<view class="th">合计</view>
				</view>
				<view class="table-body">
					<view class="tr">
						<view class="td">{{newPackageCount}}</view>
						<view class="td">¥{{newPackageCommission}}</view>
						<view class="td">¥{{newPackageTotal}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 私教课包 -->
		<view class="record-card">
			<view class="card-title">私教课包</view>
			<view class="table">
				<view class="table-header">
					<view class="th">数量</view>
					<view class="th">提成</view>
				</view>
				<view class="table-body">
					<view class="tr">
						<view class="td">{{privatePackageCount}}</view>
						<view class="td">¥{{privatePackageCommission}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 时间卡 -->
		<view class="record-card">
			<view class="card-title">时间卡</view>
			<view class="table">
				<view class="table-header">
					<view class="th">时间卡</view>
					<view class="th">数量</view>
					<view class="th">提成</view>
				</view>
				<view class="table-body">
					<view class="tr">
						<view class="td">{{timeCardCount}}</view>
						<view class="td">{{timeCardAmount}}</view>
						<view class="td">¥{{timeCardCommission}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 其他提成 -->
		<view class="record-card">
			<view class="card-title">其他提成</view>
			<view class="table">
				<view class="table-header">
					<view class="th">项目</view>
					<view class="th">金额</view>
				</view>
				<view class="table-body">
					<view class="tr" v-for="(item, index) in otherCommissions" :key="index">
						<view class="td">{{item.project}}</view>
						<view class="td">¥{{item.amount}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import apiRoute from '@/api/apiRoute.js'

	export default {
		data() {
			return {
				currentDate: this.formatDate(new Date()),
				totalCommission: 0,
				renewalRecords: [],
				newPackageCount: 0,
				newPackageCommission: 0,
				newPackageTotal: 0,
				privatePackageCount: 0,
				privatePackageCommission: 0,
				timeCardCount: 0,
				timeCardAmount: 0,
				timeCardCommission: 0,
				otherCommissions: []
			}
		},
		onShow() {
			this.getStatisticsData()
		},
		methods: {
			formatDate(date) {
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				return `${year}-${month}`
			},
			onDateChange(e) {
				this.currentDate = e.detail.value
				this.getStatisticsData()
			},
			async getStatisticsData() {
				try {
					const res = await apiRoute.xs_statisticsMarketData({
						date: this.currentDate
					})
					if (res && res.code === 1) {
						const data = res.data
						this.totalCommission = data.totalCommission || 0
						this.renewalRecords = data.renewalRecords || []
						this.newPackageCount = data.newPackageCount || 0
						this.newPackageCommission = data.newPackageCommission || 0
						this.newPackageTotal = data.newPackageTotal || 0
						this.privatePackageCount = data.privatePackageCount || 0
						this.privatePackageCommission = data.privatePackageCommission || 0
						this.timeCardCount = data.timeCardCount || 0
						this.timeCardAmount = data.timeCardAmount || 0
						this.timeCardCommission = data.timeCardCommission || 0
						this.otherCommissions = data.otherCommissions || []
					}
				} catch (error) {
					console.error('获取统计数据失败:', error)
					uni.showToast({
						title: '获取数据失败',
						icon: 'none'
					})
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	//自定义导航栏
	.navbar_section {
		border: 1px solid #23262F;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #23262F;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.18);

		.title {
			padding: 40rpx 0rpx;
			// #ifdef MP-WEIXIN
			padding: 80rpx 0rpx;
			// #endif
			font-size: 30rpx;
			color: #F5F6FA;
			font-weight: bold;
			letter-spacing: 2rpx;
		}
	}

	.assemble {
		width: 100%;
		min-height: 100vh;
		background: #181A20;
		padding-bottom: 100rpx;
	}

	.div-style {
		width: 92%;
		height: 85vh;
		background: #fff;
		border-radius: 16rpx;
		margin: auto;
	}

	.coach-message {
		width: 92%;
		margin: 10rpx auto;
		display: flex;
		align-items: center;
		padding-top: 20rpx;
	}

	.drop-image {
		width: 50rpx;
		height: 50rpx;
		filter: brightness(0.8);
	}

	.title {
		font-size: 30rpx;
		color: #F5F6FA;
		padding-left: 20rpx;
	}

	.left1 {
		width: 48%;
		height: 95%;
		margin: auto;
	}

	.right1 {
		width: 48%;
		height: 95%;
		margin: auto;

		.statistics_box {
			margin: auto;
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;

			.item {
				width: 90rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.box {
					width: 100%;
					height: 328rpx;
					border: 1px solid #ddd;
					border-radius: 6rpx;
					background: #f5f5f5;
					position: relative;

					.progress-bar {
						width: 100%;
						height: 0;
						transition: height 0.3s ease;
						position: absolute;
						bottom: 0;
					}

					.ratio {
						width: 100%;
						position: absolute;
						bottom: -0rpx;
						font-size: 26rpx;
						text-align: center;
					}
				}

				.title {
					margin-top: 5rpx;
					padding: 0;
					font-size: 26rpx;
					color: #999999;
					;
					text-align: center;
				}
			}
		}
	}

	.this_month {
		width: 100%;
		height: 95%;
		margin: auto;
	}

	.drop-image-x {
		width: 20rpx;
		height: 20rpx;
	}

	.title-x {
		font-size: 28rpx;
		color: #7F7F7F;
		padding-left: 20rpx;
	}

	.title-x1 {
		font-size: 28rpx;
		color: #333333;
		padding-left: 60rpx;
	}

	.filter-section {
		padding: 20rpx 30rpx;
		background: #23262F;
		margin-bottom: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.2);

		.date-picker {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			color: #F5F6FA;

			.drop-image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 10rpx;
				filter: brightness(0.8);
			}
		}
	}
	
	.commission-card {
		background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
		margin: 20rpx;
		padding: 30rpx;
		border-radius: 16rpx;
		color: #fff;
		box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.25);

		.card-title {
			font-size: 28rpx;
			margin-bottom: 20rpx;
			color: #fff;
		}
		
		.commission-amount {
			font-size: 48rpx;
			font-weight: bold;
			color: #fff;
		}
	}
	
	.record-card {
		background: #23262F;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.18);
		
		.card-title {
			font-size: 30rpx;
			color: #F5F6FA;
			margin-bottom: 20rpx;
			font-weight: bold;
		}
		
		.table {
			width: 100%;
			
			.table-header {
				display: flex;
				background: #181A20;
				padding: 20rpx 0;
				border-radius: 8rpx 8rpx 0 0;

				.th {
					flex: 1;
					text-align: center;
					font-size: 26rpx;
					color: #A0A3B1;
					font-weight: 500;
				}
			}
			
			.table-body {
				.tr {
					display: flex;
					padding: 20rpx 0;
					border-bottom: 1px solid #33343A;
					transition: background 0.2s;
					
					&:last-child {
						border-bottom: none;
					}
					
					.td {
						flex: 1;
						text-align: center;
						font-size: 26rpx;
						color: #F5F6FA;
						font-weight: 400;
					}
					&:hover {
						background: #23262F;
					}
				}
			}
		}
	}

	// 其他细节样式
	::-webkit-scrollbar {
		display: none;
	}
</style>