<template>
	<view class="page-container">
		<view class="header-section flex">
			<view class="tabs-box flex">
				<view 
					:class="['tab-item', activeTab === 0 ? 'tab-active' : 'tab-inactive']" 
					@click="activeTab = 0"
				>本期</view>
				<view 
					:class="['tab-item', activeTab === 1 ? 'tab-active' : 'tab-inactive']" 
					@click="activeTab = 1"
				>上期</view>
			</view>
			<view class="date-text">10月1日~10月15日</view>
		</view>

		<view class="stat-section flex">
			<view class="stat-item">
				<view class="stat-value">9096</view>
				<view class="stat-label flex">
					总营业分 <text class="detail-link" @click="goToPage('yyf')">查看明细</text>
					<u-icon name="arrow-right" size="12" color="#19be6b"></u-icon>
				</view>
			</view>
			<u-line color="#eee" direction="col" margin="0 24rpx"></u-line>
			<view class="stat-item">
				<view class="stat-value">4046</view>
				<view class="stat-label flex">
					总成长值 <text class="detail-link" @click="goToPage('czz')">查看明细</text>
					<u-icon name="arrow-right" size="12" color="#19be6b"></u-icon>
				</view>
			</view>
		</view>

		<view class="table-section">
			<view class="table-header flex">
				<text class="cell">日期</text>
				<text class="cell">营业分</text>
				<text class="cell">成长值</text>
			</view>
			<view class="table-body">
				<view 
					v-for="(item, index) in tableData" 
					:key="index" 
					class="table-row flex"
					:class="{'row-stripe': index % 2 !== 0}"
				>
					<text class="cell">{{ item.date }}</text>
					<text class="cell">{{ item.score }}</text>
					<text class="cell">{{ item.growth }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			activeTab: 0,
			tableData: [
				{ date: '10-15', score: '2520', growth: '1356' },
				{ date: '10-14', score: '1236', growth: '1423' },
				{ date: '10-13', score: '0', growth: '0' },
				{ date: '10-12', score: '1236', growth: '1423' },
				{ date: '10-11', score: '2520', growth: '1356' },
				{ date: '10-10', score: '1236', growth: '1423' },
				{ date: '10-09', score: '2520', growth: '1356' },
				{ date: '10-08', score: '1236', growth: '1423' },
				{ date: '10-09', score: '2520', growth: '1356' },
				{ date: '10-07', score: '1236', growth: '1423' },
			]
		};
	},
	methods: {
		goToPage(type) {
			console.log('跳转明细:', type);
		}
	}
};
</script>

<style lang="scss" scoped>
.page-container {
	min-height: 100vh;
	padding: 24rpx;
	background: #f8f8f8;
}

.header-section {
	margin-bottom: 24rpx;
	justify-content: space-between;
	.date-text {
		font-size: 28rpx;
		color: #333;
	}

	.tabs-box {
		.tab-item {
			font-size: 24rpx;
			padding: 6rpx 20rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
			border: 1rpx solid var(--theme-color);
		}
		.tab-active {
			color: #fff;
			background-color: var(--theme-color);
		}
		.tab-inactive {
			color: var(--theme-color);
			background-color: #fff;
		}
	}
}

.stat-section {
	padding: 24rpx;
	margin-bottom: 24rpx;
	border-radius: 16rpx;
	background-color: #fff;
	
	.stat-item {
		flex: 1;
		text-align: left;
		
		.stat-value {
			font-size: 48rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 12rpx;
		}
		.stat-label {
			font-size: 24rpx;
			color: #999;
			.detail-link {
				color: var(--theme-color);
				margin-left: 10rpx;
				margin-right: 4rpx;
			}
		}
	}
}

.table-section {
	padding: 24rpx;
	border-radius: 16rpx;
	background-color: #fff;
	
	.table-header {
		color: #666;
		font-size: 24rpx;
		padding: 20rpx 0;
		background-color: #F9F9F9;
		justify-content: space-around;
		.cell {
			font-weight: 400;
			color: #666;
		}
	}
	
	.table-row {
		padding: 24rpx 0;
		justify-content: space-around;
		&.row-stripe {
			background-color: #DCF3F6; 
		}
	}

	.cell {
		flex: 1;
		font-weight: 500;
		font-size: 28rpx;
		color: #333;
		text-align: center;
	}
}
</style>