{% extends 'base.html' %}
{% load converter %}
{% load static %}
{% block title %}搜索{% endblock %}
{% block body %}
    <div class="container oh">
        <search class="filter cbhd">
            <form id="search" class="f relative" onsubmit="search()">
                {% csrf_token %}
                <div class="f fc40 w100">
                    <div class="ff switch_box gap_r no_gap40">
                        <span class="label">搜索：</span>
                        <div class="f switch">
                            <input type="radio" name="search_type" class="a" id="type_q" value="t" checked>
                            <label for="type_q">文字</label>
                            <input type="radio" name="search_type" class="b" id="type_p" value="p">
                            <label for="type_p">过程</label>
                        </div>
                        <div class="g1 a">{{ form.q }}</div>
                        <div class="ff process b">
                            <div class="ico_box">
                                <label for="{{ form.consume.id_for_label }}" class="hd">输入</label>
                                <img src="{% static 'no_item.png' %}" alt="ico" class="ico">
                                <input type="text" id="{{ form.consume.id_for_label }}"
                                       name="{{ form.consume.html_name }}" onfocus="show_drop(this)"
                                       onblur="hide_drop()" oninput="handleInputChange(this)">
                            </div>
                            <svg class="arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
                                <!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. -->
                                <path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"></path>
                            </svg>
                            <div class="ico_box">
                                <label for="{{ form.product.id_for_label }}" class="hd">输出</label>
                                <img src="{% static 'no_item.png' %}" alt="ico" class="ico">
                                <input type="text" id="{{ form.product.id_for_label }}"
                                       name="{{ form.product.html_name }}" onfocus="show_drop(this)"
                                       onblur="hide_drop()" oninput="handleInputChange(this)">
                            </div>
                        </div>
                    </div>
                    <input type="submit" value="搜索">
                </div>
                <div class="dropdown_search">
                    <div id="dropdown_results" class="f gap_c oa">

                    </div>
                </div>
                <div class="f w100">
                    <div class="f fc as gap_r">
                        <span class="label">{{ form.loader.label }}：</span>
                        <div class="f">
                            <div class="toggle">
                                {% for choice in form.loader_type %}
                                    {{ choice.tag }}
                                    <label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
                                {% endfor %}
                            </div>
                            {% for choice in form.loader %}
                                {{ choice.tag }}<label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="f fc as">
                        <span class="label">{{ form.mc_ver.label }}：</span>
                        <div class="f">
                            <div class="toggle">
                                {% for choice in form.mc_type %}
                                    {{ choice.tag }}
                                    <label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
                                {% endfor %}
                            </div>
                            {% for choice in form.mc_ver %}
                                {{ choice.tag }}<label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
                            {% endfor %}
                        </div>

                    </div>
                </div>
                <div class="f fc as w100">
                    <span class="label">{{ form.create_ver.label }}：</span>
                    <div class="f fold">
                        <div class="toggle">
                            {% for choice in form.create_type %}
                                {{ choice.tag }}
                                <label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
                            {% endfor %}
                        </div>
                        {% for choice in form.create_ver %}
                            <div class="choice" id="{{ choice.choice_label }}">
                                {{ choice.tag }}
                                <label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
                            </div>
                        {% endfor %}
                    </div>
                </div>
                <div class="f fc as">
                    <span class="label">{{ form.working_behavior.label }}：</span>
                    <div class="f">
                        {% for choice in form.working_behavior %}
                            {{ choice.tag }}<label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
                        {% endfor %}
                    </div>
                </div>
                <div class="f fc as">
                    <span class="label">{{ form.space_behavior.label }}：</span>
                    <div class="f">
                        {% for choice in form.space_behavior %}
                            {{ choice.tag }}<label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
                        {% endfor %}
                    </div>
                </div>
                <div class="f fc as">
                    <span class="label">{{ form.design.label }}：</span>
                    <div class="f">
                        {% for choice in form.design %}
                            {{ choice.tag }}<label for="{{ choice.id_for_label }}">{{ choice.choice_label }}</label>
                        {% endfor %}
                    </div>
                </div>
                <div class="space w100">
                    <div class="f fc as gap_r"><span class="label">长：</span>{{ form.z_size }}</div>
                    <div class="f fc as gap_r"><span class="label">宽：</span> {{ form.x_size }}</div>
                    <div class="f fc as gap_r"><span class="label">高：</span> {{ form.y_size }}</div>
                </div>
                <div class=" f w100 fc as">
                    <span class="label">分类：</span>
                    <div class="function">
                        <div id="function_tree"></div>
                        <label for="function_select" class="hd">功能分类</label>
                        <select name="{{ form.function.html_name }}" onchange="select_function(this)"
                                id="function_select">
                            <option value="">----</option>
                            {% for f in function %}
                                {% if f.parent is none %}
                                    <option>{{ f.name }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </form>
            <form class="hd" id="dropdown_form">
                {% csrf_token %}
                <input type="hidden" value="item" name="type">
            </form>
            <datalist id="funcroot">
                <option value="">----</option>
                {% for f in function %}
                    {% if f.parent is none %}
                        <option value="{{ f.pk }}">{{ f.name }}</option>
                    {% endif %}
                {% endfor %}
            </datalist>
            {% for f in function %}
                {% if f.parent_function.count %}
                    <datalist id="func{{ f.pk }}">
                        <option value="">----</option>
                        {% for ff in f.parent_function.all %}
                            <option value="{{ ff.pk }}">{{ ff.name }}</option>
                        {% endfor %}
                    </datalist>
                {% endif %}
            {% endfor %}
        </search>

        <hr>
        <div class="list gap_t">
            <div class="f jsb gap_b">
                <div id="search_msg"></div>
                <form class="sort" id="sort_form">
                    <div class="f grid_col">
                        <input type="radio" name="grid_col" id="grid_col_1" value="1" checked>
                        <label for="grid_col_1">
                            <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                <path d="m72 352h368c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40h-368c-22.1 0-40-17.9-40-40v-48c0-22.1 17.9-40 40-40zm0-32c-22.1 0-40-17.9-40-40v-48c0-22.1 17.9-40 40-40h368c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40zm0-160c-22.1 0-40-17.9-40-40v-48c0-22.1 17.9-40 40-40h368c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40z"></path>
                            </svg>
                        </label>
                        <input type="radio" name="grid_col" id="grid_col_2" value="2">
                        <label for="grid_col_2">
                            <svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
                                <path d="m71.2 352 129-0.372c22.1-0.0639 40 17.9 40 40v48c0 22.1-17.9 39.9-40 40l-129 0.372c-22.1 0.0639-40-17.9-40-40v-48c0-22.1 17.9-39.9 40-40zm241-0.372h127c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40h-127c-22.1 0-40-17.9-40-40v-48c0-22.1 17.9-40 40-40zm-241-31.6c-22.1 0.0639-40-17.9-40-40v-48c0-22.1 17.9-39.9 40-40l129-0.372c22.1-0.0639 40 17.9 40 40v48c0 22.1-17.9 39.9-40 40zm241-128h127c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40h-127c-22.1 0-40-17.9-40-40v-48c0-22.1 17.9-40 40-40zm-241-31.6c-22.1 0.0639-40-17.9-40-40v-48c0-22.1 17.9-39.9 40-40l129-0.372c22.1-0.0639 40 17.9 40 40v48c0 22.1-17.9 39.9-40 40zm241-128h127c22.1 0 40 17.9 40 40v48c0 22.1-17.9 40-40 40h-127c-22.1 0-40-17.9-40-40v-48c0-22.1 17.9-40 40-40z"></path>
                            </svg>
                        </label>
                    </div>
                    {{ form.sort }}
                    <div class="f toggle">
                        {% for choice in form.order %}
                            {{ choice.tag }}
                            <label for="{{ choice.id_for_label }}">
                                {% cycle  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"/></svg>' '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2023 Fonticons, Inc. --><path d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"/></svg>' %}
                            </label>
                        {% endfor %}
                    </div>
                </form>
            </div>
            <div id="results" class="has_loading">
            </div>
            <div class="loading">
                <img src="{% loadings %}" alt="loading">
            </div>
        </div>
    </div>
    <script>
        const function_tree = document.querySelector("#function_tree")
        let cur_function = ""

        function removeLetters(version) {
            if (version.startsWith("0"))
                return version.replace(/[^\d.]/g, '');
            else
                return version.slice(0, version.length - 1)
        }

        function selectAll(span) {
            for (let label of span.parentElement.querySelectorAll("label")) {
                label.click()
            }
        }

        function select_function(select) {
            if (select.value !== "") {
                let element = document.querySelector("#func" + select.value);

                if (!element) return
                cur_function = select.value
                let node = document.createElement("span");
                node.addEventListener("click", () => withdraw_function(node, select))
                node.innerHTML = select.options[select.selectedIndex].text
                node.dataset.func = select.value
                function_tree.appendChild(node)
                select.innerHTML = element.innerHTML
            }
        }

        function withdraw_function(span, select) {
            let r
            if (!span.previousSibling) {
                r = 'root'
                cur_function = ""
            } else {
                r = span.previousSibling.dataset.func
                cur_function = r
            }
            let element = document.querySelector("#func" + r);
            select.innerHTML = element.innerHTML
            while (span.nextSibling)
                span.nextSibling.remove()
            span.remove()
        }

        let form

        function search(url = true) {
            if (event)
                event.preventDefault()
            form = new FormData(document.querySelector("#search"))
            let sort = new FormData(document.querySelector("#sort_form"))
            if (form.get('function') === "")
                form.set('function', cur_function)

            sort.forEach((value, key) => {
                form.set(key, value)
            })
            if (url)
                toUrl()
            const urlParams = new URLSearchParams(window.location.search);
            const page = urlParams.get("page");
            if (page) {
                form.set("page", page);
            }
            search_fetch(form)
        }

        function search_fetch(form) {
            document.querySelector("#results").innerHTML = ''
            fetch("{% url 'search' %}", {body: form, method: 'post'})
                .then(res => {
                    if (!res.ok) throw new Error(`HTTP 错误! 状态: ${res.status}`);
                    return res.text()
                }).then(res => {
                document.querySelector("#results").innerHTML = res;
                document.querySelector("#search_msg").innerHTML = document.querySelector("#receive_msg").innerHTML
                scrollDisabledButtonToCenter()
            }).catch(err => {
                console.log(err)
                show_error(err)
            })
        }

        function toUrl() {
            let p = {'function_tree': []}
            for (let e of document.querySelectorAll("input[type=checkbox]:checked,input[type=radio]:checked")) {
                if (!p[e.name]) p[e.name] = []
                p[e.name].push(e.value)
            }
            for (let e of document.querySelectorAll("input[type=text],input[type=number],select")) {
                if (e.value === "") continue
                p[e.name] = e.value
            }
            for (let child of function_tree.children) {
                p['function_tree'].push(child.dataset.func)
            }
            p['function_tree'].push(document.querySelector("#function_select").value)
            window.history.pushState(null, '', '?' + new URLSearchParams(p).toString());
        }

        function fromUrl() {
            let urlParams = new URLSearchParams(window.location.search);
            if (!urlParams.has('sort')) urlParams.set("sort", "time")
            for (let e of document.querySelectorAll("input[type=checkbox],input[type=radio]")) {
                if (urlParams.has(e.name)) {
                    let strings = urlParams.get(e.name).split(',');
                    if (strings.includes(e.value) && !e.checked) e.click()
                    if (!strings.includes(e.value) && e.checked) e.click()
                } else {
                    if (e.checked) e.click()
                }
            }
            for (let e of document.querySelectorAll("input[type=text],input[type=number],select")) {
                if (urlParams.has(e.name)) e.value = urlParams.get(e.name)
                else e.value = ""
            }
            cur_function = ""
            function_tree.innerHTML = ""
            let selector = document.querySelector("#function_select");
            let element = document.querySelector("#funcroot");
            selector.innerHTML = element.innerHTML
            selector.value = "";
            if (urlParams.has("function_tree")) {
                let ft = urlParams.get("function_tree").split(",");
                for (let f of ft) {
                    selector.value = f;
                    select_function(selector)
                }
            }
            search(false)
        }

        const dropdownSearch = document.querySelector(".dropdown_search");
        const dropdownResults = document.getElementById("dropdown_results");
        const dropdownForm = document.getElementById("dropdown_form");
        let cur_input

        function show_drop(anchor) {
            if (cur_input !== anchor) {
                cur_input = anchor
                dropdownResults.innerHTML = ""
                dropdownSearch.style.top = `${anchor.offsetTop + anchor.offsetHeight + 20}px`
            }
            dropdownSearch.classList.add("show");
        }

        function hide_drop() {
            dropdownSearch.classList.remove("show");
        }

        let timeout;

        function debounce(func, delay) {
            clearTimeout(timeout);
            timeout = setTimeout(() => func(), delay);
        }

        function handleInputChange(inputElement) {
            debounce(() => {
                const inputValue = inputElement.value;
                dropdownResults.innerHTML = "";
                if (inputValue.trim() === "") {
                    const inputImg = cur_input.previousElementSibling;
                    inputImg.src = "{% static 'no_item.png' %}";
                    inputImg.alt = "Default Image";
                    return;
                }
                dropdownSearch.classList.add("show");
                const formData = new FormData(dropdownForm);
                formData.append("name", inputValue);
                fetch("{% url 'searchtag' %}", {method: "POST", body: formData})
                    .then(res => {
                        if (!res.ok) throw new Error(`HTTP 错误! 状态: ${res.status}`);
                        return res.text()
                    })
                    .then(text => dropdownResults.innerHTML = text)
                    .catch(err => {
                        console.log(err)
                        show_error(err)
                    })
            }, 300);
        }

        function handle_tag_click(tag) {
            if (!cur_input) return;
            const imgElement = tag.querySelector("img");
            const nameElement = tag.querySelector(".item_name");
            const inputImg = cur_input.previousElementSibling;
            if (imgElement) {
                inputImg.src = imgElement.src;
                inputImg.alt = imgElement.alt;
            } else {
                inputImg.src = "{% static 'no_item.png' %}";
                inputImg.alt = "Default Image";
            }
            if (nameElement) {
                cur_input.value = nameElement.textContent;
            }
            dropdownSearch.classList.remove("show");
        }

        function result_page(page) {
            const urlParams = new URLSearchParams(window.location.search);
            urlParams.set("page", page);
            window.history.pushState({}, "", `${window.location.pathname}?${urlParams.toString()}`);

            if (form) {
                form.set("page", page)
                search_fetch(form)
            } else {
                search()
            }
        }

        window.addEventListener('popstate', fromUrl)
        fromUrl()
        window.addEventListener('load', () => {
            let tmp = {}
            let folds = document.querySelectorAll(".fold")
            for (let fold of folds) {
                let choices = fold.querySelectorAll(".choice");
                for (let choice of choices) {
                    let ver = removeLetters(choice.id);
                    if (!tmp[ver]) tmp[ver] = []
                    tmp[ver].push(choice)
                }
                for (let v in tmp) {
                    if (tmp[v].length === 1) {
                        fold.appendChild(tmp[v][0])
                        continue
                    }
                    let box = document.createElement("div")
                    let span = document.createElement('div');
                    span.className = "choice"
                    span.addEventListener("click", () => selectAll(span))
                    span.innerHTML = "<span>" + v + "*</span>"
                    box.appendChild(span)
                    for (let c of tmp[v])
                        box.appendChild(c)
                    fold.appendChild(box)
                    box.style.maxWidth = (span.offsetWidth + 1) + "px"
                }
            }
            document.querySelectorAll(".sort select,.list .toggle input").forEach(i => {
                i.addEventListener('change', search)
            })
        })
    </script>
{% endblock %}