import * as echarts from '../../ec-canvas/echarts';
const app = getApp();

//pm2.5及pm10折线图
var xData_1 = [];
function initChart_1(chart_1, xData_1, yData_1_1, yData_1_2) {
    var option_1 = {
        color: ['#ffa245', '#5a8df6'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['PM2.5', 'PM10'],
            textStyle: {
                color: "#fff",
                fontSize: 10
            }
        },
        grid: {
            top: '22%',
            left: '0%',
            right: '1%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: xData_1,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(39,51,75,0.8)'
                }
            },
            axisLabel: {
                color: '#a2d4e6',
                rotate: 45,
                textStyle: {
                    fontSize: 10
                },
            },
        }],
        yAxis: {
            type: 'value',
            name: "ug/m³",
            nameTextStyle: {
                color: "#008fe9",
                fontSize: 11
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#008fe9",
                    fontSize: 10
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(39,51,75,0.5)'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(39,51,75,0.8)'
                }
            },
        },
        series: [
            {
                name: 'PM2.5',
                type: 'line',
                data: yData_1_1,
                symbol: 'circle',
                smooth: true,
                lineStyle: {
                    color: '#ffa245',
                    width: 3
                },
            },
            {
                name: 'PM10',
                type: 'line',
                data: yData_1_2,
                symbol: 'circle',
                smooth: true,
                lineStyle: {
                    color: '#5a8df6',
                    width: 3
                },
            }
        ]
    }
    chart_1.setOption(option_1);
}

//噪音折线图
function initChart_2(chart_2, xData_2, yData_2) {
    var option_2 = {
        color: ['#5a8df6'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['噪音'],
            textStyle: {
                color: "#fff",
                fontSize: 10
            }
        },
        grid: {
            top: '22%',
            left: '0%',
            right: '1%',
            bottom: '0%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: xData_2,
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(39,51,75,0.8)'
                }
            },
            axisLabel: {
                color: '#a2d4e6',
                rotate: 45,
                textStyle: {
                    fontSize: 10
                },
            },
        }],
        yAxis: {
            type: 'value',
            name: "db",
            nameTextStyle: {
                color: "#008fe9",
                fontSize: 11
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: "#008fe9",
                    fontSize: 10
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(39,51,75,0.5)'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(39,51,75,0.8)'
                }
            },
        },
        series: [
            {
                name: '噪音',
                type: 'line',
                data: yData_2,
                symbol: 'circle',
                smooth: true,
                lineStyle: {
                    color: '#5a8df6',
                    width: 3
                },
            }
        ]

    }
    chart_2.setOption(option_2);
}

