const app = {
    data() {
        return {
            list: [
                {
                    num: 1, schoolName: '长春市第一实验小学1',
                    projectList:
                        [{ projectName: '项目立项', projectCount: 2, className: 'aaa' }, { projectName: '招标采购', projectCount: 3 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 5 }],
                    completionRate: 100
                },
                {
                    num: 2, schoolName: '长春市十一高中',
                    projectList:
                        [{ projectName: '项目立项', projectCount: 6 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }],
                    completionRate: 98
                },
                {
                    num: 3, schoolName: '长春市第一实验小学',
                    projectList:
                        [{ projectName: '项目立项', projectCount: 6 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }],
                    completionRate: 90
                },
                {
                    num: 4, schoolName: '长春市十一高中',
                    projectList:
                        [{ projectName: '项目立项', projectCount: 6 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }],
                    completionRate: 88
                },
                {
                    num: 5, schoolName: '长春市第六中学',
                    projectList:
                        [{ projectName: '项目立项', projectCount: 6 }, { projectName: '招标采购', projectCount: 5 }, { projectName: '实施验收', projectCount: 4 }, { projectName: '项目拨付', projectCount: 3 }],
                    completionRate: 79
                }
            ],
            tabTitle: ['完成率', '项目立项', '招标采购', '实施验收', '项目拨付', '项目结束'],
            cur: 0
        }
    },
    mounted() {
        this.getQsfb();
        this.getWnfb();
        this.getSsjd();
        this.numJump();

        setTimeout(() => {
            this.numJumpRandom();
        }, Math.round(Math.random() * 5000 + 5000));       
    },
    methods: {
        tabClick: function (index) {
            this.cur = index;
        },
        getQsfb() {
            let qsfbDiv = echarts.init(document.getElementById('qsfb'), 'white', { renderer: 'canvas' });
            qsfbDiv.clear();
            qsfbDiv.setOption(qsfbData);
            qsfbDiv.resize();
        },
        getWnfb() {
            let wnfbDiv = echarts.init(document.getElementById('wnfb'), 'white', { renderer: 'canvas' });
            wnfbDiv.clear();
            wnfbDiv.setOption(wnfbData);
            wnfbDiv.resize();
        },
        getSsjd() {
            let ssjdDiv = echarts.init(document.getElementById('ssjd'), 'white', { renderer: 'canvas' });
            ssjdDiv.clear();
            ssjdDiv.setOption(ssjdData);
            ssjdDiv.resize();
        },
        numJumpRandom() {
            let r = Math.round(Math.random() * 5000 + 5000);
            this.numJump();
            setTimeout(() => {
                this.numJumpRandom();
            }, r);
        },      
        numJump() {
            var xmlxNum = new CountUp("xmlxNum", 0, 128, 0, 2.5);
            var zbcgNum = new CountUp("zbcgNum", 0, 121, 0, 2.3);
            var ssysNum = new CountUp("ssysNum", 0, 60, 0, 2.1);
            var xmbfNum = new CountUp("xmbfNum", 0, 26, 0, 2);

            xmlxNum.start();
            zbcgNum.start();
            ssysNum.start();
            xmbfNum.start();
        }
    }
}

Vue.createApp(app).component('Vue3SeamlessScroll', Vue3SeamlessScroll.Vue3SeamlessScroll).mount("#app");