<template>
    <dv-loading v-if="loading">Loading...</dv-loading>
    <div v-else class="meteorologica">
        <meteorologica-header v-if="headerHas"></meteorologica-header>
        <div class="meteorologica-content" :style="{height: headerHas ? '35%' : '45%'}">
            <div class="content-left">
                <div class="content-left-wendu-box">
                    <span class="content-left-wendu">{{ weatherData.wd }}</span>
                    <span v-if="futureWeather && futureWeather[0]" class="content-left-tianqi">{{ futureWeather[0].weather }}</span>
                </div>
                <ul class="content-left-list">
                    <li><i class="iconfont">&#xe60a;</i>湿度: {{ weatherData.hs }}</li>
                    <li><i class="iconfont">&#xe6f7;</i>风向: {{ weatherData.fx }}</li>
                    <li><i class="iconfont">&#xe6ad;</i>顺时风速: {{ weatherData.sfs }}</li>
                    <li><i class="iconfont">&#xed19;</i>气压: {{ weatherData.qy }}</li>
                    <li><i class="iconfont">&#xe61c;</i>PM2.5: {{ weatherData.pM2_5 }}</li>
                    <li><i class="iconfont">&#xe8c3;</i>PM10: {{ weatherData.pM10 }}</li>
                    <li><i class="iconfont">&#xea33;</i>露点温度: {{ weatherData.ldwd }}</li>
                    <li><i class="iconfont">&#xea32;</i>光照度: {{ weatherData.gzd }}</li>
                    <li><i class="iconfont">&#xe61d;</i>噪声: {{ weatherData.zs }}</li>
                </ul>
            </div>
            <div class="content-right">
                <weather-icon v-if="futureWeather && futureWeather[0]" :width="'130px'"
                    :weather="futureWeather[0].weather" class="content-right-icon"></weather-icon>
            </div>
        </div>
        <div class="meteorologica-data">
            <div class="meteorologica-data-bottom-left">
                <div class="meteorologica-data-bottom-left-header">
                    <span class="meteorologica-data__title">5日天气预报</span>
                </div>

                <div class="meteorologica-data-bottom-left-prediction">
                    <ul>
                        <li v-for="(i, key) in futureWeather" :key="key">
                            <span class="day">{{ key == 0 ? '今天' : (key == 1 ? '明天' : `周${formatWeek(i.date)}`) }}</span>
                            <span class="date">{{ formatTime(i.date, 'yyyy年MM月dd日') }}</span>
                            <div class="ct-daytime">
                                <span class="weather">{{ i.weather }}</span>
                                <weather-icon :weather="i.weather"></weather-icon>
                            </div>
                            <span class="temperature">{{i.mintemp}}℃~{{i.maxtemp}}℃</span>
                            <span class="wind">{{ i.direct }}</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="meteorologica-data-bottom-right">
                <div class="meteorologica-data-bottom-right-header">
                    <span class="meteorologica-data__title">气象监测数据趋势图</span>
                    <ul class="meteorologica-data-trend-legend">
                        <li v-for="(item, key) in tempType" :key="key" 
                            :class="{active: tempActive == key}"
                            @click="changeTempType(key)">{{ item }}</li>
                    </ul>
                </div>
                <div class="meteorologica-data-trend">
                    <echart :options="options"
                        id="meteorologica-data-trend">
                    </echart>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { currentGET, currentPOST } from 'api/modules'
import MeteorologicaHeader from './meteorologica-header.vue'
import WeatherIcon from './weatherIcon.vue'
import { formatTime, formatWeek } from "@/utils/index.js";

