<template>
	<div>
		<div class="search-area">
			<Form ref="formInline" :model="formInline" :rules="ruleInline" inline :label-width="120">
				<FormItem prop="user" label="时间">
					<Input type="text" v-model="formInline.user" placeholder="Username"></Input>
				</FormItem>
				<FormItem prop="password" label="充电桩">
					<Input type="password" v-model="formInline.password" placeholder="Password"></Input>
				</FormItem>
				<FormItem prop="password" label="充电站">
					<Input type="password" v-model="formInline.password" placeholder="Password"></Input>
				</FormItem>
				<FormItem>
					<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
				</FormItem>
			</Form>
		</div>
		<div id="main" ref="chartContainer" style="width: 100%; height: 400px;"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'

	export default {
		name: 'Total',
		data() {
			return {
				data: [],
				chartInstance: null,
				formInline: {
					user: '',
					password: '',
				},
			}
		},
		mounted() {
			this.initChart()
		},
		beforeDestroy() {
			if (this.chartInstance) {
				this.chartInstance.dispose()
			}
			window.removeEventListener('resize', this.handleResize)
		},
		methods: {
			initChart() {
				if (!this.$refs.chartContainer) return

				// 销毁旧实例
				if (this.chartInstance) {
					this.chartInstance.dispose()
				}

				this.chartInstance = echarts.init(this.$refs.chartContainer)

				// 模拟数据
				const xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				const orderData = [120, 132, 101, 134, 90, 230, 210]
				const revenueData = [220, 182, 191, 234, 290, 330, 310]

				const option = {
					title: {
						text: '充电订单趋势',
						left: 'center',
					},
					tooltip: {
						trigger: 'axis',
					},
					legend: {
						data: ['订单量', '收入'],
						top: 30,
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: xData,
					},
					yAxis: {
						type: 'value',
					},
					series: [{
							name: '订单量',
							type: 'line',
							data: orderData,
							smooth: true,
							itemStyle: {
								color: '#5470c6',
							},
						},
						{
							name: '收入',
							type: 'line',
							data: revenueData,
							smooth: true,
							itemStyle: {
								color: '#91cc75',
							},
						},
					],
				}

				this.chartInstance.setOption(option)

				// 响应式调整
				window.addEventListener('resize', this.handleResize)
			},

			handleResize() {
				if (this.chartInstance) {
					this.chartInstance.resize()
				}
			},
		},
	}
</script>

<style scoped>
	#main {
		background: #fff;
		border-radius: 8px;
		padding: 20px;
		margin: 20px;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.search-area {
		background-color: white;
		padding-top: 20px;
		border: 1px solid #F3F7FD;
		border-radius: 15px;
	}
</style>