function getAllColor() {
    var colorArr = [{
            name: '浅白',
            bg: 'rgb(255,255,255)',
            textcolor: 'rgb(89,89,89)'
        },
        {
            name: '淡黄',
            bg: 'rgb(244,236,216)',
            textcolor: 'rgb(91,70,54)'
        },
        {
            name: '明黄',
            bg: 'rgb(255,250,233)',
            textcolor: 'rgb(44,39,36)'
        },
        {
            name: '绿意',
            bg: 'rgb(238,250,238)',
            textcolor: 'rgb(44,39,36)'
        },
        {
            name: '浅绿',
            bg: 'rgb(206,234,186)',
            textcolor: 'rgb(51,51,51)'
        },
        {
            name: '草绿',
            bg: 'rgb(134,202,190)',
            textcolor: 'rgb(81,81,81)'
        },
        {
            name: '粉红',
            bg: 'rgb(255,239,252)',
            textcolor: 'rgb(44,39,36)'
        },
        {
            name: '淡蓝1',
            bg: 'rgb(220,245,245)',
            textcolor: 'rgb(44,39,36)'
        },
        {
            name: '淡蓝2',
            bg: 'rgb(237,255,255)',
            textcolor: 'rgb(44,39,36)'
        },
        {
            name: '深蓝',
            bg: 'rgb(61,122,168)',
            textcolor: 'rgb(178,204,159)'
        },
        {
            name: '灰色',
            bg: 'rgb(239,239,239)',
            textcolor: 'rgb(44,39,36)'
        },
        {
            name: '深灰',
            bg: 'rgb(69,72,74)',
            textcolor: 'rgb(157,159,163)'
        },
        {
            name: '深黑',
            bg: 'rgb(51,51,51)',
            textcolor: 'rgb(181,172,162)'
        }
    ]

    return colorArr;
}

