{% extends "../main.html" %}
{% block title %}短网址{% end %}
{% block content %}
<div class="page-container">
    <div class="padding sr" id="list" data-plugin="musicapp">
        <div class="heading py-2 d-flex ">
            <div>
                <div class="text-muted text-sm sr-item"></div>
                <h5 class="text-highlight sr-item">短网址在线生成</h5>
            </div>
            <span class="flex"></span>
        </div>
        <div class="pb-1 d-flex sr-item" id="filter-tag">
            <div class="text-muted no-shrink my-2"></div>
            <div class="mx-3">


            </div>
        </div>
        <div class="pb-4 d-flex sr-item" id="filter-category">
            <div class="text-muted no-shrink my-2"></div>
            <div class="4">
                <label class="checkbox-inline">
                    选择短网址api：
                </label>

                <label class="checkbox-inline m-2">
                    <input type="checkbox" id="all_tinyurl_api_select" value="1" onclick="all_tinyurl_api_select()"> 全选
                </label>

                <label class="checkbox-inline m-2">
                    <input type="checkbox" class="tinyurl_api" value="http://suo.la/"> 缩啦短网址
                </label>
                <label class="checkbox-inline m-2">
                    <input type="checkbox" class="tinyurl_api" value="http://suo.im/"> 缩我短网址
                </label>
                <label class="checkbox-inline m-2">
                    <input type="checkbox" class="tinyurl_api" value="https://api.uomg.com/api/long2dwz"> Uomg
                </label>
{#                <label class="checkbox-inline m-2">#}
{#                    <input type="checkbox" class="tinyurl_api" value="http://dwz.wailian.work/"> 新浪短网址#}
{#                </label>#}
                <label class="checkbox-inline m-2">
                    <input type="checkbox" class="tinyurl_api" value="https://dwz.cn/"> 百度短网址
                </label>
                <label class="checkbox-inline m-2">
                    <input type="checkbox" class="tinyurl_api" value="http://qqdwz.com/dwz.php"> 腾讯短网址
                </label>
            </div>
        </div>
        <div class="col-sm-10">
            <form data-plugin="parsley" data-option="{}">
                <div class="card">
                    <div class="card-header">
                        <div class="text-center pt-2">
                            <strong>网站链接</strong>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <textarea id="textarea_site_link" class="form-control" rows="16" data-minwords="6" required
                                      placeholder="获取网站链接，手动输入网址，换行分隔。"></textarea>
                        </div>

                        <div class="text-right pt-2">
                            <button type="button" id="select_site" class="btn btn-primary">选择网站</button>
                            <button type="button" id="create_tinyurl" class="btn btn-primary">生成短网址</button>
                        </div>

                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- .select_site modal -->
<div id="select_site_modal" class="modal bg-dark fade" data-backdrop="true">
    <div class="modal-dialog">
        <div class="modal-content ">
            <div class="modal-header ">
                <div class="modal-title text-md">选择需要导出网站链接的网站域名</div>
            </div>
            <div class="modal-body">
                <div class="modal-body p-4">
                    <div class="list list-row">
                        <div class="list-item " data-id="1">
                            <div>
                                <label class="ui-check m-0 ">
                                    <input type="checkbox" id="all_select" value="1" onclick="all_select()">
                                    <i></i>
                                </label>
                            </div>
                            <div class="flex">
                                <a href="#" class="item-author text-color ">全选</a>
                            </div>
                        </div>

                        {% for domain in domains %}
                        <div class="list-item ">
                            <div>
                                <label class="ui-check m-0 ">
                                    <input type="checkbox" class="domain_select" value="{{ domain }}">
                                    <i></i>
                                </label>
                            </div>
                            <div class="flex">
                                <a href="#" class="item-author text-color ">{{ domain }}</a>
                            </div>
                        </div>

                        {% end %}

                    </div>
                </div>
                <div class="modal-footer">
                    {% module xsrf_form_html() %}
                    <button class="btn btn-primary" id="write_link">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- / .select_site modal -->


<!-- .wait modal -->
<div id="wait-modal" class="modal bg-dark fade" data-backdrop="true">
    <div class="modal-dialog">
        <div class="modal-content ">
            <div class="modal-header ">
                <div class="modal-title text-md" id="wait-modal-div"></div>
            </div>
            <div class="modal-body">
                <div class="p-4 text-center">
                    <div class="loading m-4 m-auto"></div>
                    <p id="site_link"></p>
                    <p id="msg"></p>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" id="exit-btn">退出</button>
            </div>
        </div>
    </div>
</div>
<!-- / .wait modal -->


{% end %}
{% block js %}
<script>
    $("#select_site").click(function () {
        $('#select_site_modal').modal();
    });

    $("#exit-btn").click(function () {
        $("#wait-modal").modal('hide');
    });


    function all_select() {
        var is_all_select = document.getElementById("all_select").checked;
        if (is_all_select) {
            var domain_select = document.getElementsByClassName("domain_select");
            for (var i = 0; i < domain_select.length; i++) {
                domain_select[i].checked = "checked";
            }
        } else {
            var domain_select = document.getElementsByClassName("domain_select");
            for (var i = 0; i < domain_select.length; i++) {
                domain_select[i].checked = "";
            }
        }
    }


    $(document).ready(function () {
        $("#write_link").click(function () {
            var domains = "";
            $(".domain_select").each(function () {
                var is_domain_select = $(this).is(":checked");
                if (is_domain_select) {
                    domains = domains + $(this).val() + ",";
                }

            });
            $("#select_site_modal").modal('hide');
            var ws = new WebSocket("ws://{{ url }}/tselectlink");
            ws.onopen = function () {
                console.log("连接成功！");
                ws.send(domains);
            };
            $("#wait-modal").modal();
            $("#wait-modal-div").text('输入框写入链接中');
            ws.onmessage = function (e) {
                {#console.log(e);#}
                var data = e.data;
                data = JSON.parse(data);
                $("#textarea_site_link").append(data['url_links']);
                $("#msg").empty();
                $("#msg").append(data['msg']);
                if (data['msg'] == 1) {
                    $("#msg").empty();
                    $("#msg").append("所有域名下的链接已经全部写入输入框！");
                    setTimeout(function () {
                        $("#wait-modal").modal("hide");
                    }, 3000);


                }
            };
            ws.onclose = function () {
                console.log("断开连接！");
            };
        });


        $("#create_tinyurl").click(function () {
            $("#wait-modal").modal();
            $("#wait-modal-div").text('生成短网址，写入txt文件中');
            var site_link = $("#textarea_site_link").val();
            var tinyurl_apis = "";
            $(".tinyurl_api").each(function () {
                var is_tinyurl_api = $(this).is(":checked");
                if (is_tinyurl_api) {
                    tinyurl_apis = tinyurl_apis + $(this).val() + ",";
                }

            });

            var dataArray = {
                site_link: site_link,
                tinyurl_apis: tinyurl_apis,
            };
            dataArray=JSON.stringify(dataArray);


            var ws = new WebSocket("ws://{{ url }}/createtinyurl");
            ws.onopen = function () {
                console.log("连接成功！");
                ws.send(dataArray);
            };

            ws.onmessage = function (e) {
                {#console.log(e);#}
                var data = e.data;
                data = JSON.parse(data);
                $("#site_link").empty();
                $("#site_link").append(data['tinyurl_api']);
                $("#msg").empty();
                $("#msg").append(data['msg']);
                if (data['msg'] == 1) {
                    $("#site_link").empty();
                    $("#site_link").append(data['target_path']);
                    $("#msg").empty();
                    $("#msg").append("短网址已经全部生成完成！");



                }
            };
            ws.onclose = function () {
                console.log("断开连接！");
            };


        });


    });


    function all_tinyurl_api_select() {
        var is_all_select = document.getElementById("all_tinyurl_api_select").checked;
        if (is_all_select) {
            var tinyurl_api = document.getElementsByClassName("tinyurl_api");
            for (var i = 0; i < tinyurl_api.length; i++) {
                tinyurl_api[i].checked = "checked";
            }
        } else {
            var tinyurl_api = document.getElementsByClassName("tinyurl_api");
            for (var i = 0; i < tinyurl_api.length; i++) {
                tinyurl_api[i].checked = "";
            }
        }
    }
</script>
{% end %}