{% 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="/yqjr/index">主页</a>
                </li>
                <li class="active">
                    <a class="this">基础信息</a>
                </li>
                <li class="active">
                    <a class="this-page" href="{% url 'interface' %}">接口管理</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="panel">
                <div class="panel-heading">
                    <h3 class="panel-title">添加接口</h3>
                </div>
                <form method="post" class="form-horizontal" action="{% url 'interface_add' %}">
                    <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" value="{{ name }}">
                                </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"
                                            name='prj_id'>
                                        {% for prj in prj_list %}
                                            {% ifequal prj.prj_id project_c.prj_id %}
                                                <option value={{ prj.prj_id }} selected>{{ prj.prj_name }}</option>
                                            {% else %}
                                                <option value={{ prj.prj_id }}>{{ prj.prj_name }}</option>
                                            {% endifequal %}
                                        {% 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" value="{{ url }}">
                                </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>
                                {% for item in method_types %}
                                    <div class="col-sm-1 control-label">
                                        <label class="fancy-radio">
                                            {% ifequal item method %}
                                                <input name="method" value={{ item }} type="radio"
                                                       checked><span><i></i>{{ item }}</span>
                                            {% else %}
                                                <input name="method" value={{ item }} type="radio"
                                                ><span><i></i>{{ item }}</span>
                                            {% endifequal %}
                                        </label>
                                    </div>
                                {% endfor %}
                                {% if method_error %}
                                    <span style="color: red; font-size: 10px;">{{ method_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="data_type" name="data_type" class="form-control">
                                        {% for item in data_types %}
                                            {% ifequal item data_type %}
                                                <option value="{{ item }}" selected>{{ item }}</option>
                                            {% else %}
                                                <option value="{{ item }}">{{ item }}</option>
                                            {% endifequal %}
                                        {% endfor %}
                                    </select>
                                </div>
                            </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">{{ description }}</textarea>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">请求header</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>
                                {% if headers_error %}
                                    <span style="color: red; font-size: 10px;">{{ headers_error }}</span>
                                {% endif %}
                                <div class="col-sm-offset-2 col-sm-8">
                                    <table id="request_header" class="table col-sm-10">
                                        <thead>
                                        <tr>
                                            <th>参数名</th>
                                            <th>参数值</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% if request_headers %}
                                            {% for request_header in request_headers %}
                                                <tr>

                                                    <td><input class='form-control' name="request_header_key"
                                                               value="{{ request_header.0 }}">
                                                    </td>
                                                    <td><input class='form-control' name="request_header_value"
                                                               value="{{ request_header.1 }}">
                                                    </td>
                                                    <td>
                                                        <button class='btn btn-danger' onclick='del_step(this)'><i
                                                                class='fa fa-close'></i>&nbsp;删除行
                                                        </button>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        {% endif %}

                                        </tbody>
                                    </table>
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">请求params</label>
                                <div class="col-sm-8">
                                    <button id="add_request_params" class="btn btn-primary" type="button"><i
                                            class="fa fa-plus-square-o"></i>&nbsp;添加行
                                    </button>
                                </div>
                                {% if params_error %}
                                    <span style="color: red; font-size: 10px;">{{ params_error }}</span>
                                {% endif %}
                                <div class="col-sm-offset-2 col-sm-8">
                                    <table id="request_params" class="table col-sm-10">
                                        <thead>
                                        <tr>
                                            <th>参数名</th>
                                            <th>参数值</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% if request_params %}
                                            {% for request_param in request_params %}
                                                <tr>
                                                    <td><input class='form-control' name="request_params_key"
                                                               value="{{ request_param.0 }}">
                                                    </td>
                                                    <td><input class='form-control' name="request_params_value"
                                                               value="{{ request_param.1 }}">
                                                    </td>
                                                    <td>
                                                        <button class='btn btn-danger' onclick='del_step(this)'><i
                                                                class='fa fa-close'></i>&nbsp;删除行
                                                        </button>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        {% endif %}
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">请求body</label>
                                <div class="col-sm-8">
                                    <button id="add_request_body" class="btn btn-primary" type="button"><i
                                            class="fa fa-plus-square-o"></i>&nbsp;添加行
                                    </button>
                                </div>
                                {% if body_error %}
                                    <span style="color: red; font-size: 10px;">{{ body_error }}</span>
                                {% endif %}
                                <div class="col-sm-offset-2 col-sm-8">
                                    <table id="request_body" class="table col-sm-10">
                                        <thead>
                                        <tr>
                                            <th>参数名</th>
                                            <th>参数值</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        {% if request_body %}
                                            {% for request_body_item in request_body %}
                                                <tr>
                                                    <td><input class='form-control' name="request_body_key"
                                                               value="{{ request_body_item.0 }}">
                                                    </td>
                                                    <td><input class='form-control' name="request_body_value"
                                                               value="{{ request_body_item.1 }}">
                                                    </td>
                                                    <td>
                                                        <button class='btn btn-danger' onclick='del_step(this)'><i
                                                                class='fa fa-close'></i>&nbsp;删除行
                                                        </button>
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        {% endif %}
                                        </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" type="submit"><i
                                            class="fa fa-save"></i>&nbsp;保存
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </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' ><input class='form-control' name='request_header_key'></td>" +
                    "<td name='var_remark' ><input class='form-control' name='request_header_value'></td> " +
                    "<td> <button class='btn btn-danger' onclick='del_step(this)'><i class='fa fa-close'></i>&nbsp;删除行</button> </td> </tr>";
                $("#request_header tbody").append(newRow);
            });
            $("#add_request_params").click(function () {
                var newRow = "<tr> <td name='var_name'><input class='form-control' name='request_params_key'></td>" +
                    "<td name='var_remark' ><input class='form-control' name='request_params_value'></td> " +
                    "<td> <button class='btn btn-danger' onclick='del_step(this)'><i class='fa fa-close'></i>&nbsp;删除行</button> </td> </tr>";
                $("#request_params tbody").append(newRow);
            });
            $("#add_request_body").click(function () {
                var newRow = "<tr> <td name='var_name'><input class='form-control' name='request_body_key'></td>" +
                    "<td name='var_remark' ><input class='form-control' name='request_body_value'></td>" +
                    " <td> <button class='btn btn-danger' onclick='del_step(this)'><i class='fa fa-close'></i>&nbsp;删除行</button> </td> </tr>";
                $("#request_body tbody").append(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;
        }


    </script>
{% endblock %}