{% extends "base.html" %}
{% load static from staticfiles %}

{% block css %}
    <style>
        img {
            width: 100%;
            height: 100%;
        }

        .panel-tbody {
            float: left;
            margin: 1% 1%;
        }

        a:hover {
            color: red;
        }

        .img_qr {
            width: 15%;
        }

        .btn-primary {
            margin-left: 15%;
        }

        .key {
            color: #92278f;
            font-weight: bold;
        }

        .number {
            color: #25aae2;
            font-weight: bold;
        }

        .string {
            color: #3ab54a;
            font-weight: bold;
        }

        .boolean {
            color: #f98280;
            font-weight: bold;
        }
    </style>
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-md-12">
            <div class="panel">
                <div class="panel-body">
                    <div class="panel-tbody-index">
                        <h5>一、快捷入口</h5>
                        <div class="panel-tbody">
                            <p><i class="fa fa-product-hunt"></i>&nbsp;项目</p>
                            <div style="text-align: center"><a href="/base/project/">{{ project_num }}</a></div>
                        </div>
                        <div class="panel-tbody">
                            <p><i class="fa fa-envira"></i>&nbsp;环境</p>
                            <div style="text-align: center"><a href="/base/env/">{{ env_num }}</a></div>
                        </div>
                        <div class="panel-tbody">
                            <p><i class="fa fa-pinterest-square"></i>&nbsp;接口</p>
                            <div style="text-align: center"><a href="/base/interface/">{{ interface_num }}</a></div>
                        </div>
                        <div class="panel-tbody">
                            <p><i class="fa fa-suitcase"></i>&nbsp;用例</p>
                            <div style="text-align: center"><a href="/base/case/">{{ case_num }}</a></div>
                        </div>
                        <div class="panel-tbody">
                            <p><i class="fa fa-paper-plane"></i>&nbsp;计划</p>
                            <div style="text-align: center"><a href="/base/plan/">{{ plan_num }}</a></div>
                        </div>
                        <div class="panel-tbody">
                            <p><i class="fa fa-user-secret"></i>&nbsp;签名</p>
                            <div style="text-align: center"><a href="/base/sign/">{{ sign_num }}</a></div>
                        </div>
                        <div class="panel-tbody">
                            <p><i class="fa fa-bar-chart"></i>&nbsp;报告</p>
                            <div style="text-align: center"><a href="/base/report_page/">{{ report_num }}</a></div>
                        </div>
                        <div class="panel-tbody">
                            <p><i class="fa fa-tasks"></i>&nbsp;任务</p>
                            <div style="text-align: center"><a href="/base/timing_task/">{{ task_num }}</a></div>
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <h5>二、生成二维码</h5>
                    <br>
                    <div class="input-group input-group-lg" style="width: 35%;float: left;">
                        <span class="input-group-addon"><i class="fa fa-link"></i>&nbsp;url：</span>
                        <input type="text" id="qcode" class="form-control" placeholder="">

                    </div>
                    <button id="submit" class="btn btn-primary" lay-filter="demo1" style="height: 45px;margin-left: 1%">
                        <i class="fa fa-gavel"></i></button>
                    <div class="img_qr">
                    </div>
                </div>
{#                <div class="panel-body">#}
{#                    <h5>三、格式化JSON</h5>#}
                    {#                    <iframe src="https://www.json.cn/" height="750" width="1550" frameborder="0"#}
                    {#                            scrolling="0"></iframe>#}
{#                    <div class="col-lg-6"><textarea class="form-control" style="float: left;display: table" id="jsonin"#}
{#                                                    rows="20"></textarea></div>#}
{#                    <div class="col-lg-6">#}
{#                        <pre class="form-control" style="float: right;height: 414px;padding: 6px" rows="20"#}
{#                             id="jsonout"></pre>#}
{#                    </div>#}
{#                </div>#}
                <div class="panel-body">
                    <h5>未完待续，持续开发中...</h5>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascript %}
    <script type="text/javascript">
        $('#submit').click(function () {
            var url = $("#qcode").val();
            console.log(url);
            $.ajax({
                url: '/index/?' + Math.random(),
                cache: false,
                type: 'post',
                data: {'url': url},
                success: function (data) {
                    if (data == '0') {
                        alert('用户未登录！');
                        location.reload()
                    } else {
                        console.log(data);
                        html = '<img src="/media/' + data + '">' + '<a href="/img_download?log_file=' + data + '" class="btn btn-primary"><i class="fa fa-cloud-download"></i>&nbsp;下载二维码</a>';
                        $('.img_qr').empty();
                        $('.img_qr').append(html);
                    }
                }
            })
        });
        // 回车提交搜索
        $(document).keyup(function (event) {
            if (event.keyCode == 13) {
                $("#submit").trigger("click");
            }
        });
        $('#jsonin').keyup(function () {
            init();
            var content = $.trim($(this).val());
            var result = '';
            if (content != '') {
                //如果是xml,那么转换为json
                if (content.substr(0, 1) === '<' && content.substr(-1, 1) === '>') {
                    try {
                        var json_obj = $.xml2json(content);
                        content = JSON.stringify(json_obj);
                    } catch (e) {
                        result = '解析错误：<span style="color: #f1592a;font-weight:bold;">' + e.message + '</span>';
                        current_json_str = result;
                        $('#json-target').html(result);
                        return false;
                    }

                }
                try {
                    var hasZY = $('#cancelZY').prop('checked');
                    if (hasZY) {
                        content = content.replace(/\\/g, '\\\\');
                        content = content.replace(/\\"/g, '\\\\"');
                    }
                    current_json = jsonlint.parse(content);
                    current_json_str = JSON.stringify(current_json);
                    //current_json = JSON.parse(content);
                    result = new JSONFormat(content, 4).toString();
                } catch (e) {
                    result = '<span style="color: #f1592a;font-weight:bold;">' + e + '</span>';
                    current_json_str = result;
                }

                $('#jsonout').html(result);
            } else {
                $('#jsonout').html('');
            }

        });

        function syntaxHighlight(json) {
            if (typeof json != 'string') {
                json = JSON.stringify(json, undefined, 2);
            }

            json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/(\,)/g, '$1\r\n').replace(/(\{)/g, '$1\r\n').replace(/(\})/g, '\n$1\n');
            return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            });
        }
    </script>
{% endblock %}