function base64_encode(val) {
    var str = CryptoJS.enc.Utf8.parse(val);
    var base64 = CryptoJS.enc.Base64.stringify(str);
    return base64
}

var map;

const App = {
    data() {
        return {
            list: [
                {
                    num: 1, schoolName: '长春市十一高中',
                    projectList:
                        [{ projectName: '年度项目', projectCount: 21 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 12 }],
                    completionRate: 57
                },
                {
                    num: 2, schoolName: '长春市第一中学',
                    projectList:
                        [{ projectName: '年度项目', projectCount: 17 }, { projectName: '招标采购', projectCount: 4 }, { projectName: '实施验收', projectCount: 8 }, { projectName: '项目拨付', projectCount: 5 }],
                    completionRate: 30
                },
                {
                    num: 3, schoolName: '长春市第六中学',
                    projectList:
                        [{ projectName: '年度项目', projectCount: 29 }, { projectName: '招标采购', projectCount: 10 }, { projectName: '实施验收', projectCount: 11 }, { projectName: '项目拨付', projectCount: 8 }],
                    completionRate: 30
                },
                {
                    num: 4, schoolName: '长春市第二中学',
                    projectList:
                        [{ projectName: '年度项目', projectCount: 24 }, { projectName: '招标采购', projectCount: 2 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 18 }],
                    completionRate: 75
                },
                {
                    num: 5, schoolName: '长春市实验中学',
                    projectList:
                        [{ projectName: '年度项目', projectCount: 35 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 12 }, { projectName: '项目拨付', projectCount: 18 }],
                    completionRate: 51
                }
            ],
            tabTitle: ['完成率', '项目立项', '招标采购', '实施验收', '项目拨付', '项目结束'],
            cur: 0,
            a: 5,
            b: 5

        }
    },
    mounted() {
        this.getWnfb();
        this.initMap();
        this.toggle();
        this.timer();
    },
    methods: {
        timer() {
            $('#timer').pietimer({
                timerSeconds: 8,
                color: '#02F9FC',
                fill: false,
                showPercentage: false
            });
        },
        toggle() {
            map.clearOverlays();

            var falg = this.a % this.b;

            if (falg == 2) {
                this.b = 5;
            } else {
                this.b--;
            }

            if (falg === 0) {

                $("#xmwcqk").css("visibility", "visible");
                $("#xmycqk").css("visibility", "hidden");
                $("#xmgbqk").css("visibility", "hidden");

                for (var i = 0; i < points.length; i++) {

                    var point = points[i].point;

                    var myIcon = new BMap.Icon("./images/s1_4.png", new BMap.Size(32, 32));
                    var myColor = "#0D47A1";

                    if (i % 3 === 0) {
                        myIcon = new BMap.Icon("./images/s1_3.png", new BMap.Size(32, 32));
                        myColor = "#0288D1";
                    }
                    if (i % 5 === 0) {
                        myIcon = new BMap.Icon("./images/s1_2.png", new BMap.Size(32, 32));
                        myColor = "#2196F3";
                    }
                    if (i % 7 === 0) {
                        myIcon = new BMap.Icon("./images/s1_1.png", new BMap.Size(32, 32));
                        myColor = "#4FC3F7";
                    }

                    var marker = new BMap.Marker(point, {
                        icon: myIcon
                    });
                    var label = new BMap.Label(points[i].name, { offset: new BMap.Size(35, 3) });
                    label.setStyle({
                        color: myColor,
                        borderRadius: '5px',
                        borderColor: myColor,
                        padding: '5px',
                        fontSize: '12px',
                        fontFamily: '微软雅黑',
                        fontWeight: 'bolder'
                    });
                    marker.setLabel(label);
                    // 禁止覆盖物在map.clearOverlays方法中被清除
                    // marker.disableMassClear();
                    map.addOverlay(marker);

                    marker.addEventListener('click', function (e) {
                        console.log(e.target.K.label.content);
                        window.open("./child.html?schoolName=" + BASE64.encode(e.target.K.label.content));
                    });

                }
            }
            else if (falg === 1) {
                $("#xmwcqk").css("visibility", "hidden");
                $("#xmycqk").css("visibility", "visible");
                $("#xmgbqk").css("visibility", "hidden");
                for (var i = 0; i < points.length; i++) {

                    var point = points[i].point;

                    var myIcon = new BMap.Icon("./images/s2_4.png", new BMap.Size(32, 32));
                    var myColor = "#FF6F00";

                    if (i % 3 === 0) {
                        myIcon = new BMap.Icon("./images/s2_3.png", new BMap.Size(32, 32));
                        myColor = "#FFA000";
                    }
                    if (i % 5 === 0) {
                        myIcon = new BMap.Icon("./images/s2_2.png", new BMap.Size(32, 32));
                        myColor = "#FFC107";
                    }
                    if (i % 7 === 0) {
                        myIcon = new BMap.Icon("./images/s2_1.png", new BMap.Size(32, 32));
                        myColor = "#FFD54F";
                    }


                    var marker = new BMap.Marker(point, {
                        icon: myIcon
                    });
                    var label = new BMap.Label(points[i].name, { offset: new BMap.Size(35, 3) });
                    label.setStyle({
                        color: myColor,
                        borderRadius: '5px',
                        borderColor: myColor,
                        padding: '5px',
                        fontSize: '12px',
                        fontFamily: '微软雅黑',
                        fontWeight: 'bolder'
                    });
                    marker.setLabel(label);
                    // 禁止覆盖物在map.clearOverlays方法中被清除
                    // marker.disableMassClear();
                    map.addOverlay(marker);

                    marker.addEventListener('click', function (e) {
                        console.log(e.target.K.label.content);
                        window.open("./child.html?schoolName=" + BASE64.encode(e.target.K.label.content));
                    });

                }
            }
            else {
                $("#xmwcqk").css("visibility", "hidden");
                $("#xmycqk").css("visibility", "hidden");
                $("#xmgbqk").css("visibility", "visible");
                for (var i = 0; i < points.length; i++) {

                    var point = points[i].point;

                    var myIcon = new BMap.Icon("./images/s3_4.png", new BMap.Size(32, 32));
                    var myColor = "#B71C1C";

                    if (i % 3 === 0) {
                        myIcon = new BMap.Icon("./images/s3_3.png", new BMap.Size(32, 32));
                        myColor = "#C2185B";
                    }
                    if (i % 5 === 0) {
                        myIcon = new BMap.Icon("./images/s3_2.png", new BMap.Size(32, 32));
                        myColor = "#F44336";
                    }
                    if (i % 7 === 0) {
                        myIcon = new BMap.Icon("./images/s3_1.png", new BMap.Size(32, 32));
                        myColor = "#F06292";
                    }

                    var marker = new BMap.Marker(point, {
                        icon: myIcon
                    });
                    var label = new BMap.Label(points[i].name, { offset: new BMap.Size(35, 3) });
                    label.setStyle({
                        color: myColor,
                        borderRadius: '5px',
                        borderColor: myColor,
                        padding: '5px',
                        fontSize: '12px',
                        fontFamily: '微软雅黑',
                        fontWeight: 'bolder'
                    });
                    marker.setLabel(label);
                    // 禁止覆盖物在map.clearOverlays方法中被清除
                    // marker.disableMassClear();
                    map.addOverlay(marker);

                    marker.addEventListener('click', function (e) {
                        console.log(e.target.K.label.content);
                        window.open("./child.html?schoolName=" + BASE64.encode(e.target.K.label.content));
                    });
                }

            }
            setTimeout(() => {
                this.toggle();
                $('#timer').pietimer('start');
            }, 8000);
        },
        getWnfb() {
            let wnfbDiv = echarts.init(document.getElementById('wnfb'), 'white', { renderer: 'canvas' });
            wnfbDiv.clear();
            wnfbDiv.setOption(wnfbData);
            wnfbDiv.resize();
        },
        tabClick: function (index) {
            this.cur = index;
        },
        wnfbTabClick: function (id) {
            let wnfbDiv = echarts.init(document.getElementById('wnfb'), 'white', { renderer: 'canvas' });
            if (id === 'wnfbZl') {
                $("#wnfbYs").css("color", "#AAAAAA");
                $("#wnfbZl").css("color", "#3CD5FF");
                wnfbDiv.clear();
                wnfbDiv.setOption(wnfbData);
            } else {
                $("#wnfbZl").css("color", "#AAAAAA");
                $("#wnfbYs").css("color", "#3CD5FF");
                wnfbDiv.clear();
                wnfbDiv.setOption(wnfbYsData);
            }
        },
        initMap() {
            map = new BMap.Map("baiduMap");    // 创建Map实例
            map.centerAndZoom(new BMap.Point(125.331176, 43.89292), 13);  // 初始化地图,设置中心点坐标和地图级别
            map.enableScrollWheelZoom(true);    //开启鼠标滚轮缩放
            map.setMapStyle({ style: 'bluish' });  //样式
            map.setCurrentCity("长春");

            var myIcon = new BMap.Icon("./images/s11.png", new BMap.Size(32, 32));


            // var pt1 = new BMapGL.Point(125.341956, 43.873375);
            // var marker1 = new BMapGL.Marker(pt1, {
            //     icon: myIcon
            // });
            // // 将标注添加到地图
            // map.addOverlay(marker1);
            /*
            for (var i = 0; i < points.length; i++) {

                var point = points[i].point;

                if(points[i].orgType == 1){
                    myIcon = new BMap.Icon("./images/s12.png", new BMap.Size(32, 32));
                }

                var marker = new BMap.Marker(point, {
                    icon: myIcon
                });
                var label = new BMap.Label(points[i].name, { offset: new BMap.Size(35, 3) });
                label.setStyle({
                    color: '#12db3c',
                    borderRadius: '5px',
                    borderColor: '#12db3c',
                    padding: '5px',
                    fontSize: '12px',
                    fontFamily: '微软雅黑',
                    fontWeight: 'bolder'
                });
                marker.setLabel(label);
                // 禁止覆盖物在map.clearOverlays方法中被清除
                marker.disableMassClear();
                map.addOverlay(marker);

                marker.addEventListener('click', function (e) {
                    console.log(e.target.K.label.content);
                    window.open("./child.html?schoolName=" + BASE64.encode(e.target.K.label.content));
                });

            }   
            */

        }
    }
}

const app = Vue.createApp(App);
app.use(ElementPlus);
app.component('Vue3SeamlessScroll', Vue3SeamlessScroll.Vue3SeamlessScroll);
app.mount("#app");