{% extends "../../base.html" %}

{% block css %}
    <style>
        /* 按钮悬浮*/
        .float-button {
            position: fixed;
            bottom: 100px;
            right: 100px;
            z-index: 99;
            border: none;
            outline: none;
            background-color: #1dc5a3;
            cursor: pointer;
            padding: 15px;
            border-radius: 10px;
        }

        .btn-primary:hover {
            color: red;
        }

        h3.info_title {
            font-size: 28px;
            color: brown;
            font-weight: lighter;
        }

        /*返回顶部样式*/
        #myBtn {
            display: none;
            position: fixed;
            bottom: 20px;
            right: 30px;
            z-index: 99;
            border: none;
            outline: none;
            background-color: #999c9e;
            color: white;
            cursor: pointer;
            padding: 15px;
            border-radius: 10px;
        }

        #myBtn:hover {
            background-color: #555;
        }

        .move {
            display: inline;
            float: left;
            margin: 0 10%;
            float: right;
        }

        .move:hover {
            color: red;
        }
    </style>
{% endblock %}

{% block crumbs %}
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li>
                    <a href="/yqjr/index">主页</a>
                </li>
                <li class="active">
                    <a class="this">基础信息</a>
                </li>
                <li class="active">
                    <a class="this-page" href="/base/case/">用例管理</a>
                </li>
                <li class="active">
                    <a class="">用例添加</a>
                </li>
            </ol>

        </div>
    </div>
{% endblock %}

