{{include_file name='home/public/header' title='接口调试'}}
<link href="{{STATIC_URL}}/plugins/jsonFormat/css.css" rel="stylesheet" type="text/css">

<style>
    body {
        background-color: #ffffff;
    }

    .nav-pills{
        margin-bottom: 10px;
    }

    .nav-pills>li>a {

        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;

        position: relative;
        display: block;
    }

    .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
        color: #fff;
        background-color: #5cb85c;
    }

    .nav-pills>li>a:visited{
        text-decoration: none;
        background-color: #eee;
    }

    .tab-pane p{
        font-size: 12px;
    }

    .tab-pane p:last-child{
        margin: 0px;
    }

</style>

</head>

<body>

<div id="wrapper">

    <!-- Navigation -->
    {{include_file name='home/public/nav' sidebar='home/project/sidebar'}}
    <div id="page-wrapper">

        <div class="row">
            <div class="col-lg-12">
                <div class="page-header">
                    <h1>接口调试 </h1>
                </div>
            </div>
            <!-- /.col-lg-12 -->
        </div>

        <!-- 接口详情 -->
        <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">

                    {{include_file name='home/api/tab' tab='debug'}}

                    <div class="panel-body">
                        <!--接口信息-->
                        <form id="js_requestForm" method="post" action="/debug.html">
                            <input name="api[id]" type="hidden" value="1">
                            <input class="js_ApiMethod" name="api[method]" type="hidden" value="GET">
                            <div class="row">
                                <div class="col-lg-7">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="form-group">
                                                <div class="input-group">
                                                    <div class="input-group-btn">
                                                        <button style="width: 80px;" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="js_envName">mock</span> <span class="caret"></span></button>
                                                        <ul class="dropdown-menu">
                                                            <li><a class="js_envItem" href="javascript:void(0);" data-url="http://demo.phprap.com/mock/FzxxmyQzxV.html">mock</a></li>
                                                            <li><a class="js_envItem" href="javascript:void(0);" data-url="http://demo.tianxia.com/https://way.jd.com/huiyutech/p2pBlackList">develop</a></li>


                                                        </ul>
                                                    </div>
                                                    <input type="text" class="form-control js_envUrl" name="api[url]" placeholder="请输入请求地址" value="http://demo.phprap.com/mock/FzxxmyQzxV.html">
                                                    <div class="input-group-btn">
                                                        <button style="width: 80px;" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="js_methodName">GET</span> <span class="caret"></span></button>
                                                        <ul class="dropdown-menu">
                                                            <li class="js_methodItem"><a href="javascript:void(0);">GET</a></li>
                                                            <li class="js_methodItem"><a href="javascript:void(0);">POST</a></li>
                                                            <li class="js_methodItem"><a href="javascript:void(0);">PUT</a></li>

                                                        </ul>
                                                        <button class="btn btn-success js_submit" type="button"><i class="fa fa-search"></i> 请求</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    Header参数 <a href="javascript:void(0);" class="fa fa-plus js_addHeaderBtn" data-toggle="tooltip" data-placement="right" title="" data-original-title="添加参数"></a>
                                                </div>
                                                <!-- /.panel-heading -->
                                                <div class="panel-body">
                                                    <div class="table-responsive">
                                                        <div class="table-responsive">
                                                            <table class="table header-table">
                                                                <tbody>

                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                    <!-- /.table-responsive -->
                                                </div>
                                                <!-- /.panel-body -->
                                            </div>
                                            <!-- /.panel -->
                                        </div>
                                        <!-- /.col-lg-6 -->
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">
                                                    请求参数
                                                    <a href="javascript:void(0);" class="fa fa-plus js_addRequestBtn" data-toggle="tooltip" data-placement="right" title="" data-original-title="添加参数"></a>
                                                </div>
                                                <!-- /.panel-heading -->
                                                <div class="panel-body">
                                                    <div class="table-responsive">
                                                        <div class="table-responsive">
                                                            <table class="table no-border">
                                                                <tbody>
                                                                <tr>
                                                                    <td style="width:25%"><input name="request[key][]" class="form-control" placeholder="key" datatype="*" value="idcard"></td>
                                                                    <td style="width:40%"><input name="request[value][]" class="form-control" placeholder="value" datatype="*" value="0"></td>
                                                                    <td style="width:30%"><input class="form-control" placeholder="description" value="身份证"></td>
                                                                    <td style="width:5%">
                                                                        <a href="javascript:void(0);" class="fa fa-trash-o js_deleteBtn mt-3" data-project_id="3"></a>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td style="width:25%"><input name="request[key][]" class="form-control" placeholder="key" datatype="*" value="name"></td>
                                                                    <td style="width:40%"><input name="request[value][]" class="form-control" placeholder="value" datatype="*" value=""></td>
                                                                    <td style="width:30%"><input class="form-control" placeholder="description" value="姓名"></td>
                                                                    <td style="width:5%">
                                                                        <a href="javascript:void(0);" class="fa fa-trash-o option-btn js_deleteBtn mt-3" data-project_id="3"></a>
                                                                    </td>
                                                                </tr>

                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                    <!-- /.table-responsive -->
                                                </div>
                                                <!-- /.panel-body -->
                                            </div>
                                            <!-- /.panel -->
                                        </div>
                                        <!-- /.col-lg-6 -->
                                    </div>
                                </div>
                                <div class="col-lg-5 js_responseBox">
                                    <div class="row">
                                        <div class="col-lg-12">
                                            <div class="panel panel-default">
                                                <div class="panel-heading">

                                                    响应面板
                                                </div>
                                                <!-- /.panel-heading -->
                                                <div class="panel-body">
                                                    <!-- Nav tabs -->
                                                    <ul class="nav nav-pills">

                                                        <li class="active"><a href="#body-pills" data-toggle="tab" aria-expanded="true">Body</a>
                                                        </li>

                                                        <li class=""><a href="#header-pills" data-toggle="tab" aria-expanded="false">Headers</a>
                                                        </li>

                                                        <li class=""><a href="#cookie-pills" data-toggle="tab" aria-expanded="false">Cookies</a>
                                                        </li>

                                                    </ul>

                                                    <!-- Tab panes -->

                                                    <div class="tab-content">

                                                        <div class="tab-pane fade active in" id="body-pills">
                                                            <p>
                                                                暂无数据
                                                            </p>

                                                        </div>

                                                        <div class="tab-pane fade" id="header-pills">


                                                        </div>

                                                        <div class="tab-pane fade" id="cookie-pills">
                                                            <p>
                                                                暂无数据
                                                            </p>
                                                        </div>

                                                    </div>
                                                </div>
                                                <!-- /.panel-body -->
                                            </div>
                                            <!-- /.panel -->
                                        </div>
                                    </div>

                                    <script src="/static/plugins/jsonFormat/js.js"></script>

                                    <script>
                                        $(function () {
                                            // 格式化json
                                            jsonFormat();

                                        });
                                    </script>
                                </div>
                            </div>
                        </form>
                    </div>

                </div>

            </div>

        </div>

    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<hr>
