$(() => {
    moduleTitle()
    // 公共请求地址
    let url = '/broad/month'

    // 轮询间隔时间
    const INTERVAL = 30000

    autoUpdate(url + "/selectUserSatisfaction", INTERVAL, data => {
        multipleVerticalBarChartTwo({
            xName: ['产品体验', "购物体验", "服务体验", "订单履约率"],
            yDataOne: [data[0].productRate, data[0].shoppingRate, data[0].serviceRate, data[0].orderRate],
            yDataOneName: '' + data.map(val => val.yearName)[0],
            yDataTwo: [data[1].productRate, data[1].shoppingRate, data[1].serviceRate, data[1].orderRate],
            yDataTwoName: '' + data.map(val => val.yearName)[1],
        }, document.getElementById("satisfaction"), undefined, '%')
    })

    autoUpdate(url + "/selectMonthNumberQaS", INTERVAL, data => {
        multipleVerticalBarChartTwo({
            xName: data.map(val => `${val.monthName}月`),
            yDataOne: data.map(val => val.bhNumber),
            yDataOneName: '闭环数',
            yDataTwo: data.map(val => val.qaNumber),
            yDataTwoName: "隐患数",
        }, document.getElementById("safe"), '')
    })
    autoUpdate(url + "/selectMonthQANumber", INTERVAL, data => {
        pieChart(data.map((val, index) => {
            if (index == 0) {
                return {
                    name: val.name,
                    value: val.rate,
                    itemStyle: {
                        color: 'red',
                    }
                }
            }
            if (index == 1) {
                return {
                    name: val.name,
                    value: val.rate,
                    itemStyle: {
                        color: 'yellow',
                    }
                }
            }
            return {
                name: val.name,
                value: val.rate
            }

        }), document.getElementById("abnormal"), '%');
    })
    autoUpdate(url + "/selectProductInStoreGroupMonth", INTERVAL, data => {

        total(data.map(val => val.qty).reduce((val1, val2) => val1 + val2, 0), '#total')
        verticalBarChart({
            xName: data.map(val => `${val.name}月`),
            yData: data.map(val => val.qty),
        }, document.getElementById("outputStatistics"), '')
    })
    autoUpdate(url + "/selectHighlightProducts", 40000, data => {
        let urlOne = data.filter(val => val.pictureLocation === 1).map(val => val.picturePath)
        let urlTwo = data.filter(val => val.pictureLocation === 2).map(val => val.picturePath)
        let optionsOne = {
            navButton: false,
            sideButton: false,
            effects: ['fade', 'slideX', 'slideY', 'page', 'circle', 'rollingX', 'rollingY', 'blindsX', 'blindsY'],
            data: urlOne.map(val => {
                return {
                    src: `http://10.100.70.5:9090/${val}`,
                }
            })
        };
        let optionsTwo = {
            navButton: false,
            sideButton: false,
            effects: ['fade', 'slideX', 'slideY', 'page', 'circle', 'rollingX', 'rollingY', 'blindsX', 'blindsY'],
            data: urlTwo.map(val => {
                return {
                    src: `http://10.100.70.5:9090/${val}`,
                }
            })
        };
        $('#slide').vmcSlide(optionsOne);
        $('#scene').vmcSlide(optionsTwo);
    })
    autoUpdate(url + "/selectBaseQilist", 40000, data => {
        let yData = data.map(val => {
            return {
                name: val.code,
                data: val.list.map(e=>e.rate),
            }
        })
        lineChartTwo({
            xName: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"].splice(0,Math.ceil(Math.max(...data.map(val => val.list.length)))),
            yData: yData,
        }, document.getElementById("quality"), '%')
    })
    autoUpdate(url + "/selectDtNenglist", INTERVAL, data => {
        let month = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
        let value = []
        let target = []
        for (let i = 1; i <= 12; i++) {
            if (data[0][`month${i}`]) {
                value.push(data[0][`month${i}`])
                target.push(data[0][`target`])
            }
        }
        lineChart({
            xName: month.splice(0, value.length),
            yData: target,
            yDataName: "目标",
            yDataTwo: value,
            yDataTwoName: "单台能耗(元/台)",
        }, document.getElementById("energyConsumption"), '')
    })


})

const curWeek = () => {
    let today = new Date();
    let firstDayOfYear = new Date(today.getFullYear(), 0, 1);
    let dayOfWeek = firstDayOfYear.getDay();
    let spendDay = 1;
    if (dayOfWeek != 0) {
        spendDay = 7 - dayOfWeek + 1;
    }
    firstDayOfYear = new Date(today.getFullYear(), 0, spendDay);
    let d = Math.ceil((today.valueOf() - firstDayOfYear.valueOf()) / 86400000);
    return Math.ceil((d / 7) + 1);
}
const today = () => {
    const currentYear = new Date().getFullYear().toString();
    const hasTimestamp = new Date() - new Date(currentYear);
    const hasDays = Math.ceil(hasTimestamp / 86400000);
    return hasDays
}

const moduleTitle = () => {
    const html = `
    <span style="position: absolute;top: 2.9%;left: 50%;color: #fff;font-size: 1.1vw;transform: translateX(-50%);letter-spacing: 0.3vw">智能冷柜中央管控平台</span>
    <span style="position: absolute;top: 14.5%;left: 2.6%;color: #CFD2D0;font-size: 1.0vw">用户满意度</span>
    <span style="position: absolute;top: 14.5%;left: 27.6%;color: #CFD2D0;font-size: 1.0vw">产品升级</span>
    <span style="position: absolute;top: 14.5%;left: 68%;color: #CFD2D0;font-size: 1.0vw">场景升级</span>
    <span style="position: absolute;top: 14.5%;left: 92%;color: #CFD2D0;font-size: 1.0vw">品质提升</span>
    <span style="position: absolute;top: 57.8%;left: 3.3%;color: #CFD2D0;font-size: 1.0vw">产量统计</span>
    <span style="position: absolute;top: 57.8%;left: 27.6%;color: #CFD2D0;font-size: 1.0vw">单台能耗</span>
    <span style="position: absolute;top: 57.8%;left: 68%;color: #CFD2D0;font-size: 1.0vw">质量分析</span>
    <span style="position: absolute;top: 57.8%;left: 93%;color: #CFD2D0;font-size: 1.0vw">数字化安全</span>
    <span style="position: absolute;top: 61%;left: 80%;color: #CFD2D0;font-size: 1.0vw">${new Date().getFullYear()} 年连续安全生产 ${today()} 天</span>
    `
    $('body').append(html)
}

const total = (val1 = 0, el) => {
    const html = `
    <span style="position: absolute;top: 60%;left: 11%;color: #fff;font-size: 1vw;">${new Date().getFullYear()}年 合计：${val1} 台</span>
    `
    $(el).html(html)
}