<template>
    <div class="bbsl-common-page">
        <div class="bbsl-content">
            <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 class="content-box">
                <div class="content-box-item" style="width: 100%">
                    <div class="item-titel">
                        <span>趋势统计</span>
                    </div>
                    <el-select
                        v-model="parmas.type"
                        placeholder="请选择"
                        @change="handlClick"
                    >
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        >
                        </el-option>
                    </el-select>
                    <el-date-picker
                        v-if="parmas.type == 'YYYY'"
                        v-model="parmas.time"
                        type="year"
                        format="yyyy"
                        value-format="yyyy"
                        placeholder="选择年"
                        @change="trendChange()"
                    >
                    </el-date-picker>
                    <el-date-picker
                        v-if="parmas.type == 'YYYY-MM'"
                        v-model="parmas.time"
                        type="month"
                        format="yyyy-MM"
                        value-format="yyyy-MM"
                        placeholder="选择月"
                        @change="trendChange()"
                    >
                    </el-date-picker>
                    <el-date-picker
                        v-if="parmas.type == 'YYYY-MM-DD'"
                        v-model="parmas.time"
                        type="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="trendChange()"
                        placeholder="选择日期"
                    >
                    </el-date-picker>
                    <div
                        id="trendEcharts"
                        class="full"
                        ref="trendEcharts"
                    ></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import req from '@/request.js'
import * as echarts from 'echarts'
import rainfallStatistics from '@/api/monitor/resMonitor/rainfallStatistics.js'
import moment from 'moment'
export default {
    data() {
        return {
            dateValue: '',
            dateList: [],
            trendList: [],
            parmas: {
                time: moment().format('YYYY'),
                type: 'YYYY',
            },
            options: [
                {
                    value: 'YYYY',
                    label: '年趋势',
                },
                {
                    value: 'YYYY-MM',
                    label: '月趋势',
                },
                {
                    value: 'YYYY-MM-DD',
                    label: '日趋势',
                },
            ],
            optionRain: null,
        }
    },
    created() {
        this.initialize()
    },
    mounted() {
        this.dateEcharts()
        this.trendEcharts()
        this.$root.$on('resize', () => {
            this.resize(500)
        })
    },
    methods: {
        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.dateValue = [monthOne, endTime]
            this.dateChange()
            this.trendChange()
        },
        handlClick() {
            if (this.parmas.type == 'YYYY') {
                this.parmas.time = moment().format('YYYY')
            } else if (this.parmas.type == 'YYYY-MM') {
                this.parmas.time = moment().format('YYYY-MM')
            } else if (this.parmas.type == 'YYYY-MM-DD') {
                this.parmas.time = moment().format('YYYY-MM-DD')
            }

            this.trendList = []
            this.trendChange()
        },
        dateChange(val) {
            this.dateValue[1] = this.dateValue[1].replace(
                '00:00:00',
                '23:59:59'
            )
            let parmas = {
                timeLine: this.dateValue,
                type: 'yyyy-MM-dd',
            }
            rainfallStatistics.chain(parmas, (res) => {
                if (res.state) {
                    this.dateList = res.value
                    this.$nextTick(() => {
                        this.dateEcharts()
                    })
                }
            })
        },
        trendChange() {
            rainfallStatistics.tendency(this.parmas, (res) => {
                if (res.state) {
                    this.trendList = res.value
                    this.$nextTick(() => {
                        this.trendEcharts()
                    })
                }
            })
        },
        trendEcharts() {
            let times = []
            let BNum = []
            this.trendList.forEach((e) => {
                times.push(e.x)
                BNum.push(e.y)
            })
            let chartDom = document.getElementById('trendEcharts')
            let trendEcharts = echarts.init(chartDom)
            let option = {
                grid: {
                    top: 35,
                    left: 60, // 调整这个属性
                    right: 60,
                },
                legend: {
                    show: true,
                },
                xAxis: {
                    type: 'category',
                    data: times,
                },
                yAxis: {
                    name: 'mm',
                    type: 'value',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                    },
                },
                series: [
                    {
                        data: BNum,
                        type: 'line',
                        smooth: true,
                        color: '#91CC75',
                    },
                ],
            }
            option && trendEcharts.setOption(option)
        },
        dateEcharts() {
            let times = []
            // let ANum = []
            let BNum = []
            this.dateList.forEach((e) => {
                times.push(e.x)
                let data = [e.x, e.y.current, e.appType]
                BNum.push(data)
            })
            let chartDom = document.getElementById('dateEcharts')
            this.dateEchart = echarts.init(chartDom)
            this.optionRain = {
                grid: {
                    top: 35,
                    left: 60, // 调整这个属性
                    right: 60,
                    bottom: 100,
                },
                xAxis: {
                    type: 'category',
                    data: times,
                },
                yAxis: {
                    name: 'mm',
                    type: 'value',
                },
                dataZoom: [
                    {
                        type: 'inside',
                    },
                ],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'none',
                    },
                },
                series: [
                    {
                        name: '雨量',
                        barMaxWidth: 40,
                        data: BNum,
                        type: 'bar',
                        showBackground: true,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {offset: 0, color: '#abed8d'},
                                    {offset: 1, color: '#91CC75'},
                                ]
                            ),
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0,
                                    0,
                                    0,
                                    1,
                                    [
                                        {offset: 0, color: '#91CC75'},
                                        {offset: 1, color: '#abed8d'},
                                    ]
                                ),
                            },
                        },
                    },
                ],
            }
            this.dateEchart.on('click', (params) => {
                if (params.data.length && params.data[2]) {
                    this.barNext(params.data[2])
                } else {
                    this.barNext()
                }
            })
            this.optionRain && this.dateEchart.setOption(this.optionRain)
        },
        barNext(appType) {
            this.dateValue[1] = this.dateValue[1].replace(
                '00:00:00',
                '23:59:59'
            )
            let parmas = {
                timeLine: this.dateValue,
                type: 'yyyy-MM-dd',
                appType,
            }
            rainfallStatistics.chain(parmas, (res) => {
                if (res.state) {
                    console.log(res.value)
                    this.dateList = res.value
                    let xAxis = []
                    let yAxis = []
                    this.dateList.forEach((e) => {
                        xAxis.push(e.x)
                        let data
                        if (appType) {
                            data = [e.x, e.y.current]
                            this.optionRain.xAxis.axisLabel = {
                                interval: 0,
                                rotate: 30,
                            }
                        } else {
                            this.optionRain.xAxis.axisLabel = {
                                interval: 0,
                                rotate: 0,
                            }
                            data = [e.x, e.y.current, e.appType]
                        }
                        yAxis.push(data)
                    })

                    this.optionRain.xAxis.data = xAxis
                    this.optionRain.series[0].data = yAxis
                    this.dateEchart.setOption(this.optionRain)
                }
            })
        },
    },
}
</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>