<p class="text-center">{{config('copyright')}}</p>

<script>

    $(function () {

        // 选择环境
        $(".js_envItem").click(function () {
            var name = $(this).text();
            var url = $(this).data('url');

            $(".js_envName").text(name);
            $(".js_envUrl").val(url);

        });

        // 选择请求方式
        $(".js_methodItem").click(function () {
            var name = $(this).text();

            $(".js_methodName").text(name);
            $(".js_ApiMethod").val(name);

        });

        // 新增header参数
        $(".js_addHeaderBtn").click(function (e) {
            var e = e||window.event;
            e.stopPropagation();

            var trObj = $(".js_headerCloneBox").find('tr');
            $(this).closest('.panel').find('tbody').append(trObj.clone(true));
        });

        // 新增请求参数
        $(".js_addRequestBtn").click(function (e) {
            var e = e||window.event;
            e.stopPropagation();

            var trObj = $(".js_requestCloneBox").find('tr');
            $(this).closest('.panel').find('tbody').append(trObj.clone(true));
        });

        // 删除参数
        $("body").on('click', '.js_deleteBtn',function (e) {
            // 阻止事件冒泡
            var e = e||window.event;
            e.stopPropagation();

            $(this).closest('tr').remove();
        });

        //验证表单
        $("#js_requestForm").Validform({
            tiptype:function(msg,o,cssctl){

                if(!o.obj.is("form")){

                    var objtip=o.obj.siblings(".Validform_checktip");

                    cssctl(objtip,o.type);

                    objtip.text(msg);

                }

            },

            btnSubmit:".js_submit",

            label:"label",

            ajaxPost:true,

            beforeSubmit: function () {
                $(".js_submit").attr("disabled", "disabled");
            },
            callback: function (data) {
                var url  = "{{url('debug/load')}}";
                var info = data.info;
                var body = data.body;
                var header = data.header;
                $(".js_responseBox").load(url, {info:info,header:header,body:body});

                $(".js_submit").removeAttr("disabled");
            }

        });

    });
</script>
{{include_file name='home/public/footer'}}