<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="renderer" content="webkit">
    <title>keyword - 青荇搜索</title>
    <link rel="shortcut icon" type="image/png" href="https://i.loli.net/2021/02/10/lFnaXCt7QmxrML4.png">
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
            line-height: 21px;
        }
        
        h1,
        h2 {
            font: 19px 'Segoe UI', Arial, Helvetica, Sans-Serif;
            color: #600092;
        }
        
        html,
        body,
        p,
        img,
        ol,
        ul,
        li,
        form,
        table,
        tr,
        th,
        td {
            border: 0;
            border-collapse: collapse;
            border-spacing: 0;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        h2 {
            margin: 3px;
        }
    </style>
    <!-- <link href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900" rel="stylesheet"/>
    <style>
        body,h1,h2,h3,h4,h5,h6,a,span,div,p,span,label,input{
            font-family: "Noto Sans SC","PingFang SC","Lantinghei SC","Microsoft YaHei",arial,"\5b8b\4f53",sans-serif, tahoma,Arial, Helvetica, sans-serif;
            font-weight: 400;
        }
    </style> -->
    <!-- <link href="https://cdn.jsdelivr.net/gh/ncmake/Verdant_Static_Resources@v0.0.1/css/search_content.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/gh/ncmake/Verdant_Static_Resources@v0.0.1/css/search_index.css" rel="stylesheet" /> -->
    <link href="css/search_content.css" rel="stylesheet" />
    <link href="css/search_index.css" rel="stylesheet" />
</head>

<body>
    <div style="width: 100%;border-bottom: 1px solid rgba(0,0,0,.15);display: inline-block;z-index: 1;position: fixed;">
        <div style=" position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            z-index: -1;"></div>
        <div class="list-top">
            <div class="logo">
                <div style="width: 110px;height: 36px;display: table;margin: 0 auto;margin-top: 3px;">
                    <img src="https://i.loli.net/2021/02/10/TMWZNFryAoYRzd9.jpg" />
                </div>
            </div>
            <div class="search-input-w search-input-w-box search-input-w-box-top">
                <div class="search-input-w-box-left">
                    <span style="width: 100%;display: inline-block;">
						<input id="input_form_k" type="text"/>
					</span>
                </div>
                <span class="form-button-box">
                    <input class="form-button" id="start_search" type="button" value="搜索" autocomplete="off"/>
                </span>
                <div id="search_associate">
                    <ul>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div id="result_div" style="width: 100%;display: flex;position: relative;">
        <div style="word-break: break-all;word-wrap: break-word;position: relative;">
            <div class="result-content-left">
                <span>搜索结果&nbsp;[<span id="loading_x">正在搜索</span>]&nbsp;<span class="return-black">&nbsp;(当前页共有 <span id="result_len">-</span> 条结果)</span>&nbsp;</span>
                <div class="search-result-li">
                    <ol id="result_list_ol">
                        <li></li>
                    </ol>
                    <div class="corl-v">
                        <a href="/">上一页</a>
                        <a href="/">下一页</a>
                    </div>
                </div>
            </div>
            <div class="result-content-right">
                <span>推荐</span>
            </div>
        </div>
    </div>
</body>
<script>
    var timer = null;
    var ldtimer = null;
    var ldcount = 0;
    var rkey = [];
    var inputi = {
        focus: false,
        now: -1
    }

    function JsonToArray(stree) {
        let p = [];
        for (let i = 1; i <= stree.length; i++) {
            p.push(stree[i.toString()])
        }
        return p
    }

    function GetQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        }
        return null;
    }

    function hrefg(index) {
        document.getElementById("input_form_k").value = rkey[index];
        setTimeout(() => {
            gourl();
        }, 30);
    };

    var keyword = GetQueryString("keyword");
    document.getElementById("input_form_k").value = keyword;
    var amount = GetQueryString("amount");
    amount = amount != null && typeof parseInt(amount) == "number" ? parseInt(amount) : 0;
    const lastpg = amount - 10 <= 0 ? 0 : amount - 10;
    const nextpg = amount + 10;

    document.getElementById("start_search").addEventListener("click", function() {
        gourl();
    });

    document.getElementById('input_form_k').addEventListener("keyup", function(e) {
        let tmp_ = encodeURIComponent(replaceUri(document.getElementById("input_form_k").value));
        if (e.key == "Enter") {
            if (inputi.now != -1) {
                hrefg(inputi.now);
            } else {
                gourl();
            }
        }
        //输入间隔
        if (e.key.indexOf("Arrow") == -1 && tmp_.length > 0) {
            //console.log('timer ok')
            clearTimeout(timer)
            timer = setTimeout(() => {
                let tmp_2 = encodeURIComponent(replaceUri(document.getElementById("input_form_k").value));
                let xhr = null;
                if (window.XMLHttpRequest) {
                    xhr = new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xhr.open('GET', '/keyword_think?keyword=' + tmp_2, true);
                xhr.onload = function() {
                    let dt = JSON.parse(xhr.response);
                    let elm = document.querySelector("#search_associate ul")
                    elm.innerHTML = "";
                    for (let i = 0; i < dt.length; i++) {
                        let fx = document.createElement("li");
                        fx.addEventListener("click", function() {
                            hrefg(i);
                        });
                        fx.addEventListener("mouseenter", function() {
                            inputi.now = i;
                            SelectAssociate(i, false);
                        });
                        fx.innerText = dt[i];
                        elm.appendChild(fx);
                    }
                    inputi.now = -1;
                    SelectAssociate(inputi.now, true);
                    rkey = dt;
                    timer = null;
                }
                xhr.send();
            }, 500);
        }
    });

    function gourl() {
        location.href = "searchlist" + "?keyword=" + encodeURIComponent(replaceUri(document.getElementById("input_form_k").value));
    };

    if (keyword != null) {
        document.querySelector("title").innerText = keyword + " - 青荇搜索";
    } else {
        document.querySelector("title").innerText = "青荇搜索";
    }

    {
        let px = document.querySelector(".corl-v").querySelectorAll("a");
        px[0].href = 'searchlist?keyword=' + keyword + '&amount=' + lastpg;
        px[1].href = 'searchlist?keyword=' + keyword + '&amount=' + nextpg;
    }

    function SetList(vl, amount_) {
        let v = document.getElementById("result_list_ol");
        if (keyword == null) {
            let l = document.createElement("li");
            l.className = 'result-li';
            l.innerHTML = '<li class="err_result"><h2><span>这页什么也没有哦!</span></h2>' +
                '<div class="result-cont">您可以尝试修改关键词获得其他搜索结果 _(:з」∠)_</div></li>';
            v.appendChild(l)
            return false
        }

        amount_ = parseInt(amount_) == NaN ? 0 : parseInt(amount_);
        let xhr = null;
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }

        ldtimer = setInterval(() => {
            lding();
        }, 300);

        xhr.open('GET', '/search?keyword=' + encodeURIComponent(replaceUri(vl)) + '&amount=' + amount_, true);
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4) { //完成了才调用，没完成调用也没意思
                if (xhr.status == 200) { //http状态码 - 成功时调用这个函数
                    let v = document.getElementById("result_list_ol");
                    let dt1 = (JSON.parse(xhr.response));

                    if (xhr.response != '{}' & dt1.length != 0) {
                        let dt = JsonToArray(dt1);
                        document.getElementById('result_len').innerText = dt1.length;

                        if (dt1.length < 10) {
                            let px = document.querySelector(".corl-v").querySelectorAll("a");
                            px[1].href = "";
                            px[1].style.display = "none";
                        }

                        dt.forEach((el) => {
                            //console.log(el);
                            let l = document.createElement("li");
                            //判断翻译
                            if (el.type == 'translation') {
                                let a = el.detail;
                                if (document.getElementById('traudio') == null) {
                                    let b = document.createElement('audio');
                                    b.id = 'traudio';
                                    document.getElementsByTagName('body')[0].appendChild(b);
                                }
                                //console.log(a.split('\n'));
                                let b = a.split('\n');
                                l.className = 'result-translate';
                                let c = "";
                                for (let i = 5; i < b.length; i++) {
                                    if (i + 1 >= b.length) {
                                        c += b[i];
                                    } else {
                                        c += b[i] + '\n';
                                    }
                                }

                                let x1 = document.createElement('h2');
                                x1.innerHTML = '<a href="' + el.url + '">' + el.title + '</a>';

                                l.appendChild(x1);

                                let x2 = document.createElement('div');
                                x2.className = 'result-translate-content-left';

                                let x2_1 = document.createElement('div');
                                x2_1.className = 'result-translate-content-c1';
                                x2_1.innerText = b[0];

                                let x2_2 = document.createElement('div');
                                x2_2.className = 'result-translate-content-c2';

                                let x2_2_uk = document.createElement('span');
                                x2_2_uk.className = 'result-translate-sound';
                                x2_2_uk.addEventListener('click', function() {
                                    tsAudio(el.music_UK.toString())
                                })
                                x2_2_uk.innerText = b[1] + " " + b[2];

                                let x2_2_usa = document.createElement('span');
                                x2_2_usa.className = 'result-translate-sound';
                                x2_2_usa.addEventListener('click', function() {
                                    tsAudio(el.music_USA.toString())
                                })
                                x2_2_usa.innerText = b[3] + " " + b[4];

                                x2_2.append(x2_2_uk)
                                x2_2.append(x2_2_usa)

                                let x3 = document.createElement('div');
                                x3.className = 'result-translate-content-c3';
                                x3.innerText = c;

                                x2.appendChild(x2_1)
                                x2.appendChild(x2_2)
                                x2.appendChild(x3)
                                l.appendChild(x2)

                            } else if (el.type == 'extension') {
                                l.className = 'result-li';
                                l.innerHTML = '<h2><a href="' + el.url + '">' + el.title + '</a></h2>' +
                                    '<span class="url-green">' + urlcut(el.url) + '</span>' +
                                    '<div class="result-cont"><iframe class="plugin-iframe" scrolling="no" style="height:' + (el.height) + 'px" src="' + el.extension_url + '"></iframe></div>';
                            } else {
                                l.className = 'result-li';
                                l.innerHTML = '<h2><a href="' + el.url + '">' + el.title + '</a></h2>' +
                                    '<span class="url-green">' + urlcut(el.url) + '</span>' +
                                    '<div class="result-cont">' + el.detail + '</div>';
                            }

                            v.appendChild(l)
                        });
                    } else {
                        document.getElementById('result_len').innerText = '0';
                        let l = document.createElement("li");
                        l.innerHTML = '<li class="err_result"><h2><span>这页什么也没有哦!</span></h2>' +
                            '<div class="result-cont">您可以尝试修改关键词获得其他搜索结果 _(:з」∠)_</div></li>';
                        v.appendChild(l)
                    }

                    clearInterval(ldtimer);
                    document.getElementById("loading_x").innerText = "搜索完成";
                } else {
                    clearInterval(ldtimer);
                    document.getElementById("loading_x").innerText = "搜索失败";
                    document.getElementById('result_len').innerText = '0';
                    let l = document.createElement("li");
                    l.innerHTML = '<li class="err_result"><h2><span>这页什么也没有哦!</span></h2>' +
                        '<div class="result-cont">您可以尝试修改关键词获得其他搜索结果 _(:з」∠)_</div></li>';
                    v.appendChild(l);
                }
            }
        }
        xhr.send();
    }

    document.getElementById('input_form_k').addEventListener('focus', function() {
        document.getElementById('search_associate').style.display = "block";
        inputi.focus = true;
        SelectAssociate(inputi.now, true);
    });

    document.getElementById('result_div').addEventListener("click", function() {
        document.getElementById('search_associate').style.display = "none";
        inputi.focus = false;
        inputi.now = -1;
        SelectAssociate(inputi.now, true);
    });

    document.getElementById("result_div").addEventListener("mouseup", function() {
        document.getElementById('search_associate').style.display = "none";
        inputi.focus = false;
        inputi.now = -1;
        SelectAssociate(inputi.now, true);
    });

    document.addEventListener("keyup", function(e) {
        let keys = e.key;
        if (keys.indexOf("Arrow") != -1) {
            if (keys == "ArrowDown") {
                if (inputi.now + 1 < rkey.length) {
                    inputi.now = inputi.now + 1;
                }
            } else {
                if (inputi.now - 1 > -1) {
                    inputi.now = inputi.now - 1;
                }
            }
            SelectAssociate(inputi.now, true);
        }
    });

    function SelectAssociate(i, u) {
        let elm = document.querySelectorAll("#search_associate ul li");
        if (i == -1) {
            for (let index = 0; index < elm.length; index++) {
                let element = elm[index];
                if (element.classList.contains("search-associate-select")) {
                    element.classList.remove("search-associate-select");
                }
            }
        } else {
            for (let index = 0; index < elm.length; index++) {
                let element = elm[index];
                if (index == i) {
                    if (!element.classList.contains("search-associate-select")) {
                        element.classList.add("search-associate-select");
                    }
                    if (u) {
                        document.getElementById("input_form_k").value = rkey[i];
                    }
                } else {
                    if (element.classList.contains("search-associate-select")) {
                        element.classList.remove("search-associate-select");
                    }
                }
            }
        }
    }

    window.onload = function() {
        SetList(keyword, amount);
    }

    function tsAudio(urlx) {
        let a = document.getElementById('traudio');
        //a.pause();
        a.src = '/music/' + urlx + '.mp3';
        a.currentTime = 0;
        a.play();
    }

    function lding() {
        let a = document.getElementById("loading_x");
        if (ldcount < 5) {
            a.innerText += ".";
        } else {
            a.innerText = "正在搜索";
        }
        ldcount++
    }

    function urlcut(url) {
        return url.substr(12);
    }

    function replaceUri(inputstr) {
        console.log(inputstr)
        return inputstr
    }
</script>

</html>