new Vue({
    el: '#app',
    data: function() {
        return {
            fit: "contain",
            imgUrl: 'http://gudianxiaoshuo.com/js/logo.gif',
            gongzhonghaoUrl: 'http://gudianxiaoshuo.com/js/gongzhonghao.jpg',
            toutiaohaoUrl: 'http://gudianxiaoshuo.com/js/toutiaohao.png',
            options: [],
            colorArr: [],
            colorName: '默认',
            fontName: "宋体",
            fontSizeOptions: [],
            fontSize: 20,
            textColor: null,
            bgColor: null,
            showTip: true,
            foolcolorVar: 'rgb(255,255,255)',
            scrollcolorVar: 'rgb(255,255,255)',
            scrollHiddenVar: 'none',
            zanshangUrl: "",
            tableData1: [],
            tableData2: [],
            tableData3: [],
            tableData4: [],
            tableData5: [],
            tableData6: [],
            tableData7: [],
            tableData8: [],
            tableData9: [],
            tableData10: [],
            tableData11: [],
            tableData12: [],
            tableData13: [],
            tableData14: [],
            tableData15: [],
            tableData16: [],
            tableData17: [],
            tableData18: [],
            tableData19: [],
            tableData20: []     
        }
    },

    methods: {
        open() {
            this.$message('右键，选择大声朗读即可');
        },
        closeTip() {
            localStorage.setItem('tipClosed', '1');
        },
        selectOne(fontName) {
            var fontFamily = "font-family:" + fontName;
            document.querySelector('#app').style.setProperty('font-family', fontName)
            localStorage.setItem('font', fontFamily);
            localStorage.setItem('fontName', fontName);
        },
        selectFontSize(fontSize) {

            // document.body.requestFullscreen();   

            document.querySelector('#app').style.setProperty('font-size', fontSize)
            localStorage.setItem('fontSize', fontSize);
        },
        selectColorName(colorIndex) {
            console.log(colorIndex);
            console.log(this.colorArr[colorIndex]);
            this.setTBColor(this.colorArr[colorIndex].textcolor, this.colorArr[colorIndex].bg);
            localStorage.setItem('corlorIndex', colorIndex);
        },
        setTBColor(textColor, bgColor) {
            document.querySelector('body').style.setProperty('background', bgColor)
            var x = document.querySelectorAll("p");
            var i;
            for (i = 0; i < x.length; i++) {
                x[i].style.color = textColor;
            }
            localStorage.setItem('bg', bgColor);
            localStorage.setItem('pColor', textColor);
            this.textColor = textColor;
            this.bgColor = bgColor;
        },
        el_colorPic_change() {
            this.setTBColor(this.textColor, this.bgColor);
            this.saveRand(this.textColor, this.bgColor);
            console.log(this.textColor)
        },
        saveRand(textColor, bgColor) {
            var lastElemName = this.colorArr[this.colorArr.length - 1].name;
            if (lastElemName == '随机色') {
                this.colorArr[this.colorArr.length - 1].bg = bgColor;
                this.colorArr[this.colorArr.length - 1].textcolor = textColor;
            } else {

                var fontElem = {};
                fontElem.name = '随机色';
                fontElem.bg = bgColor;
                fontElem.textcolor = textColor;
                this.colorArr.push(fontElem);
            }
            localStorage.setItem('Randbg', bgColor);
            localStorage.setItem('RandTColor', textColor);
        },
        rdmRgbColor() {
            const arr = [];
            for (let i = 0; i < 3; i++) {
                arr.push(Math.floor(Math.random() * 256));
            }
            const [r, g, b] = arr;
            var color = `rgb(${r},${g},${b})`;
            return color;
        },


        colorBtn: function(name) {
            console.log(name);
            if (name == "btn1") {
                this.setTBColor('rgb(89,89,89)', 'rgb(255,255,255)');
            } else if (name == "btn2") {
                this.setTBColor('rgb(91,70,54)', 'rgb(242,236,216)');
            } else if (name == "btn3") {
                this.setTBColor('rgb(51,51,51)', 'rgb(206,234,186)');
            } else if (name == "btn4") {
                this.setTBColor('rgb(157,159,163)', 'rgb(69,72,74)');
            } else if (name == "btn5") {
                this.setTBColor('rgb(181,172,162)', 'rgb(51,51,51)');
            } else if (name == 'rand') {
                let bgColor = this.rdmRgbColor();
                let textColor = this.rdmRgbColor();
                this.setTBColor(textColor, bgColor);
                this.saveRand(textColor, bgColor);

            } else if (name == 'full') {

                var bgColor = localStorage.getItem('bg');
                this.foolcolorVar = bgColor;
                this.scrollcolorVar = bgColor;
                document.getElementById('mainContent').requestFullscreen();
            } else if (name == 'fav') {
            	var bHasScroll=this.bHasScrollbar();
                this.hideScroll();
                this.takeScreenshot();

                if(bHasScroll)
               		 this.showScroll();
                //    this.$message({
                // dangerouslyUseHTMLString: true,
                // message:'浏览器不支持自动添加收藏夹标签。请您使用快捷键   <strong style="color:red"><i> Ctrl+D</i> </strong>进行添加'}
                // );

                //this.scrollHiddenVar=scrollVar;
            }
        },
        hideScroll() {
            $("html").height($("window").height()).css({
                "overflow-y": "hidden"
            }); //弹出框时隐藏滚动条

            $("html").css("margin-right", 17); //隐藏滚动条时防止页面偏题

        },
		showScroll(){
	        $("html").height($(window).height()).css({
	            "overflow-y": "auto"
	        });//弹出框时隐藏滚动条
	        $("html").css("margin-right",0);//隐藏滚动条时防止页面偏题
   		},
   		bHasScrollbar() {
       		 return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
        },

        myEventFunc(event) {
            let x = event.pageX;
            let rect = document.getElementById('mainContent').getBoundingClientRect();
            if (x > rect.right - 50)
                this.scrollHiddenVar = 'inline';
            else
                this.scrollHiddenVar = 'none';


        },
        myHandleSelect(key) {

            location.href = key;
        },
        SpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                if (rowIndex === 0) {
                    return {
                        rowspan: 1000,
                        colspan: 1
                    };
                } else if (1 <= rowIndex && rowIndex <= 1000) {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }

                // else  if (rowIndex  === 4) {
                //   return {
                //     rowspan: 2,
                //     colspan: 1
                //   };
                // } 
                // else if (5<=rowIndex  && rowIndex<=8) 
                // {
                //   return {
                //     rowspan: 0,
                //     colspan: 0
                //   };
                // }           
            }
        },

        RowStyle({ row, column, rowIndex, columnIndex }) {

            // if (rowIndex <= 3) {
            //     let styleJson = {
            //         "background": "#FAF4FF"
            //     };
            //     return styleJson
            // } else if (rowIndex <= 6) {

            //     let styleJson = {
            //         "background": "#FFF7FB"
            //     };
            //     return styleJson
            // } else {

            //     let styleJson = {
            //         "background": "#DFFFDF"
            //     };
            //     return styleJson
            // }

            let styleJson = {
                    "background":"rgb(255, 245, 247)"
             };
             return styleJson
        },
        getRowClass({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0)
                return "background:rgb(217, 104, 49);color:#000;textAlign:center;";
        },
        headerStyle({ row, column, rowIndex, columnIndex }) {

            if (rowIndex == 0 && columnIndex == 0) {
                this.$nextTick(() => {
                    // 获取表头的所有单元格
                    let n = document.getElementsByClassName("el-table__header")[0].rows[0].cells
                    // 将第二列表头单元格的colSpan设为2
                    n[0].colSpan = 3
                    // 将第三列表头单元格的display设为none
                    n[1].style.display = 'none'
                    n[2].style.display = 'none'
                });
            }

            //  // 1.2 被覆盖的进行隐藏
            //   if (rowIndex === 0 && (columnIndex == 1 || columnIndex == 2)) {
            //     return {
            //       display: "none",
            //     };
            // }

            //  row[0].colSpan=3
            //  row[1].colSpan=0
            //  row[2].colSpan=0


            // if(columnIndex==2||columnIndex==1)
            // 	 return { display: "none" };


            return "background:rgb(255, 245, 247);color:#000;textAlign:center; fontSize:60px;";


        },
        takeScreenshot() {
            const node = document.getElementById('mainContent')
            html2canvas(node, {
                useCORS: true,
                height: node.offsetHeight,
                width: node.offsetWidth,
                scrollY: 0,
                scrollX: 0,
                backgroundColor: this.bgColor,
                scale: 2, // 处理模糊问题
    			dpi: 300, // 处理模糊问题
            }).then(async (canvas) => {
                let oImg = new Image();
                oImg.src = canvas.toDataURL(); // 导出图片
                //document.body.appendChild(oImg);  // 将生成的图片添加到body
                //以下代码为下载此图片功能
                var triggerDownload = $("<a>").attr("href", oImg.src).attr("download", "英雄榜.png").appendTo("body");
                triggerDownload[0].click();
                triggerDownload.remove();

            })
        }

    },
    created() {
        console.log("beforeMount")
        if ($("#youshengHeader"))
            console.log("youshengHeader")
        // $("#youshengHeader").load('http://gudianxiaoshuo.com/js/youshengHeader.html')
    },
    beforeMount() {

    },
    mounted() {

        let tableNum = getTableNum();

        switch (tableNum) {
            case 1:
                this.tableData1 = getTable1();
                break;
            case 2:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                break;
            case 3:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                break;
            case 4:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                break;
            case 5:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                break;

            case 6:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                break;
            case 7:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                break;

            case 8:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                break;
            case 9:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                break;

            case 10:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                break;
            case 11:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                break;
            case 12:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                break;

             case 13:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                break;    
             case 14:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                break;
              case 15:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                this.tableData15 = getTable15();
                break;  
               case 16:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                this.tableData15 = getTable15();
                this.tableData16 = getTable16();
                break;             
               case 17:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                this.tableData15 = getTable15();
                this.tableData16 = getTable16();
                this.tableData17 = getTable17();
                break;   
               case 18:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                this.tableData15 = getTable15();
                this.tableData16 = getTable16();
                this.tableData17 = getTable17();
                this.tableData18 = getTable18();
                break; 
               case 19:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                this.tableData15 = getTable15();
                this.tableData16 = getTable16();
                this.tableData17 = getTable17();
                this.tableData18 = getTable18();
                this.tableData19 = getTable19();
                break;
                case 20:
                this.tableData1 = getTable1();
                this.tableData2 = getTable2();
                this.tableData3 = getTable3();
                this.tableData4 = getTable4();
                this.tableData5 = getTable5();
                this.tableData6 = getTable6();
                this.tableData7 = getTable7();
                this.tableData8 = getTable8();
                this.tableData9 = getTable9();
                this.tableData10 = getTable10();
                this.tableData11 = getTable11();
                this.tableData12 = getTable12();
                this.tableData13 = getTable13();
                this.tableData14 = getTable14();
                this.tableData15 = getTable15();
                this.tableData16 = getTable16();
                this.tableData17 = getTable17();
                this.tableData18 = getTable18();
                this.tableData20 = getTable20();
                break;                
        }


        var tip = localStorage.getItem('tipClosed');
        if (tip)
            this.showTip = false;
        var bgColor = localStorage.getItem('bg');
        var pColor = localStorage.getItem('pColor');
        if (bgColor && pColor) {
            this.textColor = pColor;
            this.bgColor = bgColor;
            document.querySelector('body').style.setProperty('background', bgColor);
            var x = document.querySelectorAll("p");
            var i;
            for (i = 0; i < x.length; i++)
                x[i].style.color = pColor;
        }
        var fontArr = getAllFont();
        for (i = 0; i < fontArr.length; i++) {
            var fontElem = {};
            fontElem.value = fontArr[i];
            fontElem.label = fontArr[i];
            this.options.push(fontElem);
        }
        let fontName = localStorage.getItem('fontName');
        if (fontName) {
            document.querySelector('#app').style.setProperty('font-family', fontName);
            this.fontName = fontName;
        }

        for (i = 20; i < 100; i++) {
            var fontElem = {};
            fontElem.value = i;
            fontElem.label = i;
            this.fontSizeOptions.push(fontElem);
        }

        let fontSize = localStorage.getItem('fontSize');
        if (fontSize) {
            document.querySelector('#app').style.setProperty('font-size', fontSize)
            this.fontSize = fontSize
        }

        window.addEventListener('mousemove', this.myEventFunc);

        this.colorArr = getAllColor();

        var Randbg = localStorage.getItem('Randbg');
        var RandTColor = localStorage.getItem('RandTColor');
        if (Randbg) {
            var fontElem = {};
            fontElem.name = '随机色';
            fontElem.bg = Randbg;
            fontElem.textcolor = RandTColor;
            this.colorArr.push(fontElem);
        }

        let colorIndex = localStorage.getItem('corlorIndex');
        console.log(colorIndex)
        console.log(this.colorArr)
        if (colorIndex && colorIndex < this.colorArr.length)
            this.colorName = this.colorArr[colorIndex].name;

        var zan = getWeixin();
        if (zan)
            this.zanshangUrl = zan;
        else {
            zan = getWeixinFromLocal();
            this.zanshangUrl = zan;
        }




    }
})