<template>
	<div class="bbsl-common-page">
		<!-- <div class="bbsl-table-search"></div> -->
		<div class="bbsl-content">
			<div class="content-box">
				<div class="content-box-item">
					<div class="item-titel">
						<span>年统计</span>
					</div>
					<el-date-picker v-model="yeartsStart" :picker-options="startDatePicker" value-format="yyyy"
						size="mini" type="year" @change="yearChange('year')" placeholder="开始时间">
					</el-date-picker>
					至
					<el-date-picker v-model="yeartsEnd" value-format="yyyy" @change="yearChange('year')" size="mini"
						:picker-options="endDatePicker" type="year" placeholder="结束时间">
					</el-date-picker>
					<div id="yearEcharts" class="full" ref="yearEcharts"></div>
				</div>
				<div class="content-box-item">
					<div class="item-titel">
						<span>月统计</span>
					</div>
					<el-date-picker v-model="monthValue" type="monthrange" range-separator="至" start-placeholder="开始月份"
						size="mini" value-format="yyyy-MM-dd HH:mm:ss" end-placeholder="结束月份" @change="monthChange">
					</el-date-picker>
					<div id="monthEcharts" class="full" ref="monthEcharts"></div>
				</div>
			</div>
			<div class="content-box">
				<div class="content-box-item" style="width: 100%">
					<div class="item-titel">
						<span>日统计</span>
					</div>
					<el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期"
						size="mini" value-format="yyyy-MM-dd HH:mm:ss" end-placeholder="结束日期" @change="dateChange">
					</el-date-picker>
					<div id="dateEcharts" class="full" ref="dateEcharts"></div>
				</div>
			</div>
		</div>
		<CYearWaterPoint ref="CYearWaterPoint"></CYearWaterPoint>
		<CMonthWaterPoint ref="CMonthWaterPoint"></CMonthWaterPoint>
		<CDateWaterPoint ref="CDateWaterPoint"></CDateWaterPoint>
	</div>
</template>

