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: [],
            lineArr: [
                { text: '无', url: 'none' },
                { text: '行线1', url: 'http://gudianxiaoshuo.com/js/line/lines56.png' },
                { text: '行线2', url: 'http://gudianxiaoshuo.com/js/line/lines56_pink1.png' },
                { text: '行线3', url: 'http://gudianxiaoshuo.com/js/line/lines56_red.png' },
                { text: '行线4', url: 'http://gudianxiaoshuo.com/js/line/lines56_yellow.png' },
                { text: '行线5', url: 'http://gudianxiaoshuo.com/js/line/lines56_green.png' },
                { text: '行线6', url: 'http://gudianxiaoshuo.com/js/line/lines56_blue.png' },
                { text: '行线7', url: 'http://gudianxiaoshuo.com/js/line/lines56_white.png' },
                { text: '行线8', url: 'http://gudianxiaoshuo.com/js/line/lines56_black.png' },
                { text: 'line68', url: 'http://gudianxiaoshuo.com/js/line/lines68_green.png' },
                { text: 'line76', url: 'http://gudianxiaoshuo.com/js/line/lines76_green.png' },
                { text: 'line86', url: 'http://gudianxiaoshuo.com/js/line/lines86_green.png' },
                { text: 'line96', url: 'http://gudianxiaoshuo.com/js/line/lines96_green.png' }
            ],
            lineUrl: 'http://gudianxiaoshuo.com/js/line/lines56.png',
            fontSize: 20,
            textColor: null,
            bgColor: null,
            showTip: true,
            foolcolorVar: 'rgb(255,255,255)',
            scrollcolorVar: 'rgb(255,255,255)',
            scrollHiddenVar: 'none',
            linkFontSizeVar: 20,
            zanshangUrl: "http://gudianxiaoshuo.com/assets/img/zan.png",
            isHidden: true,
            hasOpendOnce: false,
            activeIndex: '1',
            ignoreObserver: false, // 控制observer的开关
            lineHeight: 56,
            noteFontSize: 0.3,
            engColor: null,
            noteColor: null

        }
    },

    methods: {
        selectLine(lineUrl) {

            console.log(lineUrl);
            this.reSetLine(lineUrl);
            localStorage.setItem('line', lineUrl);
        },


        reSetLine(imgUrl) {
            if (imgUrl === "")
                imgUrl = 'http://gudianxiaoshuo.com/js/line/lines56.png';
            var x = document.querySelectorAll('p');
            var i;
            for (i = 0; i < x.length; i++) {
                x[i].style.background = `rgba(0,0,0,0) url('${imgUrl}') repeat`;

            }
        },


        // 设置行间距的函数
        setLineHeight(value) {

            var x = document.querySelectorAll('p');
            var i;
            for (i = 0; i < x.length; i++) {
                x[i].style.lineHeight = value + 'px';
            }
        },




        incLineHeight() {
            this.lineHeight += 1;
            this.setLineHeight(this.lineHeight);




        },
        decLineHeight() {

            if (this.lineHeight > 56) {
                this.lineHeight -= 1;
                this.setLineHeight(this.lineHeight);
            }


        },
        ToSec(sectionId) {


            const element = document.getElementById(sectionId);
            if (element) {
                window.scrollTo({
                    top: element.offsetTop,
                    behavior: 'smooth'
                });
            }
        },
        toggleNav() {
            this.isHidden = !this.isHidden;
            this.hasOpendOnce = true;
        },
        handleSelect(key) {

            this.ignoreObserver = true;

            this.activeIndex = key;
            this.ToSec(`sec${key}`);

            setTimeout(() => {
                this.ignoreObserver = false;
            }, 200); // 1秒后重置ignoreObserver


        },

        scrollToActiveItem(activeItem) {
            const navContainer = document.querySelector('.nav-content');
            const itemTop = activeItem.offsetTop;
            const itemBottom = itemTop + activeItem.clientHeight;
            const containerTop = navContainer.scrollTop;
            const containerBottom = containerTop + navContainer.clientHeight;

            if (itemTop < containerTop) {
                navContainer.scrollTop = itemTop;
            } else if (itemBottom > containerBottom) {
                const newTop = itemBottom - navContainer.clientHeight;
                navContainer.scrollTop = newTop;
            }

        },


        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;
            }

            var a = document.querySelectorAll("a");
            for (i = 0; i < a.length; i++) {
                a[i].style.color = textColor;
            }
            localStorage.setItem('bg', bgColor);
            localStorage.setItem('pColor', textColor);
            this.textColor = textColor;
            this.bgColor = bgColor;

            document.querySelector('.nav-container .el-menu').style.setProperty('background-color', bgColor)

        },
        colorPicText(color) {
            this.textColor = color;
            this.setTBColor(this.textColor, this.bgColor);
            this.saveRand(this.textColor, this.bgColor);
            console.log(this.textColor)
        },
        colorPicBg(color) {
            this.bgColor = color;
            this.setTBColor(this.textColor, this.bgColor);
            this.saveRand(this.textColor, this.bgColor);
            console.log(this.textColor)
        },

        setNoteColor(color) {

            localStorage.setItem('noteColor', color);


            var a = document.querySelectorAll("strong");
            for (i = 0; i < a.length; i++) {
                a[i].style.setProperty('--note-color', color);
            }


        },

        setEngColor(color) {

            localStorage.setItem('engColor', color);

            var a = document.querySelectorAll("strong");
            for (i = 0; i < a.length; i++) {
                a[i].style.color = color;
            }

        },


        randWordColor() {
            var a = document.querySelectorAll("strong");
            for (i = 0; i < a.length; i++) {
                var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
                a[i].style.color = randomColor;
            }


        },

        randNoteColor() {

            var a = document.querySelectorAll("strong");
            for (i = 0; i < a.length; i++) {
                var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);

                a[i].style.setProperty('--note-color', randomColor);
            }
        },

        setNoteSize() {
            var a = document.querySelectorAll("strong");
            for (i = 0; i < a.length; i++) {
                a[i].style.setProperty('--note-font-size', `${this.noteFontSize}em`);
            }
        },


        incNoteHeight() {

            this.noteFontSize = this.noteFontSize + 0.1;

            localStorage.setItem('noteSize', this.noteFontSize.toString());

            console.log(this.noteFontSize);

            this.setNoteSize();



        },
        decNoteHeight() {

            if (this.noteFontSize < 0.2)
                return;
            this.noteFontSize = this.noteFontSize - 0.1;
            console.log(this.noteFontSize);

            localStorage.setItem('noteSize', this.noteFontSize.toString());
            this.setNoteSize();

        },






        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 url = decodeURI(location.href);
                NimCefWebInstance.call('CEF_SendToCppEdgeListen', { url }, (error, result) => {

                });


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

                NimCefWebInstance.call('CEF_SendToCppButtonInfo', { name }, (error, result) => {

                });

            }
        },



        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;
        }


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

    },
    mounted() {

        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);
            const menuElement = document.querySelector('.nav-container .el-menu');
            if (menuElement) {
                menuElement.style.setProperty('background-color', bgColor);
            }


            var x = document.querySelectorAll("p");
            var i;
            for (i = 0; i < x.length; i++)
                x[i].style.color = pColor;


            var a = document.querySelectorAll("a");
            for (i = 0; i < a.length; i++) {
                a[i].style.color = pColor;
            }
        }

        var noteColor = localStorage.getItem('noteColor');
        var engColor = localStorage.getItem('engColor');
        var noteSize = localStorage.getItem('noteSize');
        if (noteColor) {
            this.noteColor = noteColor;
            this.setNoteColor(noteColor);
        }
        if (engColor) {
            this.engColor = engColor;
            this.setEngColor(engColor);
        }
        if (noteSize) {

            this.noteFontSize = parseFloat(noteSize);
            this.setNoteSize();
        }








        var storedLine = localStorage.getItem('line');

        const matchingOption = this.lineArr.find(option => {
            const url = String(option.url); // 确保 url 也是字符串并去掉前后空格
            return url === storedLine;
        });


        if (matchingOption) {
            this.lineUrl = matchingOption.url;
            this.reSetLine(this.lineUrl);
        }


        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 fontName1 = localStorage.getItem('fontName');
        if (fontName1) {
            document.querySelector('#app').style.setProperty('font-family', fontName1);
            this.fontName = fontName1;
            // console.log(this.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;



        const observer = new IntersectionObserver(entries => {

            if (this.ignoreObserver || !this.hasOpendOnce)
                return;

            entries.forEach(entry => {

                console.log(entry);

                {
                    const id = entry.target.id.replace('sec', '');

                    this.activeIndex = id;
                    // 选中导航项后滚动到可见区域
                    this.$nextTick(() => {
                        const activeItem = document.querySelector('.el-menu-item.is-active');

                        if (activeItem) {
                            this.scrollToActiveItem(activeItem);
                        }
                    });
                }
            });
        });
        document.querySelectorAll('[id^="sec"]').forEach(section => {
            observer.observe(section);

        });









        // var zan=getWeixin();
        //                   console.log("webzan",zan)
        // if(zan)
        //  this.zanshangUrl=zan;
        // else{
        //  zan=getWeixinFromLocal();                           
        //  this.zanshangUrl=zan;
        //  console.log("zan",zan)
        // }








        // document.getElementById("mainContent").scrollIntoView();
        // document.getElementById("mainContent").focus();
        //  document.getElementById("mainContent").select();
        // document.getElementById("mainContent").setSelectionRange(0,1);
    }
})

window.onkeydown = function(ev) {

    console.log(ev);
    if (ev.ctrlKey && ev.shiftKey && event.keyCode === 58) { //89  is  y


        var mainContent = document.getElementById("mainContent");
        var preBrother = mainContent.previousElementSibling;
        while (preBrother) {
            preBrother.style.visibility = "hidden"; //visible
            preBrother = preBrother.previousElementSibling;
        }


        setTimeout(function() {

            var mainContent = document.getElementById("mainContent");
            var preBrother = mainContent.previousElementSibling;
            while (preBrother) {
                preBrother.style.visibility = "visible"; //visible
                preBrother = preBrother.previousElementSibling;
            }

        }, 500)
    }
}