{% block body %}
    <div class="row">
        <div class="col-md-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h3 class="panel-title">添加用例</h3>
                </div>
                <div class="ibox-content">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用例名称</label>
                            <div class="col-sm-8">
                                <input type="text" id="case_name" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属项目</label>
                            <div class="col-sm-8">
                                <select id="prj_id" class="form-control" onchange=get_if()>
                                    <option value="">请选择项目</option>
                                    {% for prj in prj_list %}
                                        <option value={{ prj.prj_id }}>{{ prj.prj_name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用例描述</label>
                            <div class="col-sm-8">
                                <textarea id="description" placeholder="请输入内容" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">步骤查询</label>
                            <div class="col-sm-4">
                                <input type="search" id="search" name="search" class="form-control"
                                       placeholder="搜索接口名称...">
                            </div>

                            <div class="col-sm-4 ">
                                <button id="search-btn" class="btn btn-primary" onclick="search()"><i
                                        class="fa fa-search">&nbsp;查询</i>
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">添加步骤</label>
                            <div class="col-sm-4">
                                <select class="form-control" id="if_id" name="if_id">
                                    <option value="">请选择接口</option>
                                </select>
                            </div>
                            <div class="col-sm-4 ">
                                <button id="add_interface" class="btn btn-primary" type="button"><i
                                        class="fa fa-arrow-circle-down"></i>&nbsp;添加
                                </button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">登录账号</label>
                            <div class="col-sm-4">
                                <select class="form-control" id="login_id" name="login_id">
                                    <option value="0" >===不使用===</option>
                                    {% for luser in usr_list %}
                                        <option value={{ luser.id }}>{{ luser.telephone }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-sm-4 control-label"  style="color: red;font-size: 3px;text-align: left"><label>**如不需要请不要选择登录账号</label></div>
                        </div>
                        <div id="case-list" id="accordion">
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-6">
                                <button type="submit" id="submit" class="btn btn-primary float-button"><i
                                        class="fa fa-save"></i>&nbsp;保存
                                </button>
                            </div>
                        </div>

                    </div>

                </div>

            </div>
        </div>
        <button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>
    </div>
{% endblock %}

{% block javascript %}
    <script>
        var add_total = 0;

        function move(t, oper) {
            var data_tr = $(t).parents('.case.row'); //获取到触发的tr
            console.log(data_tr)
            if (oper == "MoveUp") {    //向上移动
                if ($(data_tr).prev().html() == null) { //获取tr的前一个相同等级的元素是否为空
                    alert("已经是最顶部了!");
                    return;
                }
                {
                    $(data_tr).insertBefore($(data_tr).prev()); //将本身插入到目标tr的前面
                }
            } else {
                if ($(data_tr).next().html() == null) {
                    alert("已经是最低部了!");
                    return;
                }
                {
                    $(data_tr).insertAfter($(data_tr).next()); //将本身插入到目标tr的后面
                }
            }
        }

        // 当网页向下滑动 20px 出现"返回顶部" 按钮
        window.onscroll = function () {
            scrollFunction()
        };

        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                document.getElementById("myBtn").style.display = "block";
            } else {
                document.getElementById("myBtn").style.display = "none";
            }
        }

        // 点击按钮，返回顶部
        function topFunction() {
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }

        //删除本接口
        function del_interface(obj) {
            var div = $(obj).parents('.case.row');
            $(div).remove();
        }

        //删除行
        function del_step(obj) {
            var tr = obj.parentNode.parentNode;
            var tbody = tr.parentNode;
            tbody.removeChild(tr);
        }


        //添加头参数
        function add_header_row(obj) {
            var panel = $(obj).parent().parent();
            var tbody = $(panel).find("table[name='header']").children('tbody');
            var newRow = "<tr> <td>#</td><td><input class='form-control' name='var_name' ></td><td><input class='form-control' name='var_value' ></td> <td> <button class='btn btn-xs btn-outline btn-danger' type='button' onclick='del_step(this)'><i class='fa fa-close'></i>&nbsp;删除行</button> </td> </tr>";
            $(tbody).append(newRow);
        }

        //添加params参数
        function add_params_row(obj) {
            var panel = $(obj).parent().parent();
            var tbody = $(panel).find("table[name='params']").children('tbody');
            var newRow = "<tr> <td>#</td><td><input class='form-control' name='var_name' ></td><td><input class='form-control' name='var_value' ></td> <td> <button class='btn btn-xs btn-outline btn-danger' type='button' onclick='del_step(this)'><i class='fa fa-close'></i>&nbsp;删除行</button> </td> </tr>";
            $(tbody).append(newRow);
        }

        //添加body参数
        function add_body_row(obj) {
            var panel = $(obj).parent().parent();
            var tbody = $(panel).find("table[name='body']").children('tbody');
            var newRow = "<tr> <td>#</td><td><input class='form-control' name='var_name' ></td><td><input class='form-control' name='var_value' ></td><td> <button class='btn btn-xs btn-outline btn-danger' type='button' onclick='del_step(this)'><i class='fa fa-close'></i>&nbsp;删除行</button> </td> </tr>";
            $(tbody).append(newRow);
        }

        //添加提取参数
        function add_extract_row(obj) {
            var panel = $(obj).parent().parent();
            var tbody = $(panel).find("table[name='extract']").children('tbody');
            var newRow = "<tr> <td>#</td><td><input class='form-control' name='var_name' ></td><td><input class='form-control' name='var_value' ></td><td> <button class='btn btn-xs btn-outline btn-danger' type='button' onclick='del_step(this)'><i class='fa fa-close'></i>&nbsp;删除行</button> </td> </tr>";
            $(tbody).append(newRow);
        }


        //添加检查点参数
        function add_validators_row(obj) {
            var panel = $(obj).parent().parent();
            var tbody = $(panel).find("table[name='validators']").children('tbody');
            var newRow = "<tr> <td>#</td><td><input class='form-control' name='var_name' ></td><td><input class='form-control' name='var_value' ></td><td> <button class='btn btn-xs btn-outline btn-danger' type='button' onclick='del_step(this)'><i class='fa fa-close'></i>&nbsp;删除行</button> </td> </tr>";
            $(tbody).append(newRow);
        }

        // 获取接口
        function get_if() {
            $("#if_id").empty();
            var prj_id = $("#prj_id").val();
            if (prj_id == "") {
                alert("请先选择项目");
            } else {
                $.ajax({
                    type: "get",
                    url: "/base/findata/",
                    data: {
                        "prj_id": prj_id,
                        "type": "get_all_if_by_prj_id"
                    },
                    success: function (data) {
                        dataJson = eval(data);
                        $.each(dataJson, function (i, item) {
                            $("#if_id").append("<option value=" + item.if_id + ">" + item.if_name + "</option>");
                        })
                    },
                    error: function () {
                        alert("获取接口失败!");
                    }
                });
            }
        }

        // 搜索接口
        function search() {
            var search_name = $("#search").val();
            var prj_id = $("#prj_id").val();
            console.log(prj_id, "《---------------》", search_name);
            if (prj_id == "") {
                alert("请先选择项目！");
            } else {
                $.ajax({
                    type: "get",
                    url: "/base/findata/",
                    data: {
                        "search_name": search_name,
                        "prj_id": prj_id,
                        "type": "get_if_by_search_name"
                    },
                    success: function (data) {
                        console.log("------data---->", data);
                        if (JSON.stringify(data) == "[]") {
                            alert("查询结果为空，请重新输入！")
                        } else {
                            dataJson = eval(data);
                            $("#if_id").empty();
                            $.each(dataJson, function (i, item) {
                                $("#if_id").append("<option value=" + item.if_id + ">" + item.if_name + "</option>");
                            })
                        }
                    }
                })
            }
        }


    </script>
    <script>
        $(document).ready(function () {
            //添加接口

            $("#add_interface").click(function () {
                add_total = add_total + 1;
                var if_id = $("#if_id").val();
                console.log('--->' + if_id);
                if (if_id == "") {
                    alert("请先选择接口!");
                } else {
                    $.ajax({
                        url: "/base/findata/",
                        type: "get",
                        data: {
                            "if_id": if_id,
                            "type": "get_if_by_if_id"
                        },
                        success: function (data) {
                            var listdata = eval(data);
                            $(listdata).each(function (i, item) {
                                var header_json = JSON.parse(item.request_headers);
                                var header_table = "<table name='header' class='table'><thead><tr><th>#</th> <th>参数名</th>" +
                                    "<th>值</th>" +
                                    "<th></th> </tr> </thead><tbody>";
                                $.each(header_json, function (k, v) {
                                    var tr = "<tr><td>#</td>" +
                                        "<td>" + "<input class='form-control' name='var_name' value=" + k + "></td>" +
                                        "<td>" + "<input class='form-control' name='var_value' value=" + v + "></td>" +
                                        "<td><button class='btn btn-xs btn-outline btn-danger' type='button' onclick='del_step(this);'>&nbsp;<i class='fa fa-close'></i>&nbsp;删除行 </button> </td></tr>";
                                    header_table = header_table + tr;
                                });
                                var header = header_table + "</tbody></table>";


                                var params_json = JSON.parse(item.request_params);
                                var params_table = "<table name='params' class='table'><thead><tr><th>#</th> <th>参数名</th>" +
                                    "<th>值</th>" +
                                    "<th></th> </tr> </thead><tbody>";
                                $.each(params_json, function (k, v) {
                                    var tr = "<tr><td>#</td>" +
                                        "<td>" + "<input class='form-control' name='var_name' value=" + k + "></td>" +
                                        "<td>" + "<input class='form-control' name='var_value' value=" + v + "></td>" +
                                        "<td><button class='btn btn-xs btn-outline btn-danger' type='button' onclick='del_step(this);'>&nbsp;<i class='fa fa-close'></i>&nbsp;删除行 </button> </td></tr>";
                                    params_table = params_table + tr
                                });
                                var params = params_table + "</tbody></table>";

                                var body_json = JSON.parse(item.request_body);
                                var body_table = "<table name='body' class='table'><thead><tr><th>#</th> <th>参数名</th>" +
                                    "<th>值</th>" +
                                    "<th></th> </tr> </thead><tbody>";
                                $.each(body_json, function (k, v) {
                                    var tr = "<tr><td>#</td>" +
                                        "<td>" + "<input class='form-control' name='var_name' value=" + k + "></td>" +
                                        "<td>" + "<input class='form-control' name='var_value' value=" + v + "></td>" +
                                        "<td><button class='btn btn-xs btn-outline btn-danger' type='button' onclick='del_step(this);'>&nbsp;<i class='fa fa-close'></i>&nbsp;删除行 </button> </td></tr>";
                                    body_table = body_table + tr
                                });
                                var body = body_table + "</tbody></table>";


                                var newtable = "<div class='row case'><div class='panel' >" +

                                    "<div class='col-sm-offset-1 col-sm-9'> " +
                                    "<div id= '" + item.if_id + "' class='panel-heading'> " +
                                    "<h3 class='info_title' name='if_name' style='display:inline' data-toggle='collapse' data-parent='#accordion' data-target='#info_" + add_total + "_" + item.if_id + "'>" + item.if_name + "</h3>" +
                                    "<a class='move' href='#' onclick=" + "move(this,'MoveUp')" + ">↑↑↑上移↑↑↑</a> " +
                                    "<a class='move' href='#' onclick=" + "move(this,'MoveDown')" + ">↓↓↓下移↓↓↓</a></div>" +
                                    "<div id='info_" + add_total + "_" + item.if_id + "' class='collapse'>" +
                                    "<div class='panel-body'>" +
                                    "<button onclick='add_header_row(this)' class='btn btn-primary'><i class='fa fa-plus-square-o'></i>&nbsp;添加header参数</button>" +
                                    "<button onclick='add_params_row(this)' class='btn btn-primary'><i class='fa fa-plus-square-o'></i>&nbsp;添加params参数</button>" +
                                    "<button onclick='add_body_row(this)' class='btn btn-primary'><i class='fa fa-plus-square-o'></i>&nbsp;添加body参数</button> " +
                                    "<button onclick='add_extract_row(this)' class='btn btn-primary'><i class='fa fa-plus-square-o'></i>&nbsp;添加提取参数</button> " +
                                    "<button onclick='add_validators_row(this)' class='btn btn-primary'><i class='fa fa-plus-square-o'></i>&nbsp;添加检查点</button> " +
                                    "<button onclick='del_interface(this)' class='btn btn-danger'><i class='fa fa-close'></i>&nbsp;删除本接口</button></div> " +
                                    "<p>header参数</p>" +
                                    header +
                                    "<p>params参数</p>" +
                                    params +
                                    "<p>body参数</p>" +
                                    body +
                                    "<p>提取参数</p> " +
                                    "<table name='extract' class='table'>" +
                                    "<thead>" +
                                    "<tr> <th>#</th>" +
                                    "<th>参数名</th>" +
                                    "<th>取值路径</th>" +
                                    "</tr> " +
                                    "</thead>" +
                                    "<tbody> " +
                                    "</tbody> " +
                                    "</table> " +
                                    "<p>检查点</p> " +
                                    "<table name='validators' class='table'>" +
                                    "<thead>" +
                                    "<tr>" +
                                    "<th>#</th>" +
                                    "<th>取值路径</th>" +
                                    "<th>期望值</th>" +
                                    "</tr>" +
                                    "</thead>" +
                                    "<tbody>" +
                                    "</tbody>" +
                                    "</table>" +
                                    "</div> </div></div></div>";
                                $("#case-list").append(newtable);

                            });

                        },
                        error: function () {
                            alert("error!");
                        }
                    });
                }
            });

            // 检查输入框
            function check(att) {
                strValue = att.replace(/\n/g, '');
                if (javaTrim(strValue) == "") {
                    alert('输入有误，请检查!');
                    return false;
                }
            }

            function javaTrim(str) {
                for (var i = 0; (str.charAt(i) == ' ') && i < str.length; i++) ;
                if (i == str.length) return ''; //whole string is space
                var newstr = str.substr(i);
                for (var i = newstr.length - 1; newstr.charAt(i) == ' ' && i >= 0; i--) ;
                newstr = newstr.substr(0, i + 1);
                return newstr;
            }

            $("#submit").click(function () {
                var case_name = $("#case_name").val();
                if (check(case_name) == false) {
                    $("#case_name").focus();
                    return false
                }
                var prj_id = $("#prj_id").val();
                var login_id = $("#login_id").val();
                var description = $("#description").val();

                var content = [];
                $("div.case.row").each(function (i, case_ele) {

                    var step = {};

                    var if_id = $(case_ele).find("div[class='panel-heading']").attr("id");
                    var if_name = $(case_ele).find("h3[class='info_title']").text();

                    var header = {};
                    $(case_ele).find('table[name="header"] tr').each(function (i, ele) {

                        header[$(ele).find('input[name="var_name"]').val()] = $(ele).find('input[name="var_value"]').val();
                    });

                    var params = {};
                    $(case_ele).find('table[name="params"] tr').each(function (i, ele) {

                        params[$(ele).find('input[name="var_name"]').val()] = $(ele).find('input[name="var_value"]').val();
                    });


                    var body = {};
                    $(case_ele).find('table[name="body"] tr').each(function (i, ele) {

                        body[$(ele).find('input[name="var_name"]').val()] = $(ele).find('input[name="var_value"]').val();
                    });


                    var extract = {};
                    $(case_ele).find('table[name="extract"] tr').each(function (i, ele) {

                        extract[$(ele).find('input[name="var_name"]').val()] = $(ele).find('input[name="var_value"]').val();
                    });


                    var validators = [];
                    $(case_ele).find("table[name='validators'] tbody tr").each(function (i, ele) {
                        var vl = {};
                        var name = $(ele).find("input[name='var_name']").val();
                        var value = $(ele).find("input[name='var_value']").val();
                        vl["check"] = name;
                        vl["comparator"] = "eq";
                        vl["expect"] = value;
                        validators.push(vl);
                    });

                    step["if_id"] = if_id;
                    step["if_name"] = if_name;
                    step["header"] = header;
                    step["params"] = params;
                    step["body"] = body;
                    step["extract"] = extract;
                    step["validators"] = validators;

                    content.push(step);
                });
                var content_json = JSON.stringify(content);
                if (content_json === '[]') {
                    console.log('item.content 为空');
                    alert('请输入接口参数信息！');
                    return false;
                }

                $.ajax({
                    url: "/base/case_add/",
                    type: "post",
                    data: {
                        "case_name": case_name,
                        "prj_id": prj_id,
                        "description": description,
                        "content": content_json,
                        "login_id":login_id
                    },
                    // dataType: "json",
                    success: function (data) {
                        console.log(data);
                        if (data.indexOf('<') == -1) {
                            alert(data);
                        } else {
                            alert('保存成功！');
                            window.location.replace("/base/case/");
                        }
                    },
                    error: function () {
                        alert("error!");
                    }
                });


            });

        });

    </script>

{% endblock javascript %}