<template>
	<div>
		<div class="search-area">
			<Form ref="formInline" :model="formInline" inline :label-width="120">
				<FormItem prop="user" label="时间">
					<Select v-model="formInline.time_type" clearable style="width:200px">
						<Option :value="1">天</Option>
						<Option :value="4">周</Option>
						<Option :value="2">月</Option>
						<Option :value="3">年</Option>
						<Option :value="5">自定义</Option>
					</Select>
					<DatePicker v-if="formInline.time_type == 1" :value="formInline.time" type="date"
						placeholder="请选择日期" style="width: 200px" @on-change="chage" />
					<DatePicker v-if="formInline.time_type == 2" type="month" placeholder="请选择日期" style="width: 200px"
						@on-change="chage" />
					<DatePicker v-if="formInline.time_type == 3" type="year" placeholder="请选择日期" style="width: 200px"
						@on-change="chage" />
					<DatePicker v-if="formInline.time_type == 4" type="daterange" show-week-numbers
						placement="bottom-end" placeholder="请选择日期" style="width: 200px" @on-change="chage" />
					<DatePicker v-if="formInline.time_type == 5" type="daterange" placement="bottom-end"
						placeholder="请选择日期" style="width: 200px" @on-change="chage" />
				</FormItem>
				<FormItem prop="password" label="充电站">
					<Select v-model="formInline.charge_station_id" style="width:200px" clearable @on-change="changeStation">
						<Option v-for="item in stationList" :value="item.charge_station_id"
							:key="item.charge_station_id">{{ item.charge_station_name }}</Option>
					</Select>
				</FormItem>
				<FormItem prop="password" label="充电桩">
					<Select v-model="formInline.connectorID" style="width:200px" clearable>
						<Option v-for="item in pileList" :value="item.ConnectorID" :key="item.charge_pile_id">
							{{ item.ConnectorID }}
						</Option>
					</Select>
				</FormItem>
				<FormItem>
					<Button type="primary" @click="handleSubmit('formInline')">搜索</Button>
				</FormItem>
			</Form>
		</div>
		<div style="text-align: center;">
			<div>总订单数：{{ total_order_num }}</div>
			<div>总收入：{{ total_order_money }}</div>
		</div>
		<div id="main" ref="chartContainer" style="width: 100%; height: 400px;"></div>
	</div>
</template>

<script>
	import * as echarts from 'echarts'
	import {
		orderTotal,
		getStationList,
		getPileList,
	} from '@/api'

	export default {
		name: 'Total',
		data() {
			return {
				data: [],
				chartInstance: null,
				formInline: {
					charge_station_id: '',
					time_type: 1,
					connectorID: '',
					time: '',
				},
				stationList: [],
				pileList: [],
				total_order_num: 0,
				total_order_money: '0.00',
			}
		},
		mounted() {
			this.initChart()
			this.getStationList()
			this.getPileList()
		},
		beforeDestroy() {
			if (this.chartInstance) {
				this.chartInstance.dispose()
			}
			window.removeEventListener('resize', this.handleResize)
		},
		methods: {
			async initChart() {
				if (!this.$refs.chartContainer) return

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

				this.formInline.time = new Date().toLocaleDateString().replace('///g', '-')
				this.chartInstance = echarts.init(this.$refs.chartContainer)

				const xData = []
				const orderData = []
				const revenueData = []

				await orderTotal({
					...this.formInline,
				}).then((res) => {
					this.total_order_num = res.summary.total_count
					this.total_order_money = res.summary.total_money
					this.$nextTick()
					res.data.forEach((i) => {
						xData.push(i.value)
						orderData.push(i.count)
						revenueData.push(i.total_money)
					})
				})

				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()
				}
			},
			async getStationList() {
				await getStationList({
					page: 1,
					pageSize: 999,
				}).then((res) => {
					this.stationList = res.data.data
				})
			},
			async getPileList() {
				await getPileList({
					page: 1,
					pageSize: 999,
					charge_station_id: this.formInline.charge_station_id,
				}).then((res) => {
					this.pileList = res.data.data
				})
			},
			chage(e) {
				this.formInline.time = ''
				this.formInline.start_time = ''
				this.formInline.end_time = ''
				if (this.formInline.time_type == 4 || this.formInline.time_type == 5) {
					this.formInline.start_time = e[0]
					this.formInline.end_time = e[1]
				} else {
					this.formInline.time = e
				}
			},
			handleSubmit() {
				this.initChart()
			},
			changeStation(e) {
				this.getPileList()
			},
		},
	}
</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>