let table, layer, form,laydate;
let fontSize = '14', fontFamily = 'Alibaba PuHuiTi R', fontColor = '#fff';

const bidCode = parent.$('#bidPro').val();
layui.use(["layer", "table", "form", "laydate"], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;

    laydate = layui.laydate;
    laydate.render({
        elem: "#ID-laydate-rangeLinked",
        range: ["#ID-laydate-start-date-1", "#ID-laydate-end-date-1"],
        rangeLinked: true, // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增
    });

    $("#ID-laydate-start-date-1").val(getNowTime())
    $("#ID-laydate-end-date-1").val(getNowTime())

    let startTime = "";
    let endTime = "";
    if ($("#ID-laydate-start-date-1").val() != "") {
        startTime = $("#ID-laydate-start-date-1").val();
        endTime = $("#ID-laydate-end-date-1").val();
    } else {
        startTime = "";
        endTime = "";
    }

    getEnergyReduction(startTime, endTime)
});

function getEnergyReduction(startTime, endTime) {
    const url =
        commonUrl +
        "screen/energyReduction/selectEnergyReduction?startTime=" + startTime + "&endTime=" + endTime;
    ajaxRequestGet(
        url,
        "GET",
        true,
        function () {
        },
        function (result) {
            if (result.code === 200) {
                setData(result.data);
            } else if (result.code === 500) {
                console.error("实时监测" + result.msg);
                setData(null);
            } else if (result.code === 401) {
                loginout(1);
            }
        },
        function (xhr, status, error) {
            errorFn(xhr, status, error);
            setData(null);
        },
        aqEnnable
    );

    /* 实时检测赋值 */
    function setData(data) {
        if (data) {

        }
    }

}

function getElectricityStatistics() {
    initElectricityStatisticsChart()
}

function getWaterStatistics() {
    initWaterStatisticsChart()
}

function initElectricityStatisticsChart() {
    const electricityStatistics = echarts.init(document.getElementById("electricityStatistics"));
    const option = {
        tooltip: {
            trigger: "item",
            formatter: "{b}: {c}kWh ({d}%)",
            backgroundColor: "rgba(0, 0, 0, 0.8)",
            borderColor: "#08DCE0",
            borderWidth: 1,
            textStyle: {
                color: "#fff",
            },
        },
        legend: {
            orient: "vertical",
            right: "20%",
            top: "25%",
            itemGap: 30,
            itemWidth: 20,
            itemHeight: 8,
            textStyle: {
                color: "#fff",
                fontSize: 14,
                rich: {
                    name: {
                        width: 30,
                        color: "#fff",
                    },
                    value: {
                        width: 60,
                        align: "right",
                        color: "#79FFFF",
                        fontSize: 16,
                        fontWeight: "bold",
                    },
                },
            },
            formatter: (name) => {
                const data = option.series[0].data
                const item = data.find((d) => d.name === name)
                const percent = item ? item.value : 0
                return `{name|${name}}  {value|${percent}%}`
            },
        },
        series: [
            {
                name: "用电统计",
                type: "pie",
                radius: [0, '60%'],
                center: ["30%", "55%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 5,
                    borderColor: "rgba(0, 0, 0, 0.3)",
                    borderWidth: 2,
                    shadowBlur: 10,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
                label: {
                    show: false,
                },
                emphasis: {
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        shadowBlur: 20,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(8, 220, 224, 0.8)",
                    },
                },
                labelLine: {
                    show: false,
                },
                data: [
                    {
                        value: 60,
                        name: "A区",
                        itemStyle: {
                            color: '#75F7EC',
                        },
                    },
                    {
                        value: 60,
                        name: "B区",
                        itemStyle: {
                            color: '#75F791',
                        },
                    },
                    {
                        value: 26,
                        name: "C区",
                        itemStyle: {
                            color: '#00C3F2',
                        },
                    },
                    {
                        value: 14,
                        name: "D区",
                        itemStyle: {
                            color: '#EB846A',
                        },
                    },
                ],
            },
        ],
    }

    electricityStatistics.setOption(option)
}

function initWaterStatisticsChart() {
    const waterStatistics = echarts.init(document.getElementById("waterStatistics"));
    const option = {
        tooltip: {
            trigger: "item",
            formatter: "{b}: {c}kWh ({d}%)",
            backgroundColor: "rgba(0, 0, 0, 0.8)",
            borderColor: "#08DCE0",
            borderWidth: 1,
            textStyle: {
                color: "#fff",
            },
        },
        legend: {
            orient: "vertical",
            right: "20%",
            top: "25%",
            itemGap: 30,
            itemWidth: 20,
            itemHeight: 8,
            textStyle: {
                color: "#fff",
                fontSize: 14,
                rich: {
                    name: {
                        width: 30,
                        color: "#fff",
                    },
                    value: {
                        width: 60,
                        align: "right",
                        color: "#79FFFF",
                        fontSize: 16,
                        fontWeight: "bold",
                    },
                },
            },
            formatter: (name) => {
                const data = option.series[0].data
                const item = data.find((d) => d.name === name)
                const percent = item ? item.value : 0
                return `{name|${name}}  {value|${percent}%}`
            },
        },
        series: [
            {
                name: "用电统计",
                type: "pie",
                radius: [0, '60%'],
                center: ["30%", "55%"],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 5,
                    borderColor: "rgba(0, 0, 0, 0.3)",
                    borderWidth: 2,
                    shadowBlur: 10,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                },
                label: {
                    show: false,
                },
                emphasis: {
                    label: {
                        show: false,
                    },
                    itemStyle: {
                        shadowBlur: 20,
                        shadowOffsetX: 0,
                        shadowColor: "rgba(8, 220, 224, 0.8)",
                    },
                },
                labelLine: {
                    show: false,
                },
                data: [
                    {
                        value: 60,
                        name: "A区",
                        itemStyle: {
                            color: '#75F7EC',
                        },
                    },
                    {
                        value: 60,
                        name: "B区",
                        itemStyle: {
                            color: '#75F791',
                        },
                    },
                    {
                        value: 26,
                        name: "C区",
                        itemStyle: {
                            color: '#00C3F2',
                        },
                    },
                    {
                        value: 14,
                        name: "D区",
                        itemStyle: {
                            color: '#EB846A',
                        },
                    },
                ],
            },
        ],
    }

    waterStatistics.setOption(option)
}