export default {
    name: 'meteorologica',

    components: {
        MeteorologicaHeader,
        WeatherIcon
    },

    data() {
        return {
            env: process.env.NODE_ENV,
            loading: true,
            weatherTiming: null,
            
            headerHas: true,

            tempType: ['温度', '湿度', 'PM2.5', 'PM10', '噪音', '风力'],
            tempActive: 0,

            weatherData: {},
            weatherHistory: [],

            dateChoose: '',

            options: {},

            today: formatTime(new Date(), "yyyy-MM-dd"),

            todayWeather: {},
            futureWeather: []
        }
    },

    computed: {
        tomorrow() {
            const today = new Date();
            let tomorrow = new Date(today.getTime() + 24*60*60*1000)
            tomorrow = formatTime(tomorrow, "yyyy-MM-dd")

            return tomorrow;
        }
    },

    methods: {
        formatTime,
        formatWeek,

        changeTempType(key) {
            this.tempActive = key;

            const data = this.weatherHistory;
            const xAxisData = data.map(item => formatTime(item.createTime, "HH:mm"))

            if (key == 0) {
                let wenduData = data.map(item => item.wd)
                    wenduData = this.patternArr(wenduData)

                this.initChart(xAxisData, wenduData, '温度', '℃');
            } else if (key == 1) {
                let shiduData = data.map(item => item.hs);
                    shiduData = this.patternArr(shiduData)

                this.initChart(xAxisData, shiduData, '湿度', '%RH');
            } else if (key == 2) {
                let pM25Data = data.map(item => item.pM2_5);
                    pM25Data = this.patternArr(pM25Data)

                this.initChart(xAxisData, pM25Data, 'PM2.5', 'μg/m³');
            } else if (key == 3) {
                let pM10Data = data.map(item => item.pM10);
                    pM10Data = this.patternArr(pM10Data)

                this.initChart(xAxisData, pM10Data, 'PM10', 'μg/m³');
            } else if (key == 4) {
                let zsData = data.map(item => item.zs);
                    zsData = this.patternArr(zsData)

                this.initChart(xAxisData, zsData, '噪声', 'dB');
            } else if (key == 5) {
                let sfsData = data.map(item => item.sfs);
                sfsData = this.patternArr(sfsData)

                this.initChart(xAxisData, sfsData, '风力', 'm/s');
            }
        },

        handleGetWeatherData() {
            const baseUrl = this.env == 'development' ? 'weather' : 'http://1.190.195.54:20084'

            currentGET(baseUrl + "/WeatherForecast/NewWeather")
			.then((res) => {
                this.weatherData = res.data;
            });
        },

        handleGetWeatherList() {
            const baseUrl = this.env == 'development' ? 'weather' : 'http://1.190.195.54:20084'

            currentPOST(baseUrl + "/WeatherForecast/pages", {
                "page": 1,
                "limit": 2000,
                "beginDate": this.today+"T00:00:00.017Z",
                "endDate": this.tomorrow+"T00:00:00.017Z"
            })
			.then((res) => {
                this.weatherHistory = res.data.list;
                
                this.changeTempType(0);
            });
        },

        handleGetWeatherForecast() {
            const baseUrl = this.env == 'development' ? 'forecast' : 'http://1.190.195.54:9052'
            currentPOST(baseUrl + "/x_program_center/jaxrs/invoke/meteorologicaMonitoring/execute")
			.then((res) => {
                this.todayWeather = res;
                this.futureWeather = res.future ? JSON.parse(res.future) : [];
            });

            this.loading = false;
        },


        // 去除符号
        patternArr(data) {
            // const pattern = /\d+\.?\d*/g;
            const pattern = /-?\d+\.?\d*/g;

            return data.map(item => item.match(pattern)[0]);
        },

        initChart(x, y, type, unit) {
            this.options = {
                title: {
                    text: ''
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: x
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisLabel: {
                            formatter: '{value}'+ unit
                        }
                    }
                ],
                grid: {
                    left: "10%",
                    right: "30px",
                    bottom: "40px",
                    top: "30px",
                },
                series: [
                    {
                        name: type,
                        type: 'line',
                        smooth: true,
                        data: y,
                        markPoint: {
                            data: [
                                { type: 'max', name: 'Max' },
                                { type: 'min', name: 'Min' }
                            ]
                        },
                        areaStyle: {},
                        emphasis: {
                            focus: 'series'
                        }
                    }
                ]
            };
        },



        askWeather() {
            this.weatherTiming = setInterval(() => {
                this.handleGetWeatherData()
                this.handleGetWeatherList()
                this.handleGetWeatherForecast()
            }, 300000);
        }
    },

    mounted() {
        this.handleGetWeatherData()
        this.handleGetWeatherList()
        this.handleGetWeatherForecast()

        this.askWeather()

        this.headerHas = this.$route.query.header == 0 ? false : true;
    },

    beforeDestroy() {
      clearInterval(this.weatherTiming);
    }
}
</script>
<style lang="scss" scoped>
.meteorologica {
    width: 100vw;
    min-width: 1400px;
    height: 100vh;
    min-height: 100vh;
    background: #f6f9fe url(../../assets/img/weather-bg.jpg) no-repeat center top;
    background-size: 100% 65%;
    box-sizing: border-box;
    overflow: hidden;

    .meteorologica-content {
        box-sizing: border-box;
        width: 100%;
        height: 35%;
        margin: 32px auto 0;
        padding: 0 2% 0 4%;
        display: flex;
        color: #fff;
    }
    .content-left {
        width: 65%;
        .content-left-wendu-box {
            .content-left-wendu {
                display: inline-block;
                font-size: 75px;
                height: 75px;
                line-height: 75px;
                margin-right: 6px;
            }
            .content-left-tianqi {
                display: inline-block;
                font-size: 24px;
                line-height: 40px;
                height: 40px;
                margin-left: 24px;
            }
        }
        .content-left-list {
            display: flex;
            flex-wrap: wrap;
            
            font-size: 20px;
            margin-top: 20px;
            height: calc(100% - 100px);
            li {
                display: flex;
                align-items: center;
                min-width: 33%;
                height: 33%;
                i {
                    font-size: 22px;
                    margin-right: 10px;
                }
            }
        }
    }
    .content-right {
        box-sizing: border-box;
        position: relative;
        width: 35%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .meteorologica-data {
        width: 100%;
        height: 45%;
        margin-top: 20px;
        padding: 0 2%;

        display: flex;
        justify-content: space-between;
        box-sizing: border-box;

        .meteorologica-data-bottom-right,
        .meteorologica-data-bottom-left {
            width: 49%;
            border-radius: 10px;
            background-color: #fff;
            box-shadow: 0 0 14px 0 rgba(0,0,0,.08);
            height: 100%;
            box-sizing: border-box;

            .meteorologica-data-bottom-right-header,
            .meteorologica-data-bottom-left-header {
                margin-bottom: 18px;
                margin-left: 30px;
                padding-top: 10px;
            }
            
            .meteorologica-data__title {
                font-size: 18px;
                font-weight: 600;
                color: #344665;
                line-height: 25px;
                height: 25px;
                position: relative;
                padding-left: 5px;
            }
            .meteorologica-data__title::before {
                content: '';
                width: 4px;
                height: 19px;
                background-color: #124edb;
                border-radius: 4px;
                position: absolute;
                top: 4px;
                left: -10px;
            }
        }

        .meteorologica-data-bottom-right-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 24px 0 0;
            cursor: pointer;

            .meteorologica-data-trend-legend {
                display: flex;
                & > li {
                    padding: 6px 8px;
                    border-radius: 4px;
                    color: #344665;
                }
                & > li.active {
                    background: #124edb;
                    color: #fff;
                }
                & > li + li {
                    margin-left: 12px;
                }
            }
        }

        .meteorologica-data-bottom-left-prediction {
            width: 100%;
            height: calc(100% - 53px);
            padding: 12px 0;
            box-sizing: border-box;

            ul {
                display: flex;
                width: 100%;
                height: 100%;
                padding-bottom: 12px;
                box-sizing: border-box;
            }
            li {
                width: calc(100% / 5);
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                .day {
                    font-size: 16px;
                    color: #384c78;
                    height: 16px;
                    line-height: 16px;
                }
                .date {
                    font-size: 14px;
                    color: #8a9baf;
                    height: 14px;
                    line-height: 14px;
                }
                .ct-daytime {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .weather {
                        margin-bottom: 20px;
                        font-size: 16px;
                        color: #384c78;
                        line-height: 16px;
                        height: 16px;
                    }
                }
                .temperature {
                    font-size: 16px;
                    color: #384c78;
                    line-height: 16px;
                    height: 16px;
                }
                .wind {
                    font-size: 14px;
                    color: #8a9baf;
                    line-height: 14px;
                    height: 14px;
                }
            }
        }

        .meteorologica-data-trend {
            width: 100%;
            height: calc(100% - 56px);
        }
    }
}
</style>