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

layui.use(["layer", "table", "form"], function () {
    layer = layui.layer;
    table = layui.table;
    form = layui.form;
    getCivilEngineering();
    getElectrical();

    getCivilEngineeringOnePlan();
    getCivilEngineeringTwoPlan();
    getCivilEngineeringThreePlan();
    getCivilEngineeringFourPlan();
    getCivilEngineeringFivePlan();
    getCivilEngineeringOneActual();
    getCivilEngineeringTwoActual();
    getCivilEngineeringThreeActual();
    getCivilEngineeringFourActual();
    getCivilEngineeringFiveActual();


    getEngineeringOnePlan();
    getEngineeringTwoPlan();
    getEngineeringThreePlan();
    getEngineeringFourPlan();
    getEngineeringFivePlan();
    getEngineeringOneActual();
    getEngineeringTwoActual();
    getEngineeringThreeActual();
    getEngineeringFourActual();
    getEngineeringFiveActual();
});

function getCivilEngineering() {
    let xLabel = ['xxxx-xx-01', 'xxxx-xx-02', 'xxxx-xx-03', 'xxxx-xx-04', 'xxxx-xx-05', 'xxxx-xx-06','xxxx-xx-07', 'xxxx-xx-08', 'xxxx-xx-09', 'xxxx-xx-10', 'xxxx-xx-11', 'xxxx-xx-12',]
    let expenditureData = ["12", "15", "4", "8", "13", "6","10", "11", "5", "12","10", "15"]
    let incomeData = ["4", "5", "5", "5", "5", "4","3", "5", "3","16", "5", "18"]
    initCivilEngineering(xLabel,expenditureData,incomeData)
}

function getElectrical() {
    let xLabel = ['xxxx-xx-01', 'xxxx-xx-02', 'xxxx-xx-03', 'xxxx-xx-04', 'xxxx-xx-05', 'xxxx-xx-06','xxxx-xx-07', 'xxxx-xx-08', 'xxxx-xx-09', 'xxxx-xx-10', 'xxxx-xx-11', 'xxxx-xx-12',]
    let expenditureData = ["12", "15", "4", "8", "13", "6","10", "11", "5", "12","10", "15"]
    let incomeData = ["4", "5", "5", "5", "5", "4","3", "5", "3","16", "5", "18"]
    initElectrical(xLabel,expenditureData,incomeData)
}

// 初始化左侧双折线图
function initCivilEngineering(xLabel,expenditureData,incomeData) {
    const leftChart = echarts.init(document.getElementById("civilEngineering"));
    const option =  {
        tooltip: {
            show:true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            borderColor: 'rgba(255,255,255,.3)',
            backgroundColor: 'rgba(19,51,55,.6)',
            textStyle: {
                color: 'white', //设置文字颜色
            },
            borderWidth: 1,
            padding: 10,
        },
        legend: {
            show:true,
            top:45,
            right:50,
            textStyle:{
                color:'#ffffff'
            }
        },
        grid: {
            top: '35%',
            left: '8%',
            right: '4%',
            bottom: '15%'
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#5A6E71',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: true,
                },
                data: xLabel,
            },
        ],
        yAxis: [{
            min: 0,
            splitNumber: 10,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.6)',
                    type: 'dashed',
                },
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(255,255,255,0.8)',
                    padding: 16
                },
                formatter: function(value) {
                    if (value === 0) {
                        return value
                    }
                    return value
                }
            },
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: '支出',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "#00FEFC",
                }
            },
            itemStyle: {
                color: "#00FEFC",
                borderWidth: 2
            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(18,86,100,0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,81, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,63, 0.8)',
                    shadowBlur: 20
                }
            },
            data: expenditureData
        }, {
            name: '收入',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(25,196,134, 1)",
                }
            },
            itemStyle: {
                color: "rgba(25,196,134, 1)",
                borderWidth: 2

            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(17,95,82, 0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,67, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,54, 0.8)',
                    shadowBlur: 20
                }
            },
            data: incomeData
        }]
    };

    leftChart.setOption(option);
    // 响应式调整
    window.addEventListener("resize", function () {
        leftChart.resize();
    });
}

// 初始化左侧双折线图
function initElectrical(xLabel,expenditureData,incomeData) {
    const leftChart = echarts.init(document.getElementById("electrical"));
    const option =  {
        tooltip: {
            show:true,
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            borderColor: 'rgba(255,255,255,.3)',
            backgroundColor: 'rgba(19,51,55,.6)',
            textStyle: {
                color: 'white', //设置文字颜色
            },
            borderWidth: 1,
            padding: 10,
        },
        legend: {
            show:true,
            top:45,
            right:50,
            textStyle:{
                color:'#ffffff'
            }
        },
        grid: {
            top: '35%',
            left: '8%',
            right: '4%',
            bottom: '15%'
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: '#5A6E71',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: fontColor,
                        fontSize: fontSize,
                        fontFamily: fontFamily
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: true,
                },
                data: xLabel,
            },
        ],
        yAxis: [{
            min: 0,
            splitNumber: 10,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.6)',
                    type: 'dashed',
                },
            },
            axisLine: {
                show: false,
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: 'rgba(255,255,255,0.8)',
                    padding: 16
                },
                formatter: function(value) {
                    if (value === 0) {
                        return value
                    }
                    return value
                }
            },
            axisTick: {
                show: false,
            },
        }],
        series: [{
            name: '支出',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "#00FEFC",
                }
            },
            itemStyle: {
                color: "#00FEFC",
                borderWidth: 2
            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(18,86,100,0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,81, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,63, 0.8)',
                    shadowBlur: 20
                }
            },
            data: expenditureData
        }, {
            name: '收入',
            type: 'line',
            symbol: 'circle',
            showAllSymbol: true,
            symbolSize: 0,
            smooth: true,
            lineStyle: {
                normal: {
                    width: 2,
                    color: "rgba(25,196,134, 1)",
                }
            },
            itemStyle: {
                color: "rgba(25,196,134, 1)",
                borderWidth: 2

            },
            tooltip: {
                show: true
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(17,95,82, 0.6)"
                    },
                        {
                            offset: 1,
                            color: "rgba(16,72,67, 0.7)"
                        }
                    ], false),
                    shadowColor: 'rgba(15,55,54, 0.8)',
                    shadowBlur: 20
                }
            },
            data: incomeData
        }]
    };

    leftChart.setOption(option);
    // 响应式调整
    window.addEventListener("resize", function () {
        leftChart.resize();
    });
}