function getWaterTrend() {
    const dates = [
        "xxxx-xx-01",
        "xxxx-xx-02",
        "xxxx-xx-03",
        "xxxx-xx-04",
        "xxxx-xx-05",
        "xxxx-xx-06",
        "xxxx-xx-07",
        "xxxx-xx-08",
    ]

    const waterData = [4.2, 3.3, 3.1, 2.8, 3.0, 3.2, 3.3, 2.1]
    initWaterTrend(dates, waterData);
}

function initWaterTrend(dates, waterData) {
    const waterTrend = echarts.init(document.getElementById("waterTrend"));
    const option = {
        grid: {
            left: "5%",
            right: "8%",
            top: "25%",
            bottom: "10%",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            data: dates,
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: "rgba(8, 220, 224, 0.3)",
                },
            },
            axisLabel: {
                color: "rgba(255, 255, 255, 0.6)",
                fontSize: 11,
                rotate: 0,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        yAxis: {
            type: "value",
            min: 0,
            max: 5,
            interval: 1,
            axisLine: {
                show: false,
            },
            axisLabel: {
                color: "rgba(255, 255, 255, 0.6)",
                fontSize: 12,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(8, 220, 224, 0.15)",
                    type: "dashed",
                },
            },
        },
        series: [
            {
                name: "用水量",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 6,
                data: waterData,
                lineStyle: {
                    color: "#08DCE0",
                    width: 2,
                },
                itemStyle: {
                    color: "#08DCE0",
                    borderColor: "#08DCE0",
                    borderWidth: 2,
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(8, 220, 224, 0.3)",
                        },
                        {
                            offset: 1,
                            color: "rgba(8, 220, 224, 0.05)",
                        },
                    ]),
                },
                emphasis: {
                    itemStyle: {
                        color: "#08DCE0",
                        borderColor: "#fff",
                        borderWidth: 2,
                        shadowBlur: 10,
                        shadowColor: "rgba(8, 220, 224, 0.8)",
                    },
                },
            },
        ],
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0, 20, 40, 0.9)",
            borderColor: "#08DCE0",
            borderWidth: 1,
            textStyle: {
                color: "#fff",
            },
            axisPointer: {
                type: "line",
                lineStyle: {
                    color: "rgba(8, 220, 224, 0.5)",
                    type: "dashed",
                },
            },
        },
    }
    waterTrend.setOption(option)
}

function getElectricityTrend() {
    const dates = [
        "xxxx-xx-01",
        "xxxx-xx-02",
        "xxxx-xx-03",
        "xxxx-xx-04",
        "xxxx-xx-05",
        "xxxx-xx-06",
        "xxxx-xx-07",
        "xxxx-xx-08",
    ]

    const electricityData = [4.2, 3.3, 3.1, 2.8, 3.0, 3.2, 3.3, 2.1]
    initElectricityTrend(dates, electricityData);
}

function initElectricityTrend(dates, electricityData) {
    const waterTrend = echarts.init(document.getElementById("electricityTrend"));
    const option = {
        grid: {
            left: "5%",
            right: "8%",
            top: "25%",
            bottom: "10%",
            containLabel: true,
        },
        xAxis: {
            type: "category",
            data: dates,
            boundaryGap: false,
            axisLine: {
                lineStyle: {
                    color: "rgba(8, 220, 224, 0.3)",
                },
            },
            axisLabel: {
                color: "rgba(255, 255, 255, 0.6)",
                fontSize: 11,
                rotate: 0,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                show: false,
            },
        },
        yAxis: {
            type: "value",
            min: 0,
            max: 5,
            interval: 1,
            axisLine: {
                show: false,
            },
            axisLabel: {
                color: "rgba(255, 255, 255, 0.6)",
                fontSize: 12,
            },
            axisTick: {
                show: false,
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(8, 220, 224, 0.15)",
                    type: "dashed",
                },
            },
        },
        series: [
            {
                name: "用水量",
                type: "line",
                smooth: true,
                symbol: "circle",
                symbolSize: 6,
                data: electricityData,
                lineStyle: {
                    color: "#08DCE0",
                    width: 2,
                },
                itemStyle: {
                    color: "#08DCE0",
                    borderColor: "#08DCE0",
                    borderWidth: 2,
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: "rgba(8, 220, 224, 0.3)",
                        },
                        {
                            offset: 1,
                            color: "rgba(8, 220, 224, 0.05)",
                        },
                    ]),
                },
                emphasis: {
                    itemStyle: {
                        color: "#08DCE0",
                        borderColor: "#fff",
                        borderWidth: 2,
                        shadowBlur: 10,
                        shadowColor: "rgba(8, 220, 224, 0.8)",
                    },
                },
            },
        ],
        tooltip: {
            trigger: "axis",
            backgroundColor: "rgba(0, 20, 40, 0.9)",
            borderColor: "#08DCE0",
            borderWidth: 1,
            textStyle: {
                color: "#fff",
            },
            axisPointer: {
                type: "line",
                lineStyle: {
                    color: "rgba(8, 220, 224, 0.5)",
                    type: "dashed",
                },
            },
        },
    }
    waterTrend.setOption(option)
}