{% 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;
        }
    </style>
{% endblock %}

{% block crumbs %}
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li>
                    <a href="{% url 'index' %}">主页</a>
                </li>
                <li class="active">
                    <a class="this">web测试</a>
                </li>
                <li class="active">
                    <a class="this-page" href="{% url 'webcase_index' %}">web_case</a>
                </li>
                <li class="active">
                    <a class="">添加case</a>
                </li>
            </ol>
        </div>
    </div>
{% endblock %}

{% block body %}

    <div class="row">
        <div class="col-md-12">
            <div class="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">添加web用例</h3>
                </div>
                <div class="panel-body">
                    <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="if_name" name="if_name" class="form-control">
                            </div>
                            {% if name_error %}
                                <span style="color: red; font-size: 10px;">{{ name_error }}</span>
                            {% endif %}
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属项目</label>
                            <div class="col-sm-8">
                                <select type="text" id="prj_id" class="form-control" required="required">
                                    {% 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">url</label>
                            <div class="col-sm-8">
                                <input type="text" id="url" name="url" class="form-control"  placeholder="请输入http/https完整地址">
                            </div>
                            {% if url_error %}
                                <span style="color: red; font-size: 10px;">{{ url_error }}</span>
                            {% endif %}
                        </div>

                        <div class="form-group">
                            <label class="col-sm-2 control-label">步骤描述</label>
                            <div class="col-sm-8">
                                <textarea name="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-8">
                                <button id="add_request_header" class="btn btn-primary" type="button"><i
                                        class="fa fa-plus-square-o"></i>&nbsp;添加行
                                </button>
                            </div>
                            <div class="col-sm-offset-2 col-sm-8">
                                <table id="request_header" class="table col-sm-10" id="request_header_table">
                                    <thead>
                                    <tr>
                                        <th>步骤名称</th>
                                        <th>操作方法</th>
                                        <th>定位方式</th>
                                        <th>定位信息</th>
                                        <th>判断方法</th>
                                        <th>判断内容</th>
                                        <th>备注</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>

                        </div>

                        <div class="form-group">
                            <div class="col-sm-offset-4 col-sm-6">
                                <button id="sumbit" class="btn btn-primary float-button"><i
                                        class="fa fa-save"></i>&nbsp;保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascript %}
    <script>

        function del_step(obj) {
            var tr = obj.parentNode.parentNode;
            var tbody = tr.parentNode;
            tbody.removeChild(tr);
        }

        $(document).ready(function () {
            //添加请求头参数行
            $("#add_request_header").click(function () {
                var newRow = "<tr> <td name='var_name' contenteditable='true'></td><td name='var_remark' contenteditable='true'></td> <td> <button class='btn btn-danger' onclick='del_step(this)'><i class='fa fa-close'></i>&nbsp;删除行</button> </td> </tr>";
                $("#request_header tr:last").after(newRow);
            })

            //删除行
        });

        $('#get_table_data').click(function () {


            var args = {};
            $('#request_header tr').each(function (i) {                   // 遍历 tr
                if (i == 0) return true;
                var data = new Object();
                $(this).find("td[name]").each(function () {
                    var name = $(this).attr("name");
                    data[name] = $(this).text();
                });
                args[i] = data;
            });
            send_data = JSON.stringify(args);
            alert(send_data);
        });

        // 检查输入框
        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;
        }

        // 保存
        $('#sumbit').click(function () {

            var if_name = $("#if_name").val();
            if (check(if_name) == false) {
                $("#if_name").focus();
                return false;
            }
            var prj_id = $("#prj_id").val();
            var url = $("#url").val();
            if (check(url) == false) {
                $("#url").focus();
                return false;
            }
            var method = $("input[name='method']:checked").val();
            var data_type = $("#data_type").val();
            var is_sign = $("input[name='is_sign']:checked").val();
            var is_headers = $("input[name='is_headers']:checked").val();
            var description = $("textarea[name='description']").val();

            var request_header_data;
            var request_body_data;
            var response_header_data;
            var response_body_data;

            var args = [];
            $('#request_header tr').each(function (i) {
                if (i == 0) return true;
                var data = new Object();
                $(this).find("td[name]").each(function () {
                    var name = $(this).attr("name");
                    data[name] = $(this).text();
                });
                args.push(data);
            });
            request_header_data = JSON.stringify(args);

            var args = [];
            $('#request_body tr').each(function (i) {
                if (i == 0) return true;
                var data = new Object();
                $(this).find("td[name]").each(function () {
                    var name = $(this).attr("name");
                    data[name] = $(this).text();
                });
                args.push(data);
            });
            request_body_data = JSON.stringify(args);

            var args = [];
            $('#response_header tr').each(function (i) {                   // 遍历 tr
                if (i == 0) return true;
                var data = new Object();
                $(this).find("td[name]").each(function () {
                    var name = $(this).attr("name");
                    data[name] = $(this).text();
                });
                args.push(data);
            });
            response_header_data = JSON.stringify(args);

            var args = [];
            $('#response_body tr').each(function (i) {                   // 遍历 tr
                if (i == 0) return true;
                var data = new Object();
                $(this).find("td[name]").each(function () {
                    var name = $(this).attr("name");
                    data[name] = $(this).text();
                });
                args.push(data);
            });
            response_body_data = JSON.stringify(args);

            $.ajax({
                url: "/base/interface_add/",
                type: "post",
                data: {
                    "if_name": if_name,
                    "prj_id": prj_id,
                    "url": url,
                    "method": method,
                    "data_type": data_type,
                    "is_sign": is_sign,
                    "is_headers": is_headers,
                    "description": description,
                    "request_header_data": request_header_data,
                    "request_body_data": request_body_data,
                    "response_header_data": response_header_data,
                    "response_body_data": response_body_data
                },
                // dataType: "json",

                success: function (data) {
                    console.log(typeof data);
                    console.log(data);
                    if (data.indexOf('<') == -1) {
                        alert(data);
                    } else {
                        alert('保存成功！');
                        window.location.replace('/base/interface/')
                    }
                },
                error: function () {
                    alert("error!");
                }
            });

        });

    </script>
{% endblock %}