{% extends "base.html" %}

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

        .reset {
            right: 80px;
        }

        .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>
                <div class="panel-body">
                    <form class="form-horizontal" action="{% url 'interface_update' %}" method="post">
                        <input name="if_id" value={{ interface.if_id }} hidden>
                        <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="{{ interface.if_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" name="prj_id" class="form-control">
                                        {#                                        <option value="{{ interface.project_id }}">{{ interface.project }}</option>#}
                                        {% for prj in prj_list %}
                                            {% ifequal prj.prj_id interface.project_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="{{ interface.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>
                                <div class="col-sm-1 control-label">
                                    <label class="fancy-radio">
                                        {% ifequal method 'get' %}
                                            <input name="method" value="get" type="radio" checked="true">
                                            <span><i></i>get</span>
                                        {% else %}
                                            <input name="method" value="get" type="radio"><span><i></i>get</span>
                                        {% endifequal %}
                                    </label>
                                </div>
                                {% if method_error %}
                                    <span style="color: red; font-size: 10px;">{{ method_error }}</span>
                                {% endif %}
                                <div class="col-sm-1 control-label">
                                    <label class="fancy-radio">
                                        {% ifequal method 'post' %}
                                            <input name="method" value="post" type="radio" checked="true">
                                            <span><i></i>post</span>
                                        {% else %}
                                            <input name="method" value="post" type="radio"><span><i></i>post</span>
                                        {% endifequal %}
                                    </label>
                                </div>
                                <div class="col-sm-1 control-label">
                                    <label class="fancy-radio">
                                        {% ifequal method 'delete' %}
                                            <input name="method" value="delete" type="radio" checked="true">
                                            <span><i></i>delete</span>
                                        {% else %}
                                            <input name="method" value="delete" type="radio"><span><i></i>delete</span>
                                        {% endifequal %}
                                    </label>
                                </div>
                                <div class="col-sm-1 control-label">
                                    <label class="fancy-radio">
                                        {% ifequal method 'put' %}
                                            <input name="method" value="put" type="radio" checked="true">
                                            <span><i></i>put</span>
                                        {% else %}
                                            <input name="method" value="put" type="radio"><span><i></i>put</span>
                                        {% endifequal %}
                                    </label>
                                </div>
                            </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 interface.data_type item %}
                                                <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" class="form-control"
                                          rows="3">{{ interface.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" id="request_header_table">
                                        <thead>
                                        <tr>
                                            <th>参数名</th>
                                            <th>参数值</th>
                                        </tr>


                                        </thead>
                                        <tbody>
                                        {% if request_headers %}
                                            {% for k,v in request_headers.items %}
                                                <tr>

                                                    <td><input class='form-control' name="request_header_key"
                                                               value="{{ k }}">
                                                    </td>
                                                    <td><input class='form-control' name="request_header_value"
                                                               value="{{ v }}">
                                                    </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>
                                        </tr>

                                        </thead>
                                        <tbody>
                                        {% if request_params %}
                                            {% for k,v in request_params.items %}
                                                <tr>
                                                    <td><input class='form-control' name="request_params_key"
                                                               value="{{ k }}">
                                                    </td>
                                                    <td><input class='form-control' name="request_params_value"
                                                               value="{{ v }}">
                                                    </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>
                                        </tr>

                                        </thead>
                                        <tbody>
                                        {% if request_body %}
                                            {% for k,v in request_body.items %}
                                                <tr>
                                                    <td><input class='form-control' name="request_body_key"
                                                               value="{{ k }}">
                                                    </td>
                                                    <td><input class='form-control' name="request_body_value"
                                                               value="{{ v }}">
                                                    </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="submit" class="btn btn-primary float-button" lay-submit=""
                                            lay-filter="demo1"><i
                                            class="fa fa-save"></i>&nbsp;保存
                                    </button>
                                    <button id="reset" type="reset" class="btn btn-primary float-button reset"><i
                                            class="fa fa-repeat"></i>&nbsp;重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block javascript %}
    <script type="text/javascript">
        //重置 刷新页面
        $('#reset').click(function () {
            location.reload();
        });

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

        $(document).ready(function () {
            //添加请求头参数行      <input name="response_body_data">
            $("#add_request_header").click(function () {
                var newRow = "<tr> <td name='var_name'><input class='form-control' name='request_header_key'></td> " +
                    "<td name='var_name'><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_name'><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_name'><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);
        });


    </script>
{% endblock %}