//环境管理pm2.5饼图
function initChart_3(chart_3, dataArr_3) {
    var option_3 = {
        series: [{
            name: "外部进度条",
            type: "gauge",
            center: ['23%', '55%'],
            radius: '90%',
            min: 0, //最小刻度
            max: 300, //最大刻度
            splitNumber: 6,
            startAngle: 230,
            endAngle: -50,
            axisLine: {
                lineStyle: {
                    color: [
                        [dataArr_3 / 300, "#468EFD"],
                        [1, "#1e4973"]
                    ],
                    width: 8
                }
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,

            },
            splitLine: {
                show: false,
            },
            itemStyle: {
                show: false,
            },
            detail: {
                formatter: function (value) {
                    if (value !== 0) {
                        var num = Math.round(value);
                        return parseInt(num).toFixed(0);
                    } else {
                        return 0;
                    }
                },
                textStyle: {
                    padding: [-50, 0, 0, 0],
                    fontSize: 10,
                    color: '#00f4ff',
                    fontSize: 25,
                    fontWeight: 900
                }
            },
            title: { //标题
                show: true,
                offsetCenter: [0, 50], // x, y，单位px
                textStyle: {
                    color: "#00c3fd",
                    fontSize: 14, //表盘上的标题文字大小
                }
            },
            data: [{
                name: "PM2.5",
                value: dataArr_3,
            }],
            pointer: {
                show: true,
                length: '75%',
                radius: '20%',
                width: 2, //指针粗细
            },
            animationDuration: 4000,
        },
        {
            name: '内部刻度',
            type: 'gauge',
            center: ['23%', '55%'],
            radius: '65%',
            min: 0, //最小刻度
            max: 300, //最大刻度
            splitNumber: 6, //刻度数量
            startAngle: 230,
            endAngle: -50,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: [
                        [1, 'rgba(0,0,0,0)']
                    ]
                }
            }, //仪表盘轴线

            axisLabel: {
                show: true,
                color: '#4d5bd1',
                distance: 10,
                textStyle: {
                    color: '#468EFD', //用颜色渐变函数不起作用
                    fontSize: 10,
                },

            }, //刻度标签。
            axisTick: {
                show: true,
                splitNumber: 5,
                lineStyle: {
                    color: '#468EFD', //用颜色渐变函数不起作用
                    width: 1,
                },
                length: -6
            }, //刻度样式
            splitLine: {
                show: true,
                length: -8,
                lineStyle: {
                    color: '#468EFD', //用颜色渐变函数不起作用
                }
            }, //分隔线样式
            detail: {
                show: false
            },
            pointer: {
                show: false
            }
        },
        ]
    };
    chart_3.setOption(option_3);
}

//环境管理pm10饼图
function initChart_4(chart_4, dataArr_4) {
    var option_4 = {
        series: [{
            name: "外部进度条",
            type: "gauge",
            center: ['77%', '55%'],
            radius: '90%',
            min: 0, //最小刻度
            max: 150, //最大刻度
            splitNumber: 6,
            startAngle: 230,
            endAngle: -50,
            axisLine: {
                lineStyle: {
                    color: [
                        [dataArr_4 / 150, "#468EFD"],
                        [1, "#1e4973"]
                    ],
                    width: 8
                }
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,

            },
            splitLine: {
                show: false,
            },
            itemStyle: {
                show: false,
            },
            detail: {
                formatter: function (value) {
                    if (value !== 0) {
                        var num = Math.round(value);
                        return parseInt(num).toFixed(0);
                    } else {
                        return 0;
                    }
                },
                textStyle: {
                    padding: [-50, 0, 0, 0],
                    fontSize: 10,
                    color: '#00f4ff',
                    fontSize: 25,
                    fontWeight: 900
                }
            },
            title: { //标题
                show: true,
                offsetCenter: [0, 50], // x, y，单位px
                textStyle: {
                    color: "#00c3fd",
                    fontSize: 14, //表盘上的标题文字大小
                }
            },
            data: [{
                name: "PM10",
                value: dataArr_4,
            }],
            pointer: {
                show: true,
                length: '75%',
                radius: '20%',
                width: 2, //指针粗细
            },
            animationDuration: 4000,
        },
        {
            name: '内部刻度',
            type: 'gauge',
            center: ['77%', '55%'],
            radius: '65%',
            min: 0, //最小刻度
            max: 150, //最大刻度
            splitNumber: 6, //刻度数量
            startAngle: 230,
            endAngle: -50,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: [
                        [1, 'rgba(0,0,0,0)']
                    ]
                }
            }, //仪表盘轴线

            axisLabel: {
                show: true,
                color: '#4d5bd1',
                distance: 10,
                textStyle: {
                    color: '#468EFD', //用颜色渐变函数不起作用
                    fontSize: 10,
                },

            }, //刻度标签。
            axisTick: {
                show: true,
                splitNumber: 5,
                lineStyle: {
                    color: '#468EFD', //用颜色渐变函数不起作用
                    width: 1,
                },
                length: -6
            }, //刻度样式
            splitLine: {
                show: true,
                length: -8,
                lineStyle: {
                    color: '#468EFD', //用颜色渐变函数不起作用
                }
            }, //分隔线样式
            detail: {
                show: false
            },
            pointer: {
                show: false
            }
        },
        ]
    };
    chart_4.setOption(option_4);
}

