<template>
	<view class="data_content">
		<!-- 今日数据 -->
		<view class="today_data">
			<view class="px-20">
				<DataCard title="今日实时数据" time="04-15 17:20" :orderNum="50" proReveenue="487.50" />
				<DataComputed />
			</view>
			<view class="echarts_box">
				<Echarts :option="lineOption" />
			</view>
		</view>
		<!-- 时间范围内数据 -->
		<view class="time_data">
			<view class="time_list">
				<view class="time_item active">近7日</view>
				<view class="time_item">近30日</view>
				<view class="time_item">近1年</view>
			</view>
			<view class="bg-fff px-20 py-38" style="border-radius: 12rpx;">
				<DataCard title="近7日数据" time="04.08-04.14" :orderNum="379" proReveenue="4580.50" />
				<view class="echarts_box">
					<Echarts :option="barOption" />
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import DataComputed from '@/components/data/dataComputed.vue'
	import DataCard from '@/components/data/dataCard.vue'
	import Echarts from '@/components/echarts.vue'
	export default {
		name:"dataPandect",
		components: { DataCard, DataComputed, Echarts },
		data() {
			return {
			// 一周内柱状图表
				barOption:{
					title: {
						text: '收入数据图',
						textStyle: {
							fontSize: '16px',
							color: '#3d3d3d',
							fontWeight: 500
						}
					},
					color: ['#FFB336'],
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							name: '日期',
							nameLocation: 'start',
							nameTextStyle: {
								padding: [0, 10, 0, 0],
								color: '#999999'
							},
							axisLabel: {
								textStyle: {
									color: '#999'
								}
							},
							type: 'category',
							data: ['04.08', '04.09', '04.10', '04.11', '04.12', '04.13', '04.14'],
							axisTick: {
								alignWithLabel: true
							}
						}
					],
					yAxis: [
						{
							name: '单位：元',
							nameTextStyle: {
								padding: [0, 40, 0, 0],
								color: '#999999'
							},
							axisLabel: {
								textStyle: {
									color: '#999'
								}
							},
							type: 'value'
						}
					],
					series: [
						{
							name: 'Direct',
							type: 'bar',
							barWidth: '30%',
							data: [800, 3300, 1800, 950, 2756, 925, 1920]
						}
					]
				},
				// 今日数据图标
				lineOption: {
					tooltip: {
						trigger: 'axis'
					},
					legend: {
						data: ['今日预计收入', '昨日收入']
					},
					grid: {
						left: '6%',
						right: '4%',
						bottom: '9%',
						containLabel: true
					},
					xAxis: {
						nameLocation: 'start',
						nameGap: 30,
						type: 'category',
						boundaryGap: false,
						data: [1, 4, 7, 10, 13, 16, 19, 22],
						name: '时段'
					},
					yAxis: {
						 nameLocation: 'end',
							type: 'value',
							name: '单位：元',
							minInterval: 0.1, //分割刻度
							interval: 200,
					},
					series: [
						{
							name: '今日预计收入',
							data: [0, 0, 0, 58, 210, 380, 450, 800],
							type: 'line',
							itemStyle: {
								normal: {
									color: '#0472FB', 
									lineStyle: {
											color: '#0472FB'
									}
								}
							},
							areaStyle: {
								color: 'rgba(4,114,251,0.3)'
							}
						},
						{
							name: '昨日收入',
							data: [0, 0, 0, 110, 180, 480, 530, 900],
							type: 'line',
							itemStyle: {
								normal: {
									color: '#FFB336', 
									lineStyle: {
											color: '#FFB336'
									}
								}
							},
							areaStyle: {
								opacity: 0
							}
						}
					]
				},
				// 长时间图表
				longTimeOption: {
					title: {
						text: 'Stacked Area Chart'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'category',
							boundaryGap: false,
							data: ['2024.03.14', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', '2024.04.14'],
							axisLabel: {
								interval:5
							}
						}
					],
					yAxis: [
						{
							show: false,
							type: 'value'
						}
					],
					series: [
						{
							name: 'Email',
							type: 'line',
							stack: 'Total',
							areaStyle: {},
							smooth:true,
						 itemStyle: {
								normal: {
									color: "#FFB336", //改变折线点的颜色
									lineStyle: {
										color: "#FFB336", //改变折线颜色
									},
								}
						 },
							areaStyle: {
								color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [
												{
														offset: 0.6,
														color: '#FFCB74'
												},
												{
														offset: 1,
														color: '#fff'
												}
										]
								}
							},
							data: [120, 132, 101, 134, 90, 230, 210]
						}
					]
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.data_content{
	padding: 20rpx 30rpx 0;
	.echarts_box{
		height: 580rpx;
		margin-top: 40rpx;
	}
	.today_data{
		padding: 38rpx 0;
		background: #FFFFFF;
		border-radius: 12rpx;
	}
	.time_data{
		margin-top: 40rpx;
		.time_list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 40rpx;
			.time_item{
				width: 200rpx;
				height: 60rpx;
				background: #FFF0C3;
				color: #666;
				font-size: 28rpx;
				line-height: 60rpx;
				border-radius: 12rpx;
				text-align: center;
				&.active{
					color: #333;
					background: linear-gradient( 45deg, #FEE14D 0%, #FFC24D 100%);
				}
			}
		}
	}
}
</style>