<script>
	import req from '@/request.js'
	import * as echarts from 'echarts'
	import {
		TableMixin
	} from '@/mixins/tableMixin'
	import waterPointContrast from '@/api/monitor/otherMonitor/waterPointContrast.js'
	import CYearWaterPoint from './components/CYearWaterPoint.vue'
	import CMonthWaterPoint from './components/CMonthWaterPoint.vue'
	import CDateWaterPoint from './components/CDateWaterPoint.vue'
	export default {
		name: 'waterPointContrast',
		components: {
			CYearWaterPoint,
			CMonthWaterPoint,
			CDateWaterPoint
		},
		data() {
			return {
				startDatePicker: this.beginDate(),
				endDatePicker: this.processDate(),
				yeartsStart: '',
				yeartsEnd: '',
				monthValue: '',
				dateValue: '',
				yearEchart: null,
				monthEchart: null,
				dateEchart: null,
				parmas: {
					timeLine: [],
					type: '',
				},
				monthList: [],
				yearList: [],
				dateList: []
			}
		},
		created() {
			this.initialize()
		},
		mounted() {
			this.yearEcharts()
			this.monthEcharts()
			this.dateEcharts()
			this.$root.$on('resize', () => {
				this.resize(500)
			})
		},
		methods: {
			resize(delay) {
				// 动态计算表格的高度，自适应当前容器
				setTimeout(() => {
					this.yearEchart.resize()
					this.monthEchart.resize()
					this.dateEchart.resize()
				}, delay || 0)
			},
			initialize() {
				var moment = require('moment') //打开时默认时间为一天前至获取当前年月日时分秒
				let endTime = moment().format('YYYY-MM-DD 23:59:59') //当前年月日
				let January = moment(new Date().getFullYear() + "-" + "01").format('YYYY-MM-DD 00:00:00'); //当年一月
				let monthOne = moment().startOf('month').format('YYYY-MM-DD 00:00:00'); //当月第一天
				let oneYearTime = moment(new Date()).subtract(1, 'years').format('YYYY-MM-DD 00:00:00'); //前一月
				let oneEonthTime = moment(new Date()).subtract(1, 'months').format('YYYY-MM-DD 00:00:00'); //前一月
				let oneDayTime = moment(new Date()).subtract(1, 'day').format('YYYY-MM-DD 00:00:00'); //前一天
				this.yeartsStart = oneYearTime
				this.yeartsEnd = endTime
				this.monthValue = [January, endTime]
				this.dateValue = [monthOne, endTime]
				this.yearChange()
				this.monthChange()
				this.dateChange()
			},
			yearChange(val) {
				let times = []
				if (val) {
					if (this.yeartsStart.length == 4 && this.yeartsEnd.length == 19) {
						times = [this.yeartsStart + '-01-01 00:00:00', this.yeartsEnd]
					} else if (this.yeartsEnd.length == 4 && this.yeartsStart.length == 19) {
						times = [this.yeartsStart, this.yeartsEnd + '-12-31 23:59:59']
					} else if (this.yeartsEnd.length == 4 && this.yeartsStart.length == 4) {
						times = [this.yeartsStart + '-01-01 00:00:00', this.yeartsEnd + '-12-31 23:59:59']
					}
				} else {
					times = [this.yeartsStart, this.yeartsEnd]
				}
				let parmas = {
					timeLine: times,
					type: 'yyyy'
				}
				waterPointContrast.stationStatistics(parmas, res => {
					if (res.state) {
						this.yearList = res.value
						this.$nextTick(() => {
							this.yearEcharts()
						})
					}
				})
			},
			monthChange(val) {
				this.monthValue[1] = this.createEndTime(this.monthValue[1])
				let parmas = {
					timeLine: this.monthValue,
					type: 'yyyy-MM'
				}
				waterPointContrast.stationStatistics(parmas, res => {
					if (res.state) {
						this.monthList = res.value
						this.$nextTick(() => {
							this.monthEcharts()
						})
					}
				})
			},
			dateChange(val) {
				this.dateValue[1] = this.dateValue[1].replace('00:00:00', '23:59:59')
				console.log(this.dateValue);
				let parmas = {
					timeLine: this.dateValue,
					type: 'yyyy-MM-dd'
				}
				waterPointContrast.stationStatistics(parmas, res => {
					if (res.state) {
						this.dateList = res.value
						this.$nextTick(() => {
							this.dateEcharts()
						})
					}
				})
			},
			createEndTime(startTimeString) {
				var moment = require('moment') //打开时默认时间为一天前至获取当前年月日时分秒
				let currDate = moment(startTimeString)
				let date = new Date(parseInt(currDate.endOf("month").valueOf()))
				let Y = date.getFullYear() + '-';
				let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
				let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
				return Y + M + D + '23:59:59'
			},
			getData() {
				waterPointContrast.stationStatistics(this.parmas, res => {
					if (res.state) {
						if (this.parmas.type == 'yyyy') {
							this.yearList = res.value
						} else if (this.parmas.type == 'yyyy-MM') {
							this.monthList = res.value
						} else if (this.parmas.type == 'yyyy-MM-dd') {
							this.dateList = res.value
						}
						this.$nextTick(() => {
							this.yearEcharts()
							this.monthEcharts()
							this.dateEcharts()
						})
					}
				})
			},
			beginDate() {
				let self = this
				return {
					disabledDate(time) {
						if (self.yeartsEnd !== '') {
							let fixedTime = new Date(time)
							return fixedTime.getFullYear() > self.yeartsEnd
						}
					}
				}
			},
			// 提出结束时间必须大于提出开始时间
			processDate() {
				let self = this
				return {
					disabledDate(time) {
						let fixedTime = new Date(time)
						return fixedTime.getFullYear() < self.yeartsStart
					}
				}
			},
			startTime(val) {

			},
			yearEcharts() {
				let times = []
				let ANum = []
				let BNum = []
				this.yearList.forEach(e => {
					times.push(e.x)
					ANum.push(e.ychain.last)
					BNum.push(e.ychain.current)
				})
				let chartDom = document.getElementById('yearEcharts')
				this.yearEchart = echarts.init(chartDom)
				let option = {
					grid: {
						top: 35,
						left: 70, // 调整这个属性
					},
					xAxis: {
						type: 'category',
						data: times
					},
					legend: {
						show: true,
						data: ['当前', '环比'],
					},
					yAxis: {
						name: '万m³',
						type: 'value'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					series: [{
						name: '当前',
						data: BNum,
						type: 'bar',
						color: "#91CC75",
					}, {
						name: '环比',
						data: ANum,
						type: 'bar',
						color: "#FFB938",
					}]
				};
				option && this.yearEchart.setOption(option)
				// 点击事件
				this.yearEchart.on('click', parmas => {
					this.$refs.CYearWaterPoint.handleOpen(parmas.name)
					console.log(parmas.name);
					// console.log(parmas);
				})
			},
			monthEcharts() {
				let times = []
				let ANum = []
				let BNum = []
				this.monthList.forEach(e => {
					times.push(e.x)
					ANum.push(e.ychain.last)
					BNum.push(e.ychain.current)
				})
				let chartDom = document.getElementById('monthEcharts')
				this.monthEchart = echarts.init(chartDom)
				let option = {
					grid: {
						top: 35,
						left: 70, // 调整这个属性
					},
					xAxis: {
						type: 'category',
						data: times
					},
					legend: {
						show: true,
						data: ['当前', '环比'],
					},
					yAxis: {
						name: '万m³',
						type: 'value'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					series: [{
						name: '当前',
						data: BNum,
						type: 'bar',
						color: "#91CC75",
					}, {
						name: '环比',
						data: ANum,
						type: 'bar',
						color: "#FFB938",
					}]
				};
				option && this.monthEchart.setOption(option)
				// 点击事件
				this.monthEchart.on('click', parmas => {
					this.$refs.CMonthWaterPoint.handleOpen(parmas.name)
					console.log(parmas.name);
					// console.log(parmas);
				})
			},
			dateEcharts() {
				let times = []
				let ANum = []
				let BNum = []
				this.dateList.forEach(e => {
					times.push(e.x)
					ANum.push(e.ychain.last)
					BNum.push(e.ychain.current)
				})
				let chartDom = document.getElementById('dateEcharts')
				this.dateEchart = echarts.init(chartDom)
				let option = {
					grid: {
						top: 35,
						left: 60, // 调整这个属性
						right: 60,
					},
					legend: {
						show: true,
						data: ['当前', '环比'],
					},
					xAxis: {
						type: 'category',
						data: times
					},
					yAxis: {
						name: '万m³',
						type: 'value'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					series: [{
						name: '当前',
						data: BNum,
						type: 'bar',
						color: "#91CC75",
					}, {
						name: '环比',
						data: ANum,
						type: 'bar',
						color: "#FFB938",
					}]
				};
				option && this.dateEchart.setOption(option)
				// 点击事件
				this.dateEchart.on('click', parmas => {
					this.$refs.CDateWaterPoint.handleOpen(parmas.name)
					console.log(parmas.name);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.bbsl-content {
		height: 100%;
		padding: 20px 20px;
		background-color: #fff;
		box-shadow: 0px 0px 12px 0 rgba($color: #000000, $alpha: 0.1);
		position: relative;

		.content-box {
			width: 100%;
			height: 48%;
			display: flex;
			justify-content: space-between;

			.content-box-item {
				height: 100%;
				width: 48%;

				.item-titel {
					padding: 10px 0;
					color: #409eff;
					font-size: 20px !important;
					font-weight: 700;

				}
			}
		}
	}

	.full {
		height: calc(100% - 50px);
	}
</style>
