{% extends "base.html" %}
{% block css %}
    <style>
        #cen {
            text-align: center;
        }

        a:hover {
            color: red;
        }

        #case_name {
            max-width: 200px;
            word-wrap: break-word;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        #case_name:hover {
            white-space: normal;
            overflow: auto;
        }

        .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">用例管理</a>
                </li>
            </ol>

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


    <div id="toolbar1">
        <a href="/base/case_add/" class="btn btn-primary"><i
                class="fa fa-plus-circle"></i>&nbsp;添加用例</a>
    </div>
    <table id="tb_departments" data-toggle="table">

    </table>
    <div class="modal fade" id="runCaseForm" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">×</span></button>
                    <h4 class="modal-title">用例运行</h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal" method="post" action="">
                        <div class="form-group">
                            <input type="hidden" id="debug_case_id" name="case_id">
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">用例名称</label>
                            <div class="col-sm-8"><span id="case_name_"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">请选择测试环境</label>
                            <div class="col-sm-8">
                                <select class="form-control m-b" id="debug_env_id" name="env_id">
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label"> 实际返回结果</label>
                            <div class="col-sm-8"><textarea class="form-control"
                                                            id="run_return_parameter"
                                                            name="run_return_parameter"
                                                            rows="5"></textarea>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" id="cancel_run" class="btn btn-default"
                                    data-dismiss="modal"><i
                                    class="fa fa-mail-reply-all"></i>&nbsp;取消
                            </button>
                            <button type="button" onclick="run_button()" class="btn btn-primary"
                                    id="debug"><i
                                    class="fa fa-circle-o-notch"></i>&nbsp;调试
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


{% endblock %}
{% block javascript %}
    <script>
        $('#tb_departments').bootstrapTable({
            paginationLoop:false,
            url: '/base/case/',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            toolbar: '#toolbar1',                //工具按钮用哪个容器
            toolbarAlign: "left",
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            {#queryParams: oTableInit.queryParams,//传递参数（*）#}
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                       //每页的记录行数（*）
            pageList: [10],        //可供选择的每页的行数（*）
            search: true,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            showSearchButton: true,
            {#showSearchClearButton: true,#}
            {#searchAlign:'left',#}
            {#strictSearch: true,#}
            {#showColumns: true,                  //是否显示所有的列#}
            {#showRefresh: true,                  //是否显示刷新按钮#}
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            {#height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度#}
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            {#showToggle: true,                    //是否显示详细视图和列表视图的切换按钮#}
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            columns: [
                {
                    field: 'id',
                    title: '#',
                    formatter: function (value, row, index) {
                        return index + 1 + row.offset;
                    }
                }, {
                    field: 'case_name',
                    title: '用例名称',
                    formatter: function (value, row, index) {
                        return '<a href="/base/case_update?case_id=' + row.id + '">' + value + '</a>';
                    }
                }, {
                    field: 'project_name',
                    title: '所属项目'
                }, {
                    field: 'description',
                    title: '描述'
                }, {
                    field: 'update_time',
                    title: '更新时间'
                }, {
                    field: 'update_user',
                    title: '更新用户'
                }, {
                    field: '——',
                    title: '操作',
                    width: 200,
                    formatter: function (value, row, index) {
                        return '<a href="#" class="layui-btn layui-btn-danger layui-btn-xs" onclick="debug_button(' + row.id+',\''+ row.case_name+'\','+row.project_id+')" data-toggle="modal" data-target="#runCaseForm">' +
                            '<i class="fa fa-recycle"></i>&nbsp;&nbsp;&nbsp; </a>' +
                            '<a href="/base/case_copy?case_id=' + row.id + '" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="log" onclick="return copy_btn()">' +
                            '<i class="fa fa-files-o"></i>&nbsp;&nbsp;&nbsp;</a>' +
                            '<a href="/base/case_logs/" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="log">' +
                            '<i class="fa fa-file-text-o"></i>&nbsp;&nbsp;&nbsp;</a>' +
                            '<a href="#" name="/base/case_delete?case_id=' + row.id + '" class="layui-btn layui-btn-danger layui-btn-xs" onclick="delete_btn(this)">' +
                            '<img src="/static/admin/img/icon-deletelink.svg"/></a>';
                    }
                },],
            formatSearch: function () {
                return '搜一搜，啥都有'
            },

        });

        function debug_button(id,name,prj) {
            var case_id = id;
            var case_name = name;
            var prj_id = prj;
            {#console.log('case_name=======>', case_name);#}
            $("#debug_case_id").val(case_id);
            $("#cancel_run").html("取消");
            $("#cancel_run").attr("class", "btn btn-default");
            $("#run_return_parameter").val('');
            $('#case_name').empty();
            $.ajax({
                type: "get",
                url: "/base/findata/",
                data: {
                    "prj_id": prj_id,
                    "type": "get_env_by_prj_id"
                },
                success: function (data) {
                    var listdata = eval(data);
                    $("#debug_env_id").empty();
                    $('#case_name_').append(case_name);
                    $(listdata).each(function (i, item) {
                        $("#debug_env_id").append("<option value=" + item.env_id + ">" + item.env_name + "</option>");
                    })
                },
                error: function () {
                    alert("获取测试环境失败！");
                }
            });
        }

        function delete_btn(ele) {
            if (!window.confirm("你确定要删除吗？")) {

                return;
            }
            console.log($(ele).attr('name'));
            $.ajax(
                {
                    url: $(ele).attr('name'),
                    type: 'GET',
                    success: function (data) {
                        console.log(data);
                        var data = JSON.parse(data);
                        console.log(data);
                        if (data.code == 0) {
                            alert('删除成功！');
                            $(ele).parents('tr').remove();
                        } else {
                            alert(data.message);
                            return
                        }
                    },
                    error: function () {
                        alert('删除失败，请联系管理员！')
                    }
                }
            )

        }

        function run_button() {
            $("#run_return_parameter").val('等待结果中...');
            $.ajax({
                type: 'post',
                url: "/base/case_run/",
                data: {
                    "case_id": $("#debug_case_id").val(),
                    "env_id": $("#debug_env_id").val()
                },
                success: function (res) {
                    if (res == '0') {
                        $("#run_return_parameter").val("用户未登录！");
                    } else {
                        console.log('------>', res);
                        $("#run_return_parameter").val(JSON.stringify(res));
                        $("#cancel_run").html("完成");
                        $("#cancel_run").attr("class", "btn btn-primary");
                    }
                },
                error: function () {
                    $("#run_return_parameter").val("调用接口失败!!!");
                    $("#cancel_run").html("完成");
                    $("#cancel_run").attr("class", "btn btn-danger");
                }
            });
        }
    </script>
{% endblock %}