/**
 * 滑块验证
 * @param string title 标题
 * @param string sliderBg 背景图片
 * @param string sliderKey key
 * @param string sliderY 高度
 * @clourse start function 开始验证，回调内获取滑块参数
 * @clourse check function 获取行为结果后的回调函数
 * @clourse refresh function 刷新滑块参数方法
 * @return mix 
 */
if (typeof window.langSlider === 'undefined') {
    window.langSlider = class {
    a = '安全验证';
    b = {};
    c = false;
    d = 3;
    x = 27;
    f = '拖动滑块完成拼图，如有问题请联系管理员';
    g = '验证成功，登录中';
    h = '是不是太难了，咱换一个';
    i = '拖动滑块完成拼图';
    j = false;
    m = null;
    k = null;
    l = null;
    constructor(obj) {
        this.a = obj.title || this.a;
        this.m = obj.start || this.m;
        this.k = obj.check || this.k;
        this.l = obj.refresh || this.l;
        this.init();
        this.m(this);
    }
    init() {
        const that = this;
        that.c = true;
        var body = document.body || document.getElementsByTagName('body')[0]
          , head = document.head || document.getElementsByTagName('head')[0]
          , sliderDom = document.querySelector('#sliderDom') || document.createElement('div')
          , sliderCss = document.querySelector('#sliderCss') || document.createElement('style');
        sliderCss.setAttribute('id', 'sliderCss');
        sliderCss.innerHTML = ` html, body{padding: 0; margin: 0; } /* 弹窗开始  */ .lang-dialog__wrapper {position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; width:100%; height: 100%; background: rgba(0, 0, 0, .5); } .lang-dialog {position: relative; margin: 0 auto 50px; border-radius: 2px; box-shadow: 0 1px 3px rgb(0 0 0 / 30%); box-sizing: border-box; background: #FFF; width: 50%; margin-top: calc(50vh - 185px); width: 360px; } .lang-dialog__header {padding: 20px 20px 10px; } .lang-dialog__title {line-height: 20px; font-size: 18px; color: #525252; } .lang-dialog-header-btn {position: absolute; top: 12px; right: 12px; padding: 0; background: 0 0; border: none; outline: 0; cursor: pointer; font-size: 18px; color: rgba(0, 0, 0, 0.45); transition: color 0.2s; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 4px; }
        .lang-dialog-header-btn:hover { color: rgba(0, 0, 0, 0.88); background: rgba(0, 0, 0, 0.04); } .lang-dialog__body {padding: 30px 20px; color: #828282; font-size: 14px; word-break: break-all; } /* 弹窗结束  */ /* loading start */ .loading-body {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.6); z-index: 999; } .loading {position: relative; display: inline-block; width: 30px; height: 30px; border-radius: 50%; border-top: 2px solid transparent; border-bottom: 2px solid transparent; border-left: 2px solid #409eff; border-right: 2px solid #409eff; animation: loading 1s infinite linear; } @keyframes loading {to {transform: rotate(360deg); } } .slider-loading {position: absolute; top: calc(50% - 35px); left: calc(50% - 15px); z-index: 999; } /* loading end */ .lang-dialog__body{padding: 0 10px; height: 320px; } .lang-dialog__header{padding: 20px 10px 10px; } .tips{color:#525252; line-height: 36px; font-size: 18px; } .slider-body{position: relative; width: 100%; height: 245px; } .slider-bg {position: absolute; top: 0; left: 0; background-position: 0px 0px; background-size: 340px 251px; background-repeat: no-repeat; width: 340px; height: 191px; overflow: hidden; } .slider-draw {position: absolute; left: 27px; width: 50px; height: 50px; background: transparent; background-position: -5px -196px; background-size: 340px 251px; background-repeat: no-repeat; z-index: 1; cursor: pointer; opacity: 1; box-shadow: none; } .slider-progress{position: absolute; width: 100%; background-image: url('data:image/png;base64, '); background-position: 0px -213.512px; background-size: 345.06px 313.69px; width: 340px; height: 16px; left: 0px; top: 210px; z-index: 1; opacity: 1; } .slider-success {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; background: hsla(0,0%,100%,.8); } .slider-success .slider-success-icon {width: 64px; height: 64px; margin: 15% auto 0; } .slider-success .slider-success-icon img {width: 100%; } .slider-success .slider-success-text {color: #1bc300; text-align: center; margin-top: 16px; font-size: 18px; } .slider-btn{position: absolute; left: 20px; top: 200px; z-index: 2; width: 65px; height: 35px; line-height: 35px; background-color: rgb(0, 87, 212); box-shadow: rgb(0 87 212 / 50%) 0px 0px 5.05952px 0.505952px; position: absolute; text-align: center; border-radius: 999px; font-size: 0; cursor: pointer; opacity: 1; z-index: 1; -moz-user-select: none; /* 禁止双击节点被选中 */ -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; -moz-user-drag: none; /* 禁止被拖动 */ -webkit-user-drag: none; /* 禁止被拖动 */ } .slider-btn i {display: inline-block; width: 0; vertical-align: middle; } .slider-btn img {width: 18px; height: 13px; -moz-user-select: none; /* 禁止双击节点被选中 */ -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; -moz-user-drag: none; /* 禁止被拖动 */ -webkit-user-drag: none; /* 禁止被拖动 */ pointer-events: none; display: inline-block; vertical-align: middle; } .slider-refresh{position: absolute; cursor: pointer; left: 0px; top: 0px; z-index: 2; font-size: 30px; height: 30px; line-height: 30px; } .slider-tools-btn {position: relative; width: 25px; height: 25px; } /* tips */ .lang-tips a {text-decoration: none; color: #409eff; } .lang-tips-item {display: none; position: fixed; font-size: 14px; color: #525252; max-width: 340px; margin-top: 40px; margin-left: 0; background: white; padding: 7px 10px; border-radius: 4px; } .lang-tips-left {margin-top: -10px; margin-left: -140px; } .lang-tips-left:after {content: ""; position: absolute; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #000; border-right: 10px solid transparent; right: -18px; top: 12px; } .lang-tips-bottom {margin-top: 50px; margin-left: 0; } .lang-tips-bottom:after {content: ""; position: absolute; border-top: 10px solid transparent; border-bottom: 10px solid #fff; border-left: 10px solid transparent; border-right: 10px solid transparent; /* right: calc(50% - 10px); */ left: 10px; top: -20px; } /* tips */ .slider-tools-btn img {width: 100%; height: 100%; } .slider-shock {animation-delay: 0s; animation-name: shock; animation-duration: .1s; animation-iteration-count: 5; animation-direction: normal; animation-timing-function: linear; } @keyframes shock {0% {margin-left: 2px; } 100% {margin-left: -2px; } }`;
        head.appendChild(sliderCss);
        sliderDom.setAttribute('id', 'sliderDom');
        sliderDom.innerHTML = `<div class="lang-dialog__wrapper"> <div class="lang-dialog uk-animation-scale-up"> <div class="lang-dialog__header"> <span class="lang-dialog__title">${this.a}</span> <button type="button" class="lang-dialog-header-btn" id="sliderClose"> <i class="ri-close-line"></i> </button> </div> <div class="lang-dialog__body"> <span class="tips" id="sliderError" >${this.i}</span> <div class="slider-body"> <div class='loading-body' style="display:none;" id="sliderLoading"> <div class="loading slider-loading"></div> </div> <div class="slider-bg slider-img" style="${this.si ? 'background-image:url(' + this.si + ');' : ''}" ></div> <div class="slider-draw slider-move-draw slider-move slider-img"id="sliderY" style="display:none;${this.si ? 'background-image: url(' + this.si + ');' : ''}${'top:' + this.y + 'px;'}"></div> <div class="slider-progress" ></div> <div class="slider-success" style="display:none;" id="sliderSuccess"> <div class="slider-success-icon"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAMAAADVRocKAAAAzFBMVEUAAAAs0AAu1AAs0AAr0AAq1QAs0AAt0AAs0AAs0AAr0AAq0wAs0AAq0QAs0AAs0AAs0AAs0AAr0AAs0AAr0AAs0AAr0QAs0QAs0AApygAs0AAs0AAs0AAs0AAs0QAr0QAt0gAs0AAt0QAtzwAq0QArzwAs0AAqzQAs0QAs0AAs0AAs0AD////l+d/8/vty4FVG1iCI5W/X989G1h881BNy31My0gd34Vr5/vjt++qk65Gd6omO5naB42Za2jdL1ybR9cjA8bNp3kpZ2jY9PuX7AAAAK3RSTlMA/APuFwfUZln0OxLIVEbr49vZzsKxmW1MDvmsqIxpXiGejlA3NGgk1pyDVbbBQAAAArxJREFUaN7Nmody2kAURZ9QQRIyTTTRDDauV3GsFNzjlP//p8CQjAZLwLY3w/mAc9EWZvftIzGS8HIyitp2AAR2OxpNLsOETFHzex5K8Hp+Td/u9DsWdmJ1+o6OvTLoWjiA1R1UFPVutQ0h2lVX5ddXmxCmWZX+ijCGFHEot3BuIM1cYkmd21DAPhcd/TMociY0E7MIysQzgdltQIPGxSH/yRBaBPX9/lMLmgz9vX4Y4HTP+FgwgHWyy78IYIThYsf6bMAQjasyvxvDGLFLRW5gkHnJBMMohYl2bBjFdmibMQwz3vbXYZz61j+0B+N4FcqpgoFq7nebYKDpFj6A6xMqLbDQ+j8LAzAxoA1dMNH9t4kt6PL+/Ov5DwpYm+3chy7fH9M0vctQoE9rOtr+u3TN3Ts+0ln7a5a+f8NrcYzWx0nflD99QQF/FdAz5U8fUKC3CvCgw+fc/2WJAh5RYsr/6R4lJHTB6kdIPqsfU7pl9WNCY1Y/RhSx+hFRCzv4/fPx6Xmp6UeLbJTzsFnb3/T8sClAKcunNE9Q9yMglPMjTfMEdT+wOyBP0PFjzxDlCRr+YN8k5wnKfti7l2lWSFDwo0URhBIU/YhoDLEENT9GdAvBhIL/KwSYkA/RBBU/pnQB4QQFP0JKIJzwJu9HQuQJJ6Tyfk/g2JJp+NETOXhl6n74QkfHTNlv1cQOv5miHx3R43um5kdf+AKSKfktR/wKlSn40ZW5BL49rvealB8DqWvs/evLwxIytCrMF/FL9lICdzGEvZzDXZBiLqmN2IuC7GXNAnMYZM5cWvZcKuGKqTiesxjCCMGC94FiWGd+YvG5H4m4n7nYH+oOMouhTDwjAVz1x1L3OJ57VzhjSDN2SIa6Bym8+rE1Daxwp6JtD1P3OBs3+FtP8uaZa5RwnTfP6JOE0+32n6lo+89fOWa8/GcTqREAAAAASUVORK5CYII=" alt=""> </div> <div class="slider-success-text"> ${this.g} </div> </div> <div class="slider-btn slider-move-btn slider-move"> <i>&nbsp;</i> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcAgMAAABuexVFAAAACVBMVEUAAADCwsL9/f1P0DqbAAAAAXRSTlMAQObYZgAAAB1JREFUGNNjCGVgYGANABKhyMwoEHMBkIgaZWIwAdyJJQnaJRg5AAAAAElFTkSuQmCC" alt=""> <i>&nbsp;</i> </div> </div> <div class="ppoc-tools" style="position:relative;"> <div class="slider-refresh" style="font-size: 29px;"> <div class="slider-tools-btn lang-tips"> <div class="lang-tips-item lang-tips-bottom"> ${this.f} </div> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVgSURBVHgBzVrZUdxMEG7EcjzuH8EvIvA6Ai8ZmAhgqziLByACRASGB4qzChwBZOAlgl1HYDmDfaIoTn/ferQlNSNpRpJd/qrG8s7ZPdPT1zAlDeDq6qr98PDweWpqqoPyP6o6KG1TEsRoi19fX7/jO8D3bmtrK5aamJKKINHPz887b29vXRapADAyxNjDOsx4M5AQjkV3JbvDtQBmrl9eXg58GfFi4OLiYr9pwjWCIIjW1tYOXPs7MXBychJOT0/f4Lg7eX3Q1seH8t0Hk8P5+flRr9cbsY2ndn9/H7ZarRBtvCefULoFS/KuLLqcRikDl5eXyzjaQ7Hv+ggLHYHYw4RYV3BT8Olix/fxDW1zo/Q2NjZui+YpZMCITJQz+QEmP5QGAGZW8hgpE6lcBvKIh6gczc3NRb47XgZzIhEIXtZtRUxYGTg7O/uMz42laa+pXc8D1qaS+KLrcQdXVldXv+r6dwxwJ8DxQLIyT1lfwqXqy1/A8fFxBxf+m4WGj/pit/RgEK8HCvT+4vb29lAcQa3z9PQU4vInWiv2YZ5rYSOXDC0J2tSE+H5M982cQI7cO4tNiZEbQXXe+hgrmzhhbo6PRDNgROdHujOt4/r6ek8cYI6dOxSWdKVPtIR5nU709PT0EP13UlWj2dnZhUSJBKmGSC/E3RIHkHkjs6FD9xCa7Nv5+XnHoa9Q48lvtZ2AjuNu8iNICLCor8j1qG33houC0GsUGqJYtbVRfyMOMDt9oNbbobiO/2/qumpcDLn/Kg6gERK187QVGP/f5uZmD2UJ/1+g7KqhIWR82WUNcwetpzBmgBypMZE4ApohQwTvDYje1f148ciY6rsijqDLotb9xG9gLGBHdb4TR1gcvKO8vtio65KxuaC/pcZ2KUY8ga5q6Hv65BnZL9IuljZnt5x3gZ5uuo5RYMAwMF0JBpx3n1CTFqpGc9ppePlTDEfV2h2cavBBVQ7EA1C1Pco2C92Nor5QtZn7gjHO1t3Q1ldVYQuThOkaMPRTPGDEbbesH3a/q608L7x4gIES6EuP/0BfKEx3mpmZiaUhkGjOT01lCfxjH2VBMMp7fHxMV7UD3akpPx86/gsNHMpVTtYi8g3gLbS9Z6BB5IoVjZqroSwDGchwlZjoPwGqaBOsR1IBNtp4B8jApAG6tS2e6s0FhvC+1ABjDFUV8wQyqow3W/4AmojmtMbE7zjAP1ptLso/CuaUVNX3QBsTbdiqwsdCuyJx4FJrDALo1tt0ZeIkSU34WGgX0A3R6ph2pEXdiuion240vnYkNeBqoT3QVb+HXGOclcBu3UF0Jh1MfBBJDSRvBphrVJYedIHJ3KUxdq/Hhsz42pmIx2QEKoHEw+QPaIXx8wZz/agjlraoL3FDxgxQjHTEA+xXXZQ7rxYMwdCKVICJ1zO7TycwcUMmroTtFLDovlQA7lOT1jwStfvpbMmEgZxT2K0iSkxgSXYzOLf3PYBy2dHZEpPYiidr6UEgmAGNjpG93QAePRgZM893MF/P0yTKdHDFbMlCusI5uQtiFl2zaXXBOAI03IhDcvedO80O6LinqpmIGtTRTK4wYmNLlPVsp5j7wIFdiCy6t/JrYhmM6uV67zZJJ3Qz9EgB8piQ36nCqKmghLuOE47EkmYpIp4ofeQzrzVXYs/hxChRlYdqh/dmyvwe5r0umsf5mdXIZZg7EbxP45IM+ScFTA6kn1kZKKGtQ5+LHm/R6z5f8DHXUiPPrIqRPJFqCmNb5BNyev+pQdFrYg1Ufm+u/MceqYdqeq4dqQAG+UxlViE8QWUG0kiYMXlWRnS0wmGqCx87SCAN4U9GgQykmshB/QKLND1fMNqj0gAAAABJRU5ErkJggg=="> </div> </div> <div class="slider-refresh" style="left: 35px;"> <div class="slider-tools-btn lang-tips" style="width:24px;height: 24px;"> <!-- 刷新 --> <div class="lang-tips-item lang-tips-bottom"> 刷新 </div> <img id="sliderRefresh" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAPZSURBVHgB7VpLTuNAEC2b8NlNboDnBJgbJCdgOAFkAQixGDgB9gkIC4T4SIETTOYEhBOQOcF4buAVQojPvGfZGbv9iWMbE0vzpMam3e7Uq66u7q6yJhXh/PzcwKWjaZqJsop7E6XtF8JlwTPn7e3tF64jXMf7+/uOlIAmJTAYDNovLy/f39/fOyxSACSCd29A5r4ImUIEfG1buq5vyD8NlwbI3Ly+vtp5iFAGtpuJQKBxaOtQKhRcgQvF9Hd2duy0BldXV8eQQwMBKzeBs7Mzs9Vq/cCtkdYGpkBzuIcAY9r3ysqK2+v1aPse+cfHRwN9GL65rUHjnYyf5FzpqqNB4VFvodi5CVxeXtLOLUnWuoNn/eXl5dtA2LwIJj4IH0uyYthfb29vbxgWnve5CYRfUgVHsdD5rVQAkNnOIHKEZ1/CcgQE9KxO04SHxk+XlpbWqxKegDD0RF2UpD5PUpQoLUkBzSbhJRd1R/wx+QD49r6N0XD80ZiKxBGgbdKulWoXM7/7UcKHQdOAonp52sYI0FuA/Z1S7Ql/cHAwlpoAb7Wap12MAP28xCeSXafwGY4jhggBmo76IicsJmtfasIswhPqCFjK/w78uyU1YVbhiYkXovZh+1vKc2vWxako+PvcHuDWzvnKiH+0UAeW4rocmM5XmXNMTChJ+9IAeASwaPHwYYQfYKX9KQ2ARwB7cDNcyV1lXbZfFh4B/2AyAba5jdA+4RGAwJFtMvfy0hB4BGAyplLvSEMQeKHICJSNFNQJXRqO/wQ+GwGBiM/3D9uNQEDAUeoNaQg8AoxVRip13ZSGIFgHIgsXFrYNaQiClXgYruTCxrOxNAAeAX/hckL17efn521pACZuVA0oNcWMJgQQiI0c3BmAvbi4+CZzjgkB7v8Twnon8z4XpkUlDMyFXCG+z0KEACczo75Km8Pr6+stmVPEwus0GWj9QaKrMZNz3d3d3VoPOkyq+IvqKG2LH9vMcS4gPrMp0f1RG5P6zj/81wKOOuKjDyAwQPmN/VknqV3ibtSPg6qm5JGAZzqUDwZD+wg03CjVnaS2mRmahGBXgD7CLnbVkQvffAe4jblvmPB6kglPTTFlkHCkohRTjuznUVqAOVeSzzebk5THDopVJFGdQ/BIki8JudOsfvCXiQ8jtTNk3WG797gdLSwsuIuLi044zfr09MTkiclVHte1rOw++hqjr81pSpk5U59hUlWBhO28OYmynxpUucBxK3PKPdkszqHUxx6hRDXTUoXWCMZhcRkWSZQTpQiEEf7cBtc1FAP3RqiJC2EpIF3hH54Coe1hWVf8FxUNF4vY5AiIAAAAAElFTkSuQmCC"> </div> </div> </div> </div> </div> </div>`;
        body.appendChild(sliderDom);
        that.loadTips();
        that.sliderLoading();
        const sliderMove = document.querySelectorAll(".slider-move");
        const sliderMoveDraw = document.querySelector('.slider-move-draw');
        const sliderMoveBtn = document.querySelector('.slider-move-btn');
        const sliderRefreshBtn = document.querySelector('#sliderRefresh');
        var sliderClose = document.querySelector('#sliderClose');
        sliderClose.onclick = (e)=>{
            that.c = false;
            that.j = false;
            $('.lang-dialog__wrapper').fadeOut(200,function (){
                $(this).remove();
            });
        }
        ;
        sliderRefreshBtn.onclick = (e)=>{
            that.sliderLoading();
            that.l(that);
        }
        ;
        for (let i = 0; i < sliderMove.length; i++) {
            sliderMove[i].ontouchstart = function(e) {
                /* 移动触摸移动 */
                const slider = e.target;
                const x = e.touches[0].clientX - slider.offsetLeft;
                document.ontouchmove = (e)=>{
                    const left = e.touches[0].clientX - x;
                    if (left >= 20 && left <= 280) {
                        sliderMoveDraw.style.left = 5 + left + 'px';
                        sliderMoveBtn.style.left = left + 'px';
                        that.x = 5 + left;
                    }
                }
                ;
                document.ontouchend = (e)=>{
                    document.ontouchmove = null;
                    document.ontouchend = null;
                    that.sliderLoading();
                    that.k(that.sk, that.x, that);
                }
                ;
            }
            ;
            sliderMove[i].onmousedown = function(e) {
                const slider = e.target;
                /* 获取目标元素 */
                /* 算出鼠标相对元素的位置 */
                const x = e.clientX - slider.offsetLeft;
                document.onmousemove = (e)=>{
                    const left = e.clientX - x;
                    if (left >= 20 && left <= 280) {
                        sliderMoveDraw.style.left = 5 + left + 'px';
                        sliderMoveBtn.style.left = left + 'px';
                        that.x = 5 + left;
                    }
                }
                ;
                document.onmouseup = (e)=>{
                    document.onmousemove = null;
                    document.onmouseup = null;
                    that.sliderLoading();
                    that.k(that.sk, that.x, that);
                }
                ;
            }
            ;
        }
    }
    sliderStart(obj) {
        const that = this;
        if (!that.c)
            return;
        that.sliderReset(obj);
        that.sliderLoading();
    }
    sliderReset(obj) {
        const that = this;
        if (!that.c)
            return;
        const sliderMoveDraw = document.querySelector('.slider-move-draw');
        const sliderMoveBtn = document.querySelector('.slider-move-btn');
        sliderMoveDraw.style.left = '27px';
        sliderMoveBtn.style.left = '20px';
        /* 换key */
        that.sk = obj.sliderKey;
        /* 换背景 */
        if (obj.sliderBg) {
            const si = document.querySelectorAll('.slider-img');
            for (let i = 0; i < si.length; i++) {
                si[i].style.backgroundImage = 'url(' + obj.sliderBg + ')';
            }
        }
        /* 复位 */
        if (obj.sliderY) {
            const sliderY = document.querySelector('#sliderY');
            sliderY.style.display = 'block';
            sliderY.style.top = obj.sliderY + 'px';
        }
        /* 更换提示文字 */
        document.getElementById('sliderError').innerText = that.i;
    }
    sliderError(obj) {
        const that = this;
        if (!this.c)
            return;
        that.sliderLoading();
        document.getElementById('sliderError').innerText = that.h;
        const sliderBody = document.querySelector('.slider-body');
        that.addClass(sliderBody, 'slider-shock');
        setTimeout(function() {
            that.removeClass(sliderBody, 'slider-shock');
            that.sliderReset(obj);
        }, 600);
    }
    sliderSuccess() {
        const that = this;
        if (!that.c)
            return;
        that.sliderLoading();
        document.querySelector('#sliderSuccess').style.display = 'block';
    }
    sliderRefresh(obj) {
        const that = this;
        if (!that.c)
            return;
        that.sliderLoading();
        that.sliderReset(obj);
    }
    sliderLoading() {
        const that = this;
        that.j = !that.j;
        const sliderLoading = document.querySelector('#sliderLoading');
        if (that.j) {
            sliderLoading.style.display = 'block';
        } else {
            sliderLoading.style.display = 'none';
        }
    }
    loadTips() {
        const that = this;
        const sliderTips = document.querySelectorAll(".lang-tips");
        for (let i = 0; i < sliderTips.length; i++) {
            sliderTips[i].onmouseenter = (e)=>{
                /* 隐藏其他tips */
                for (let j = 0; j < sliderTips.length; j++) {
                    if (i != j) {
                        that.getByClass('lang-tips-item', sliderTips[j])[0].style.display = 'none';
                    }
                }
                clearTimeout(that.b[i]);
                const item = that.getByClass('lang-tips-item', sliderTips[i])[0];
                item.style.display = 'block';
                /* item.style.marginLeft = -(item.clientWidth/2) + 12.5 + 'px'; */
                item.style.marginLeft = '-8px';
            }
            ;
            sliderTips[i].onmouseleave = (e)=>{
                clearTimeout(that.b[i]);
                const item = that.getByClass('lang-tips-item', sliderTips[i])[0];
                that.b[i] = setTimeout(function() {
                    item.style.display = 'none';
                }, 500);
            }
            ;
        }
    }
    hasClass(ele, cls) {
        return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    addClass(ele, cls) {
        if (!this.hasClass(ele, cls))
            ele.className += ' ' + cls;
    }
    removeClass(ele, cls) {
        if (this.hasClass(ele, cls)) {
            const reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            ele.className = ele.className.replace(reg, ' ');
        }
    }
    getByClass(cls, ele) {
        ele = ele || document.body;
        var arr = [];
        var tags = ele.getElementsByTagName('*');
        for (var i = 0; i < tags.length; i++) {
            var classArr = tags[i].className.split(' ');
            for (var j = 0; j < classArr.length; j++) {
                if (classArr[j] === cls) {
                    arr.push(tags[i]);
                    break;
                }
            }
        }
        return arr;
    }
}
}

// PPOC 兼容入口
window.ppoCaptcha = function(options) {
    var successCb = options.success || function(){};
    var failCb = options.fail || function(){};

    var slider = new window.langSlider({
        title: '安全验证',
        start: function(that) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: Theme.ajaxurl,
                data: { action: 'get_ppoc_data' },
                success: function(data) {
                    if (data.img && data.key) {
                        that.si = data.img;
                        that.sk = data.key;
                        that.y = data.y;
                        that.sliderReset({
                            sliderBg: data.img,
                            sliderKey: data.key,
                            sliderY: data.y
                        });
                        that.sliderLoading();
                    }
                }
            });
        },
        check: function(key, x, that) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: Theme.ajaxurl,
                data: {
                    action: 'ppoc_check',
                    key: key,
                    x: x
                },
                success: function(data) {
                    if (data.code == 200) {
                        that.sliderSuccess();
                        setTimeout(function() {
                            $('.lang-dialog__wrapper').fadeOut(200,function(){
                                $(this).remove();
                            });
                            successCb(that);
                        }, 800);
                    } else {
                        that.sliderError({
                            sliderBg: that.si,
                            sliderKey: that.sk,
                            sliderY: that.y
                        });
                        failCb();
                    }
                },
                error: function() {
                    failCb();
                }
            });
        },
        refresh: function(that) {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                url: Theme.ajaxurl,
                data: { action: 'get_ppoc_data' },
                success: function(data) {
                    if (data.img && data.key) {
                        that.si = data.img;
                        that.sk = data.key;
                        that.y = data.y;
                        that.sliderReset({
                            sliderBg: data.img,
                            sliderKey: data.key,
                            sliderY: data.y
                        });
                        that.sliderLoading();
                    }
                }
            });
        }
    });
};
