<template>
	<view class="waper">
        <!-- 导航栏 -->
        <u-navbar bgColor="transparent" leftIconSize="0" borderBottom="false">
        	<view slot='center' class="navbar_title">数据统计中心</view>
        </u-navbar>
        
        <!-- 顶部横幅 -->
		<view class="banner-box">
			<image class="banner" src="../../static/img/banner.png" mode="widthFix"></image>
			<!-- 统计概览卡片 -->
			<view class="stats-overview">
				<view class="stat-item">
					<view class="stat-label">总销售额</view>
					<view class="stat-value">¥68,532</view>
					<view class="stat-trend positive">
						<uni-icons type="arrowup" size="14"></uni-icons>
						<text>12.5%</text>
					</view>
				</view>
				<view class="stat-item">
					<view class="stat-label">总订单量</view>
					<view class="stat-value">8,652</view>
					<view class="stat-trend positive">
						<uni-icons type="arrowup" size="14"></uni-icons>
						<text>8.3%</text>
					</view>
				</view>
				<view class="stat-item">
					<view class="stat-label">游客总量</view>
					<view class="stat-value">35,962</view>
					<view class="stat-trend positive">
						<uni-icons type="arrowup" size="14"></uni-icons>
						<text>5.7%</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 主要内容区 -->
		<view class="con-box">
			<!-- 图表统计区域 -->
			<view class="charts-section">
				<!-- 折线图：本月门票销售量和销售额 -->
				<view class="chart-card">
					<view class="chart-header">
						<view class="chart-title">本月销售趋势</view>
						<view class="chart-filter">
							<text class="filter-item active">日</text>
							<text class="filter-item">周</text>
							<text class="filter-item">月</text>
						</view>
					</view>
					<view class="chart-container">
						<qiun-data-charts 
							type="line" 
							:chartData="ticketSalesData" 
							:opts="lineChartOpts"
							:canvas2d="true"
							@chartClick="onChartClick"
							class="chart"
						/>
					</view>
				</view>
				
				<!-- 柱状图：年度用水用电数据 -->
				<view class="chart-card">
					<view class="chart-header">
						<view class="chart-title">年度用水用电统计</view>
						<view class="chart-filter">
							<text class="filter-item active">年</text>
							<text class="filter-item">季</text>
						</view>
					</view>
					<view class="chart-container">
						<qiun-data-charts 
							type="column" 
							:chartData="waterElectricData" 
							:opts="barChartOpts"
							:canvas2d="true"
							class="chart"
						/>
					</view>
				</view>
				
				<!-- 饼图：收益占比 -->
				<view class="chart-card pie-chart-card">
					<view class="chart-header">
						<view class="chart-title">收益来源占比</view>
						<view class="chart-date">
							<text>2023年6月</text>
						</view>
					</view>
					<view class="chart-container pie-container">
						<qiun-data-charts 
							type="pie" 
							:chartData="revenueData" 
							:opts="pieChartOpts"
							:canvas2d="true"
							class="chart pie-chart"
							@chartInit="onPieInit"
						/>
					</view>
				</view>
			</view>
		</view>
		
        <tabbar name="video"></tabbar>
    </view>
</template>