Page({
    /**
     * 页面的初始数据
     */
    data: {
        active: 3,
        show: false,
        value1: "实时",
        value2: "实时",
        actions1: [{ name: '实时', }, { name: '本月', },],
        actions2: [{ name: '实时', }, { name: '本月', },],
        ec_1: {
            lazyLoad: true //动态加载
        },
        ec_2: {
            lazyLoad: true //动态加载
        },
        ec_3: {
            lazyLoad: true //动态加载
        },
        ec_4: {
            lazyLoad: true //动态加载
        },
        projectName: '',
        projectId: '',
        weather: '',
        weatherPic: '',
        temperature: '',
        dayEarlyNum: '',
        monthEarlyNum: '',
        yangchenCount: '',
        loginName: '',
        userName: '',
        //数据加载参数
        loadShow: false,

        initData: {},

        label_1: '24小时PM2.5，PM10的平均浓度',
        label_2: '24小时噪音的平均分贝',
        projectData:{}
    },

    //项目切换 返回值
    onProjectSelect(e) {
        this.onClickShow();
        let projectId = e.detail.id;
        let projectName = e.detail.text;
        app.globalData.projectId = projectId;
        app.globalData.projectName = projectName;
        this.setData({
            projectId: projectId,
            projectName: projectName
        })
        this.onLoad();
    },

    showPopup() {
        this.setData({ show: true });
    },

    onClose() {
        this.setData({ show: false });
        this.setData({ show1: false });
        this.setData({ show2: false });
    },

    onclick1() {
        this.setData({ show1: true });
    },
    onclick2() {
        this.setData({ show2: true });
    },

    onSelect1(event) {
        console.log(event)
        var that = this;
        that.setData({
            value1: event.detail.name,
        });
        //PM实时与本月数据切换
        let type = "";
        if (event.detail.name == '实时') {
            type = "1"
            this.setData({
                label_1: '24小时PM2.5，PM10的平均浓度'
            })
            wx.request({
                url: app.globalData.szhUrl + '/mkl/api/getEnvironmentCloseHoursInfo',
                method: "GET",
                data: {
                    projectId: that.data.projectData.szh
                },
                success: function (res) {
                    let time = []
                    let pm25 = []
                    let pm10 = []
                    res.data.data.map(item => {
                        time.push(item.date.split(" ")[1].split(":")[0])
                        pm25.push(item.pm25)
                        pm10.push(item.pm10)
                    })
                    that.init_one(time, pm25, pm10);
                }
            })
        } else {
            type = "2"
            this.setData({
                label_1: '本月PM2.5，PM10的平均浓度'
            })
            wx.request({
                url: app.globalData.szhUrl + '/mkl/api/getEnvironmentMonthData',
                method: "GET",
                data: {
                    projectId: that.data.projectData.szh
                },
                success: function (res) {
                    let time = []
                    let pm25 = []
                    let pm10 = []
                    res.data.data.map(item => {
                        time.push(item.createTime.split(" ")[0])
                        pm25.push(item.pm25)
                        pm10.push(item.pm10)
                    })
                    that.init_one(time, pm25, pm10);
                }
            })
        }
        // wx.request({
        //     url: app.globalData.reqUrl + '/weixin/applets/selectPM25',
        //     method: "GET",
        //     data: {
        //         projectId: this.data.projectData.szh,
        //         type: type
        //     },
        //     success: function (res) {
        //         that.init_one(res.data.time, res.data.pm25, res.data.pm10)
        //     }
        // })
    },

    onSelect2(event) {
        var that = this;
        that.setData({
            value2: event.detail.name,
        });
        //噪音实时与本月数据切换
        let type = "";
        if (event.detail.name == '实时') {
            type = "1"
            this.setData({
                label_2: '24小时噪音的平均分贝'
            })
            wx.request({
                url: app.globalData.szhUrl + '/mkl/api/getEnvironmentCloseHoursInfo',
                method: "GET",
                data: {
                    projectId: that.data.projectData.szh
                },
                success: function (res) {
                    let time = []
                    let noise = []
                    res.data.data.map(item => {
                        time.push(item.date.split(" ")[1].split(":")[0])
                        noise.push(item.noise)
                    })
                    that.init_two(time, noise);
                }
            })
        } else {
            type = "2"
            this.setData({
                label_2: '本月噪音的平均分贝'
            })
            wx.request({
                url: app.globalData.szhUrl + '/mkl/api/getEnvironmentMonthData',
                method: "GET",
                data: {
                    projectId: that.data.projectData.szh
                },
                success: function (res) {
                    let time = []
                    let noise = []
                    res.data.data.map(item => {
                        time.push(item.createTime.split(" ")[0])
                        noise.push(item.noise)
                    })
                    that.init_two(time, noise);
                }
            })
        }
        // wx.request({
        //     url: app.globalData.reqUrl + '/weixin/applets/selectNoiseDB',
        //     method: "GET",
        //     data: {
        //         projectId: this.data.projectData.szh,
        //         type: type
        //     },
        //     success: function (res) {
        //         that.init_two(res.data.time, res.data.DB);
        //     }
        // })
    },

    //初始化pm2.5及pm10折线图
    init_one: function (xData_1, yData_1_1, yData_1_2) {
        this.oneComponent.init((canvas, width, height, dpr) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
            });
            //赋值给echart图表
            initChart_1(chart, xData_1, yData_1_1, yData_1_2)
            this.chart = chart;
            return chart;
        });
    },

    //初始化噪音折线图
    init_two: function (xData_2, yData_2) {
        this.twoComponent.init((canvas, width, height, dpr) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
            });
            //赋值给echart图表
            initChart_2(chart, xData_2, yData_2)
            this.chart = chart;
            return chart;
        });
    },

    //初始化环境管理pm2.5饼图
    init_three: function (dataArr_3) {
        this.threeComponent.init((canvas, width, height, dpr) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
            });
            //赋值给echart图表
            initChart_3(chart, dataArr_3)
            this.chart = chart;
            return chart;
        });
    },

    //初始化环境管理pm10饼图
    init_four: function (dataArr_4) {
        this.fourComponent.init((canvas, width, height, dpr) => {
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
            });
            //赋值给echart图表
            initChart_4(chart, dataArr_4)
            this.chart = chart;
            return chart;
        });
    },

    onClickShow() {
        this.setData({ loadShow: true });
    },

    onClickHide() {
        this.setData({ loadShow: false });
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        console.log(app.globalData)
        var that = this;
        //加载蒙版
        this.onClickShow();
        //获取缓存数据
        wx.getStorage({
            key: 'userinfo',
            success: function (res) {
                that.setData({
                    loginName: res.data.loginName,
                    userName: res.data.userName,
                    projectId: app.globalData.projectId,
                    projectName: app.globalData.projectName,
                    initData: { text: app.globalData.projectName, id: app.globalData.projectId }
                })
            }
        });

        //根据ID获取组件对象
        this.oneComponent = this.selectComponent('#mychart-one');
        this.twoComponent = this.selectComponent('#mychart-two');
        this.threeComponent = this.selectComponent('#mychart-three');
        this.fourComponent = this.selectComponent('#mychart-four');
        this.getProjectCorrespondence(app.globalData.projectId);
        //初始化加载项目信息加载天气信息
        this.getProjectlngandlat(app.globalData.projectId);
    },
    /**
     * 项目对应关系
     */
    getProjectCorrespondence(projectId) {
        var that = this;
        wx.request({
            url: app.globalData.reqUrl + '/weixin/training/getProjectCorrespondence',
            data: {
                "projectId": projectId,
            },
            method: "get",
            success: function (res) {
                console.log(res.data);
                that.setData({
                    projectData: res.data
                })
            }
        })
    },
    // 底部导航
    onChange(event) {
        // event.detail 的值为当前选中项的索引
        this.setData({ active: event.detail });
    },

    //根据项目id查询出项目经纬度
    getProjectlngandlat: function (even) {
        var that = this;
        wx.request({
            url: app.globalData.reqUrl + '/wechat/project/getProjectFoundation',
            data: {
                "id": even
            },
            method: "GET",
            success: function (res) {

                //加载天气信息
                wx.request({
                    url: app.globalData.reqUrl + '/weixin/applets/selectWeather',
                    method: "GET",
                    data: {
                        lng: res.data.longitude,
                        lat: res.data.latitude,
                    },
                    success: function (weatherRes) {
                        that.setData({
                            weather: weatherRes.data.weather,
                            weatherPic: weatherRes.data.weatherPic,
                            temperature: weatherRes.data.temperature
                        })
                    }
                })

                //查询出实时的PM2.5和PM10数据
                if (even == 3) {
                    wx.request({
                        url: app.globalData.szhUrl + '/mkl/api/queryEnvironment',
                        method: "GET",
                        data: {
                            projectId: 132
                        },
                        success: function (res) {
                            that.init_three(res.data.data.pm25);
                            that.init_four(res.data.data.pm10);
                        }
                    })
                } else {
                    wx.request({
                        url: app.globalData.reqUrl + '/weixin/applets/selectEnvironmental',
                        method: "GET",
                        data: {
                            projectId: even
                        },
                        success: function (sspm) {
                            that.init_three(sspm.data.PM25);
                            that.init_four(sspm.data.PM10);
                        }
                    })
                }


                //查询出扬尘数据
                if (even == 3) {
                    wx.request({
                        url: app.globalData.szhUrl + '/mkl/api/getEnvironmentCloseHoursInfo',
                        method: "GET",
                        data: {
                            projectId: 132
                        },
                        success: function (res) {
                            let time = []
                            let pm25 = []
                            let pm10 = []
                            let noise = []
                            res.data.data.map(item => {
                                time.push(item.date.split(" ")[1].split(":")[0])
                                pm25.push(item.pm25)
                                pm10.push(item.pm10)
                                noise.push(item.noise)
                            })
                            that.init_one(time, pm25, pm10);
                            that.init_two(time, noise);
                        }
                    })
                } else {
                    wx.request({
                        url: app.globalData.reqUrl + '/weixin/applets/selectPM25',
                        method: "GET",
                        data: {
                            projectId: even,
                            type: '1'
                        },
                        success: function (ycss) {
                            that.init_one(ycss.data.time, ycss.data.pm25, ycss.data.pm10);
                        }
                    })
                }


                //查询出噪声数据
                if (even != 3) {
                    wx.request({
                        url: app.globalData.reqUrl + '/weixin/applets/selectNoiseDB',
                        method: "GET",
                        data: {
                            projectId: even,
                            type: '1'
                        },
                        success: function (zzss) {
                            that.init_two(zzss.data.time, zzss.data.DB);
                        }
                    })
                }


                //查询出环境预警数据
                wx.request({
                    url: app.globalData.reqUrl + '/weixin/applets/selectEarlyWarning',
                    method: "GET",
                    data: {
                        projectId: even,
                    },
                    success: function (hjyj) {
                        that.onClickHide();
                        that.setData({
                            dayEarlyNum: hjyj.data.dayCount,
                            monthEarlyNum: hjyj.data.moneyCount,
                            yangchenCount: hjyj.data.yangchenCount
                        })
                    }
                })
            }
        })
    },

    //退出登录
    TCDL: function () {
        wx.clearStorageSync();
        wx.setStorageSync('isReload', "1")
        wx.redirectTo({
            url: '../login/index',
        })
    },

    //返回到更多功能
    goGCLB: function () {
        wx.redirectTo({
            url: '../../pages/gengduogongneng/index'
        })
    }
})