<template>
    <div class="stageDischargeLine">
        <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="stageDischargeLineEcharts" ref="stageDischargeLineEcharts"></div>
    </div>
</template>

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

let myChart = null;
export default {
    name: 'StageDischargeLine',
    props: {
        stageDischargeData: {
            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('.stageDischargeLineEcharts'));
            // 清空图表
            myChart.clear();
            let option = {
                grid: {
                    borderWidth: 1,
                    borderColor: '#ffffff',
                    left: '40px',
                    top: '65px',
                    right: '40px',
                    bottom: '60px',
                },
                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: {
                    orient: 'horizontal', // 'horizontal'
                    // width: 800,
                    data: [
                        {
                            name: '警戒水位',
                        },
                        {
                            name: '保证水位',
                        },
                        {
                            name: '监测水位',
                        },
                        {
                            name: '预报水位',
                        },
                        {
                            name: '监测流量',
                        },
                        {
                            name: '预报流量',
                        },
                        {
                            name: '降雨量',
                        },
                        {
                            name: '预报降雨量',
                        },
                        {
                            name: 'api预报水位',
                        },
                        {
                            name: '新安江预报水位',
                        },
                        {
                            name: '时空变源预报水位',
                        },
                        {
                            name: 'api预报流量',
                        },
                        {
                            name: '新安江预报流量',
                        },
                        {
                            name: '时空变源预报流量',
                        },
                    ],
                    selected: {
                        '预报降雨量': false,
                        'api预报水位': false,
                        '新安江预报水位': false,
                        '时空变源预报水位': false,
                        'api预报流量': false,
                        '新安江预报流量': false,
                        '时空变源预报流量': false,
                    },
                    textStyle: {
                        // 图列内容样式
                        color: '#ffffff', // 字体颜色
                    },
                    top: '5',
                    padding: [0, 55],
                    itemWidth: 15, //标志图形的长度
                    itemHeight: 5, //标志图形的宽度
                },
                tooltip: {
                    //鼠标悬停提示内容
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'cross', // 十字线显示
                    },
                    extraCssText: 'text-align: left;',
                },
                xAxis: [
                    //x轴
                    {
                        type: 'category',
                        axisLabel: {
                          /*interval: 0,*/
                          color: '#ffffff',
                        },
                        axisLine: {
                            show: true, //显示坐标轴
                            lineStyle: {
                                color: '#00effe', //坐标轴的颜色
                            },
                        },
                        data: this.stageDischargeData.tm,
                    },
                    //隐藏x轴
                    {
                        type: 'category',
                        position: 'bottom',
                        axisLabel: {
                          show: false,
                        },
                        axisLine: {
                            show: false, //显示坐标轴
                        },
                        data: ['', ''],
                        boundaryGap: false, //数据从 Y 轴起始
                    },
                ],
                yAxis: [
                    //两个y轴  左边y轴
                    {
                        type: 'value',
                        name: '水位\n(m)',
                        min: (value) => {
                            return value.min;
                        },
                        max: (value) => {
                            return value.max + 100;
                        },
                        nameTextStyle: {
                            color: '#ffffff',
                            padding: [0, 30, 0, 0],
                        },
                        axisLabel: {
                            show: true,
                            interval: 'auto',
                            formatter: '{value} ',
                            color: '#ffffff',
                        },
                        splitNumber: 10,
                        splitLine: {
                            show: false,
                        },
                        axisLine: {
                            show: true, //显示坐标轴
                            lineStyle: {
                                color: '#00effe', //坐标轴的颜色
                            },
                        },
                    },
                    //右边y轴
                    {
                        type: 'value',
                        name: '流量\n(m³/s)',
                        scale: true, // y轴自适应
                        /*min: 0,
                        max: 500,
                        interval: 100,*/
                        min: (value) => {
                            return value.min;
                        },
                        max: (value) => {
                          return value.max + 100;
                        },
                        nameTextStyle: {
                            color: '#ffffff',
                            padding: [0, 0, 0, 20],
                        },
                        //inverse:true, //Y轴数据逆向
                        axisLabel: {
                            show: true,
                            interval: 'auto',
                            formatter: '{value}',
                            color: '#ffffff',
                        },
                        splitNumber: 10,
                        splitLine: {
                            show: false,
                        },
                        splitArea: {
                            show: false,
                        },
                        axisLine: {
                            show: true, //显示坐标轴
                            lineStyle: {
                              color: '#00effe', //坐标轴的颜色
                            },
                        },
                    },
                    //右边y轴
                    {
                        type: 'value',
                        name: '降雨量\n(mm)',
                        scale: true, // y轴自适应
                        /*min: 0,
                        max: 500,
                        interval: 100,*/
                        min: (value) => {
                            return value.min;
                        },
                        max: (value) => {
                            return value.max + 100;
                        },
                        nameTextStyle: {
                            color: '#ffffff',
                            padding: [0, 0, 0, 35],
                        },
                        inverse:true, //Y轴数据逆向
                        axisLabel: {
                            show: false,
                            interval: 'auto',
                            formatter: '{value}',
                            color: '#ffffff',
                        },
                        splitNumber: 10,
                        splitLine: {
                            show: false,
                        },
                        splitArea: {
                            show: false,
                        },
                        axisLine: {
                            show: false, //显示坐标轴
                            lineStyle: {
                              color: '#00effe', //坐标轴的颜色
                            },
                        },
                    },
                ],
                series: [
                    {
                        name: '降雨量',
                        type: 'bar',
                        yAxisIndex: '2',
                        xAxisIndex: '0',
                        barWidth: 30,
                        itemStyle: {
                            normal: {
                                color: '#5470c6',
                            },
                        },
                        // emphasis: {
                        //     focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形
                        // },
                        data: this.stageDischargeData.drp,
                    },
                    {
                        name: '预报降雨量',
                        type: 'bar',
                        yAxisIndex: '2',
                        xAxisIndex: '0',
                        barGap: '-100%',
                        barWidth: 30,
                        itemStyle: {
                            normal: {
                                color: '#7bf60a',
                            },
                        },
                        // emphasis: {
                        //     focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形
                        // },
                        data: this.stageDischargeData.drpForecast,
                    },
                    //第一个折线图的数据
                    {
                        name: '监测水位',
                        type: 'line',
                        symbol: 'emptyCircle',
                        showAllSymbol: true, //动画效果
                        symbolSize: 0,
                        smooth: true, //光滑的曲线
                        yAxisIndex: '0',
                        xAxisIndex: '0',
                        itemStyle: {
                            normal: {
                                color: '#02a7f0',
                            },
                        },
                        emphasis: {
                            focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形
                        },
                        data: this.stageDischargeData.z,
                    },
                    {
                        name: '预报水位',
                        type: 'line',
                        symbol: 'emptyCircle',
                        showAllSymbol: true, //动画效果
                        symbolSize: 0,
                        smooth: true, //光滑的曲线
                        yAxisIndex: '0',
                        xAxisIndex: '0',
                        itemStyle: {
                            normal: {
                                color: '#02bd6e',
                                lineStyle: {
                                    type: [5, 2],
                                },
                            },
                        },
                        markLine: {
                            symbol: ['none'],
                            silent: true,
                            data: [
                                {
                                    xAxis: this.stageDischargeData.tmCurrent,
                                    lineStyle: {
                                        color: '#d9001b',
                                        type: [7, 2],
                                    },
                                    label: {
                                        show: true,
                                        color: '#ffffff',
                                        formatter: (val) => {
                                            return '当前时间：'+ val.value;
                                        },
                                    },
                                },
                            ],
                        },
                        emphasis: {
                            focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形
                        },
                        data: this.stageDischargeData.zForecast,
                    },
                    {
                        name: 'api预报水位',
                        type: 'line',
                        symbol: 'emptyCircle',
                        showAllSymbol: true, //动画效果
                        symbolSize: 0,
                        smooth: true, //光滑的曲线
                        yAxisIndex: '0',
                        xAxisIndex: '0',
                        itemStyle: {
                            normal: {
                                color: '#1423d9',
                                lineStyle: {
                                    type: [5, 2],
                                },
                            },
                        },
                        emphasis: {
                            focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形
                        },
                        data: this.stageDischargeData.zForecastAPI,
                    },
                    {
                        name: '新安江预报水位',
                        type: 'line',
                        symbol: 'emptyCircle',
                        showAllSymbol: true, //动画效果
                        symbolSize: 0,
                        smooth: true, //光滑的曲线
                        yAxisIndex: '0',
                        xAxisIndex: '0',
                        itemStyle: {
                            normal: {
                                color: '#dba969',
                                lineStyle: {
                                    type: [5, 2],
                                },
                            },
                        },
                        emphasis: {
                            focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形
                        },
                        data: this.stageDischargeData.zForecastXAJ,
                    },
                    {
                        name: '时空变源预报水位',
                        type: 'line',
                        symbol: 'emptyCircle',
                        showAllSymbol: true, //动画效果
                        symbolSize: 0,
                        smooth: true, //光滑的曲线
                        yAxisIndex: '0',
                        xAxisIndex: '0',
                        itemStyle: {
                            normal: {
                                color: '#afd564',
                                lineStyle: {
                                    type: [5, 2],
                                },
                            },
                        },
                        emphasis: {
                            focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形
                        },
                        data: this.stageDischargeData.zForecastSKBY,
                    },
                    //右边Y轴的数据
                    {
                        name: '监测流量',
                        type: 'line',
                        symbol: 'emptyCircle',
                        showAllSymbol: true, //动画效果
                        symbolSize: 0,
                        smooth: true, //光滑的曲线
                        yAxisIndex: '1',
                        xAxisIndex: '0',
                        itemStyle: {
                            normal: {
                                color: '#00ffff',
                            },
                        },
                        emphasis: {
                            focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形
                        },
                        data: this.stageDischargeData.q,
                    },
                    {
                        name: '预报流量',
                        type: 'line',
                        showAllSymbol: true, //动画效果
                        symbolSize: 0,
                        smooth: true, //光滑的曲线
                        yAxisIndex: '1',
                        xAxisIndex: '0',
                        itemStyle: {
                            normal: {
                                color: '#ffff00',
                                lineStyle: {
                                    type: [5, 2],
                                },
                            },
                        },
                        emphasis: {
                            focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形
                        },
                        data: this.stageDischargeData.qForecast,
                    },
                    {
                        name: 'api预报流量',
                        type: 'line',
                        showAllSymbol: true, //动画效果
                        symbolSize: 0,
                        smooth: true, //光滑的曲线
                        yAxisIndex: '1',
                        xAxisIndex: '0',
                        itemStyle: {
                            normal: {
                                color: '#16dbbc',
                                lineStyle: {
                                    type: [5, 2],
                                },
                            },
                        },
                        emphasis: {
                            focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形
                        },
                        data: this.stageDischargeData.qForecastAPI,
                    },
                    {
                        name: '新安江预报流量',
                        type: 'line',
                        showAllSymbol: true, //动画效果
                        symbolSize: 0,
                        smooth: true, //光滑的曲线
                        yAxisIndex: '1',
                        xAxisIndex: '0',
                        itemStyle: {
                            normal: {
                                color: '#d70ce7',
                                lineStyle: {
                                    type: [5, 2],
                                },
                            },
                        },
                        emphasis: {
                            focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形
                        },
                        data: this.stageDischargeData.qForecastXAJ,
                    },
                    {
                        name: '时空变源预报流量',
                        type: 'line',
                        showAllSymbol: true, //动画效果
                        symbolSize: 0,
                        smooth: true, //光滑的曲线
                        yAxisIndex: '1',
                        xAxisIndex: '0',
                        itemStyle: {
                            normal: {
                                color: '#fd784c',
                                lineStyle: {
                                    type: [5, 2],
                                },
                            },
                        },
                        emphasis: {
                            focus: 'series', //聚焦当前高亮的数据所在的系列的所有图形
                        },
                        data: this.stageDischargeData.qForecastSKBY,
                    },
                    {
                        name: '警戒水位',
                        type: 'line',
                        showAllSymbol: true, //动画效果
                        symbolSize: 0,
                        smooth: true, //光滑的曲线
                        yAxisIndex: '0',
                        xAxisIndex: '1',
                        itemStyle: {
                            normal: {
                                color: '#b8741a',
                                lineStyle: {
                                    type: 'soild',
                                },
                            },
                        },
                        label: {
                            show: true,
                            position: 'insideBottomLeft',
                            offset: [0, 4], // 文字偏移
                            textStyle: {
                                color: '#ffffff',
                            },
                            formatter: (params) => {
                                if (params.dataIndex === 0) {
                                    return '{a|警戒水位' + this.stageDischargeData.zWarn + 'm}';
                                } else {
                                    return '';
                                }
                            },
                            rich: {
                                a: {
                                    // borderColor: '#03eafb',
                                    // borderType: 'solid',
                                    // borderWidth: 1,
                                    padding: [3, 2, 0, 2],
                                },
                            },
                          },
                          data: [this.stageDischargeData.zWarn, this.stageDischargeData.zWarn],
                    },
                    {
                        name: '保证水位',
                        type: 'line',
                        showAllSymbol: true, //动画效果
                        symbolSize: 0,
                        smooth: true, //光滑的曲线
                        yAxisIndex: '0',
                        xAxisIndex: '1',
                        itemStyle: {
                            normal: {
                                color: '#d9001b',
                                lineStyle: {
                                    type: 'soild',
                                },
                            },
                        },
                        label: {
                            show: true,
                            position: 'insideBottomLeft',
                            offset: [0, 4], // 文字偏移
                            textStyle: {
                                color: '#ffffff',
                            },
                            formatter: (params) => {
                              if (params.dataIndex === 0) {
                                return '{a|保证水位' + this.stageDischargeData.zGuarantee + 'm}';
                              } else {
                                return '';
                              }
                            },
                            rich: {
                                a: {
                                    // borderColor: '#03eafb',
                                    // borderType: 'solid',
                                    // borderWidth: 1,
                                    padding: [3, 2, 0, 2],
                                },
                            },
                        },
                        data: [this.stageDischargeData.zGuarantee, this.stageDischargeData.zGuarantee],
                    },
                ],
            };
            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>
.stageDischargeLine {
    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;
                    }
                }
            }
        }
    }

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

}
</style>