<script>
import tabbar from '@/components/tabbar.vue'
export default {
    components: { tabbar },
    data() {
        return {
            show: false,
            pieChart: null, // 饼图实例
            
            // 折线图数据：本月门票销售量和销售额
            ticketSalesData: {
                categories: ['1日', '5日', '10日', '15日', '20日', '25日', '30日'],
                series: [
                    {
                        name: '销售量',
                        data: [320, 450, 380, 520, 490, 680, 720],
                        color: '#42b983'
                    },
                    {
                        name: '销售额(万元)',
                        data: [9.6, 13.5, 11.4, 15.6, 14.7, 20.4, 21.6],
                        color: '#3498db'
                    }
                ]
            },
            
            // 柱状图数据：年度用水用电数据
            waterElectricData: {
                categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                series: [
                    {
                        name: '用水量(吨)',
                        data: [3200, 2800, 3100, 3500, 4200, 5800, 6500, 6800, 5200, 4100, 3800, 3500],
                        color: '#3498db'
                    },
                    {
                        name: '用电量(度)',
                        data: [5800, 5200, 5500, 6200, 7800, 9200, 10500, 11200, 8500, 6800, 6200, 5900],
                        color: '#f1c40f'
                    }
                ]
            },
            
            // 饼图数据：收益占比
            revenueData: {
                series: [
                    {
                        name: '门票',
                        data: 45,
                        color: '#42b983'
                    },
                    {
                        name: '酒店',
                        data: 30,
                        color: '#3498db'
                    },
                    {
                        name: '餐饮',
                        data: 15,
                        color: '#e67e22'
                    },
                    {
                        name: '商城',
                        data: 10,
                        color: '#9b59b6'
                    }
                ]
            },
            
            // 图表配置
            lineChartOpts: {
                color: ['#42b983', '#3498db'],
                padding: [15, 15, 0, 15],
                legend: {
                    position: 'top',
                    float: 'right',
                    fontSize: 12
                },
                xAxis: {
                    gridColor: '#eeeeee',
                    labelCount: 7
                },
                yAxis: [
                    {
                        name: '销售量',
                        gridColor: '#eeeeee',
                        min: 0
                    },
                    {
                        name: '销售额(万元)',
                        gridColor: 'transparent',
                        min: 0,
                        position: 'right'
                    }
                ],
                extra: {
                    line: {
                        type: 'curve',
                        width: 3,
                        activeType: 'hollow',
                        hollowRadius: 5,
                        hollowColor: 'auto'
                    }
                },
                animation: true,
                animationDuration: 1500
            },
            
            barChartOpts: {
                color: ['#3498db', '#f1c40f'],
                padding: [15, 15, 0, 15],
                legend: {
                    position: 'top',
                    float: 'right',
                    fontSize: 12
                },
                xAxis: {
                    gridColor: '#eeeeee'
                },
                yAxis: {
                    gridColor: '#eeeeee',
                    min: 0
                },
                extra: {
                    column: {
                        width: 20,
                        radius: [6, 6, 0, 0],
                        // 添加柱子间隔
                        space: 15
                    }
                },
                animation: true,
                animationDuration: 1500,
                animationEasing: 'elasticOut'
            },
            
            pieChartOpts: {
                color: ['#42b983', '#3498db', '#e67e22', '#9b59b6'],
                padding: [15, 15, 0, 15],
                legend: {
                    position: 'right',
                    float: 'right',
                    itemGap: 20,
                    fontSize: 14,
                    itemWidth: 12,
                    itemHeight: 12
                },
                extra: {
                    pie: {
                        labelWidth: 15,
                        offsetAngle: 0,
                        radius: 100,
                        activeScale: 1.1,
                        // 饼图动效配置
                        labelLine: true,
                        labelLineLength: 20,
                        labelLineWidth: 1
                    }
                },
                animation: true,
                animationDuration: 2000,
                animationEasing: 'cubicOut'
            }
        };
    },
    methods: {
        async scanCode () {
            let info = await this.$http.getInfo();
            // #ifdef APP-PLUS
                uni.navigateTo({ url: '/pages/scan/index' })
            // #endif
            // #ifdef MP-WEIXIN
                uni.scanCode({
                    onlyFromCamera: true,
                    success: async (res) => {
                        uni.navigateTo({ url: `/pages/info/info?code=${res.result}`})
                    }
                });
            // #endif
        },
        // 图表点击事件
        onChartClick(e) {
            console.log('图表点击', e);
            uni.showToast({
                title: `${e.name}: ${e.value}`,
                icon: 'none',
                duration: 2000
            });
        },
        // 饼图初始化完成
        onPieInit(chart) {
            this.pieChart = chart;
            
            // 添加交互效果 - 鼠标悬停/点击时的动画
            chart.on('pointClick', (params) => {
                this.pieChart.updateOption({
                    extra: {
                        pie: {
                            offsetAngle: params.dataIndex * (360 / this.revenueData.series.length)
                        }
                    }
                });
            });
            
            // 自动旋转效果
            let angle = 0;
            setInterval(() => {
                angle += 1;
                if (angle >= 360) angle = 0;
                this.pieChart.updateOption({
                    extra: {
                        pie: {
                            offsetAngle: angle
                        }
                    }
                });
            }, 100);
        }
    }
}
</script>

<style lang="scss">
page{ 
    height: 100%; 
    background-color: #f5f7fa;
}
.waper{
    width: 100%;
	height: 100%;
	background: #f5f7fa;
	
	.navbar_title{
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.2);
	}
	
	.banner-box {
		position: relative;
		width: 100%;
		
		.banner {
			width: 100%;
			height: auto;
			min-height: 220rpx;
		}
		
		// 统计概览卡片
		.stats-overview {
			position: absolute;
			bottom: -60rpx;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: space-around;
			padding: 0 30rpx;
			box-sizing: border-box;
			
			.stat-item {
				width: 220rpx;
				height: 120rpx;
				background-color: #fff;
				border-radius: 16rpx;
				padding: 20rpx;
				box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.08);
				text-align: center;
				
				.stat-label {
					font-size: 24rpx;
					color: #666;
					margin-bottom: 8rpx;
				}
				
				.stat-value {
					font-size: 32rpx;
					font-weight: 600;
					color: #333;
					margin-bottom: 5rpx;
				}
				
				.stat-trend {
					font-size: 22rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					
					&.positive {
						color: #42b983;
					}
					
					&.negative {
						color: #f56c6c;
					}
					
					text {
						margin-left: 5rpx;
					}
				}
			}
		}
	}
	
	.con-box {
		position: relative;
		top: 20rpx;
		padding: 70rpx 30rpx 20rpx;
		background: transparent;
	}
	
	.charts-section {
		width: 100%;
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}
	
	// 图表卡片样式
	.chart-card {
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
		
		&:hover {
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
			transform: translateY(-2rpx);
		}
		
		.chart-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 25rpx;
		}
		
		.chart-title {
			font-size: 30rpx;
			color: #333;
			font-weight: 600;
			position: relative;
			padding-left: 15rpx;
			
			&::before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 24rpx;
				background-color: #3498db;
				border-radius: 3rpx;
			}
		}
		
		.chart-filter {
			display: flex;
			gap: 15rpx;
			
			.filter-item {
				font-size: 24rpx;
				padding: 8rpx 18rpx;
				border-radius: 20rpx;
				color: #999;
				background-color: #f5f5f5;
				transition: all 0.2s ease;
				
				&.active {
					color: #fff;
					background-color: #3498db;
				}
				
				&:not(.active):hover {
					background-color: #eee;
				}
			}
		}
		
		.chart-date {
			font-size: 24rpx;
			color: #999;
		}
		
		.chart-container {
			width: 100%;
			height: 360rpx;
			position: relative;
		}
		
		.chart {
			width: 100%;
			height: 100%;
		}
	}
	
	// 饼图特殊样式
	.pie-chart-card {
		.pie-container {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 400rpx;
		}
		
		.pie-chart {
			width: auto;
			height: 320rpx;
		}
	}
}
</style>
