<template>
    <div class="accumulatedRainfall">
        <div class="search">
            <div class="lately">
                <span>最近：</span>
                <ol>
                    <li
                        v-for="(value, key) in latelyTime"
                        :key="key"
                        @click="latelyTimeChange(value)"
                        :style="{'background-color': curlatelyTime == value ? '#f7a715' : '#0e6cac'}"
                    >
                      {{ value }}h
                    </li>
                </ol>
                <div class="custom">
                    <el-date-picker
                        v-model="customTime"
                        type="datetimerange"
                        range-separator="—"
                        start-placeholder="开始日期"
                        format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        end-placeholder="结束日期"
                        popper-class="scheduling-date"
                    />
                </div>

            </div>
        </div>
        <div class="accumulatedRainfallEcharts" ref="accumulatedRainfallEcharts"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {formatDate, getStartTime} from '/src/assets/js/time/DateTools';

let myChart = null;
export default {
    name: 'AccumulatedRainfall',
    props: {
        rainData: {
            type: Object,
            require: true,
        },
    },
    components: {
    },
    data() {
        return {
            latelyTime: [1, 3, 6, 12, 24, 48],
            curlatelyTime: 0,
            customTime: null,
        };
    },
    computed: {
    },
    watch: {
        customTime(val) {
            if (val) {
                this.customTimeChange(val);
            }
        },
        rainData(val) {
            this.$nextTick(() => {
                this.initEcharts();
            })
        },
    },
    methods: {
        //最近时间点击事件
        latelyTimeChange(value) {
            this.customTime = null;
            this.curlatelyTime = value;
            let time = [];
            const date = new Date();
            let endDate = formatDate(date);
            let startDate = getStartTime(endDate, value);
            // console.log([startDate, endDate]);
            this.$emit('timeChange',[startDate, endDate]);
        },
        customTimeChange(value) {
            this.curlatelyTime = 0;
            // console.log(value);
            this.$emit('timeChange',JSON.parse(JSON.stringify(value)));
        },
        initEcharts() {
            if (myChart) {
                myChart.dispose();
                myChart = null;
            }
            // 柱状图数据
            myChart = echarts.init(document.querySelector('.accumulatedRainfallEcharts'));
            // 清空图表
            myChart.clear();
            let option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999',
                        },
                    },
                },
                // 图标占满容器
                grid: {
                    top: '50px',
                    bottom: '60px',
                    left: '37px',
                    right: '37px',
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 100,
                        bottom: 0,
                        height: 20,
                    },
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 100,
                        xAxisIndex: [0],
                        backgroundColor: 'rgba(0,0,0,0)', // 背景颜色
                        dataBackgroundColor: '#eee', // 数据背景颜色
                        fillerColor: 'rgba(144,197,237,0.2)', // 填充颜色
                        handleColor: 'rgba(70,130,180,0.8)', // 手柄颜色
                        bottom: 10,
                        height: 25,
                    },
                ],
                legend: {
                    data: ['降雨量', '累计降雨量', '预报降雨量', '预报累计降雨量'],
                    y: 'center',
                    // right: 'right',
                    x: 'center',
                    top: 'top',
                    textStyle: {
                        color: '#fff',
                    },
                },
                xAxis: [
                    {
                      type: 'category',
                      data: this.rainData.tm,
                      axisPointer: {
                          type: 'shadow',
                      },
                      axisLabel: {
                          textStyle: {
                              color: '#fff',
                          },
                      },
                      axisLine: {
                          lineStyle: {
                              color: '#00effe',
                          },
                      },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '累计降雨量\n(mm)',
                        min: (value) => {
                            return value.min;
                        },
                        max: (value) => {
                            return value.max;
                        },
                        nameTextStyle: {
                          //y轴上方单位的颜色
                          color: '#fff',
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                              color: '#00effe',
                            },
                        },

                        axisLabel: {
                            //y轴文字的配置
                            textStyle: {
                              color: '#fff',
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                              color: 'rgba(255,255,255,0.1)',
                              width: 1,
                              type: 'solid',
                            },
                        },
                    },
                    {
                        type: 'value',
                        name: '降雨量\n(mm)',
                        min: (value) => {
                            return value.min;
                        },
                        max: (value) => {
                            return value.max;
                        },
                        nameTextStyle: {
                            //y轴上方单位的颜色
                            color: '#fff',
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                              color: '#00effe',
                            },
                            formatter: '{value} ',
                        },
                        axisLabel: {
                          //y轴文字的配置
                          textStyle: {
                            color: '#fff',
                          },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                              color: 'rgba(255,255,255,0.1)',
                              width: 1,
                              type: 'solid',
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '降雨量',
                        type: 'bar',
                        barWidth: 30,
                        data: this.rainData.drp,
                    },
                    {
                        name: '预报降雨量',
                        type: 'bar',
                        barGap: '-100%',
                        barWidth: 30,
                        data: this.rainData.drpForecast,
                        markLine: {
                            symbol: ['none'],
                            silent: true,
                            data: [
                                {
                                    xAxis: this.rainData.tmCurrent,
                                    lineStyle: {
                                        color: '#d9001b',
                                        type: [7, 2],
                                    },
                                    label: {
                                        show: true,
                                        color: '#ffffff',
                                        formatter: (val) => {
                                            return '当前时间：'+ val.value;
                                        },
                                    },
                                },
                            ],
                        },
                    },
                    {
                        name: '累计降雨量',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            },
                        },
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 2,
                                    type: 'solid', //'dotted'虚线 'solid'实线
                                },
                            },
                        },
                        data: this.rainData.totalDrp,
                    },
                    {
                        name: '预报累计降雨量',
                        type: 'line',
                        yAxisIndex: 1,
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            },
                        },
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    width: 2,
                                    type: 'dotted', //'dotted'虚线 'solid'实线
                                },
                            },
                        },
                        data: this.rainData.totalDrpForecast,
                    },
                ],
            };
            myChart.setOption(option, true);
            window.addEventListener('resize', () => {
                myChart.resize()
            });
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.initEcharts();
        })
    },
    beforeUnmount() {
        if (myChart) {
            myChart.dispose();
            myChart = null;
        }
    },
}
</script>

<style lang="less" scoped>
.accumulatedRainfall {
    width: 100%;
    height: 100%;

    .search {
        width: 100%;
        height: 55px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        .lately {
            display: flex;
            align-items: center;
            ol {
                display: flex;
                padding: 0px;
                li {
                    width: 32px;
                    height: 32px;
                    display: inline-block;
                    border-radius: 50%;
                    background: #0e6cac;
                    line-height: 32px;
                    text-align: center;
                    margin-left: 6px;
                    color: #fff;
                    cursor: pointer;
                    // 解决鼠标点快了文字会被选中问题
                    -webkit-user-select:none;/*谷歌 /Chrome*/
                    -moz-user-select:none; /*火狐/Firefox*/
                    -ms-user-select:none;    /*IE 10+*/
                    user-select:none;
                }
            }

            .custom {
                margin-left: 10px;

                :deep(.el-date-editor.el-input__wrapper) {
                    box-shadow: none;

                    &:hover {
                        box-shadow: none;
                    }
                }
            }
        }
    }

    .accumulatedRainfallEcharts {
        width: 100%;
        height: calc(100% - 65px);
    }

}
</style>
