{include file="test/usecase/header" /}

<link rel='stylesheet' href='__PUBLIC__/css/api-font.css__VERSION__' type='text/css' />
<link rel='stylesheet' href='__PUBLIC__/css/api-main.css__VERSION__' type='text/css' />

<script src="__PUBLIC__/js/common.js__VERSION__"></script>
<script src="__PUBLIC__/js/api-main.js__VERSION__"></script>

<link href="__PUBLIC__/css/jquery.json-viewer.css__VERSION__" type="text/css" rel="stylesheet" />
<script src="__PUBLIC__/js/jquery.json-viewer.js__VERSION__"></script>

<style>
.custom-control-inline{line-height: 23px;margin-right: 10px;}
.form-row>.col, .form-row>[class*=col-]{padding: 0;}
.form-row>[class*=col-] .form-control{border-left:0px;}
.form-row>[class*=col-] .top{border-left:1px solid #F2F3F3;}
.callout {padding: 7px 21px;margin-left: -5px;}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {    color: #00795b;background-color: #fff;border-color: #00795b;border: 1px solid #00795b;border-bottom: 0px;}
.nav-link {display: block;padding: 8px 15px;}
.row{margin-bottom: 3px}
.table-striped .form-control{ height: 28px;line-height: 28px;padding: 0 .75rem;margin-bottom: 5px;}
.table>thead:first-child>tr:first-child>th {background: #e9ecef;}
.card .tab-content{padding: 0;}
@media (min-width: 768px) {
    .col-md-1{max-width: 10%;flex: 0 0 10%;}
    .col-md-8{max-width: 61%;flex: 0 0 61%;}
    .col-md-10{max-width: 79%;flex: 0 0 79%;}
}
.ma-bottom-tab li.selected {background: #323232;}
.ma-dialog-wrapper .ma-dialog{background: #3c3f41;color:#bbb}
</style>
    <link rel="stylesheet" href="__PUBLIC__/admin/tree/css/jquery.jOrgChart.css__VERSION__"/>
    <link rel="stylesheet" href="__PUBLIC__/admin/tree/css/custom.css__VERSION__"/>
    <link href="__PUBLIC__/admin/tree/css/prettify.css__VERSION__" type="text/css" rel="stylesheet" />
<style type="text/css">
/* 显示 块*/
    .control-abs-component{
        background-color: rgba(255,255,255,.7);
        height: 42px;
        line-height: 30px;
        padding: 5px 10px;
        font-size: 16px;
        display: block;
        border: 1px solid transparent;
        /* position: absolute; */
        position: relative;
        left: 0;
        top: 0;
        z-index: 99999999999999;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        width: max-content;
    } 
    /*
    纸张宽度*/
    .paper-area {
        background-color: #ffffff;
        z-index: 1;
        position: relative;
        margin: 10px auto;
        overflow: hidden;
        display: block;
        box-shadow: rgba(0, 0, 0, 0.31) 0 0 13px;
        background-color: rgb(255, 255, 255); 
        width: 3000px; 
        height: 20000px;
    }
    .paper-area .paper-area{
        background-color: transparent;
        margin: 0 auto;
        z-index: 0;
    }
    
    /*重写 连线文字样式*/
    .ours-line-text .text-color{
        color: #ffffff;
    }
    body {
    overflow: auto;
    background: none;
    margin: 0;
    padding: 0;
    color:#333;
}
    .add_tree{padding: 5px 10px;
    background: #00795b;
    color: #fff;
    position: absolute;
    top: 5px;
    border: 0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    width: max-content;
    margin-left: 15px;
    z-index: 100;
    display: none;
}
.add_tree2{top:-10px;margin-left: 12px;}
.add_tree3{top:12px;margin-left: 12px;}

    .add_tree:hover{background: #039470;}
    /* .line{border-radius: 10px; border-width: 1px; background-color: rgb(255, 255, 255); border-color: rgb(230, 230, 230); border-style: solid;opacity: 1; text-align: center;} */
    .line .add_tree{display:none;position: absolute;top: 6px;left: 100px;width: 100px;height: 30px;line-height: 10px;}
    .tree_left{border-bottom: 5px solid transparent;border-right: 7px solid #00795b;border-top: 8px solid transparent;position: absolute;left: -7px;top: 50%;margin-top: -7px;}
    .jOrgChart .node{position: relative;
    border: 0;
    background-color: #fff;
    color: #fff;
    width: max-content;
    height: max-content;
    padding: 5px 10px;
    z-index: unset;
    }
.jOrgChart {margin-top: 40px;}
    .orgChart {
    z-index: 1;
    margin: 10px auto;
    overflow: hidden;
    display: block;
    box-shadow: rgba(0, 0, 0, 0.31) 0 0 13px;
    background-color: rgb(255, 255, 255);
    width: max-content;
    height: max-content;
    padding: 50px 100px;
}

#usecase-ut-div .ma-dialog-content li{
    height: 28px;
    line-height: 28px;
}
#usecase-ut-div .item-from .ma-api-info label{width: 120px;margin-right: 20px;color: #fff;}
</style>
{$html|raw}
<div id="chart" class="orgChart">
    <div style="font-size: 30px;width: 100%;text-align: center;">
    <span style="padding: 10px;border-bottom: 2px solid;">测试报告在线预览</span>
    </div>
</div>


<div class="ma-dialog-wrapper" id="usecase-ut-div" style="display: none;">
	<div class="ma-dialog" style="position: absolute; top:200px; left:400px; width: 800px; height: 600px;">
		<div class="ma-dialog-header not-select">
			执行结果
			<span>
				<i class="ma-icon ma-icon-close"></i>
			</span>
		</div>
		<div class="ma-dialog-content" style="overflow: auto;height: 100%;">
			<div class="main-body" style="height: 100%;">
                <ul class="ma-bottom-tab not-select">
                    <li class="selected" data-id="ut-from">
                        <i class="ma-icon ma-icon-options"></i>
                        基本信息
                    </li>
                    <li data-id="ut-return">
                        <i class="ma-icon ma-icon-options"></i>
                        响应结果
                    </li>
                    <li data-id="ut-body">
                        <i class="ma-icon ma-icon-options"></i>
                        请求数据
                    </li>
                    <li data-id="ut-return-header">
                        <i class="ma-icon ma-icon-options"></i>
                        响应头
                    </li>
                    <li data-id="ut-header">
                        <i class="ma-icon ma-icon-options"></i>
                        请求头
                    </li>
                </ul>
                <div class="menu-list item-from ut-from">
                    <div class="ma-api-info">
                        <label>
                            接口名：
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="usecase_ut_title" class="input" disabled type="text">
                        </div>
                    </div>
                    <div class="ma-api-info">
                        <label>
                            Request URL：
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="usecase_ut_url" class="input" disabled type="text">
                        </div>
                    </div>
                    <div class="ma-api-info">
                        <label>
                            Request Method：
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="usecase_ut_method" class="input" disabled type="text">
                        </div>
                    </div>
                    <div class="ma-api-info">
                        <label>
                            Body Type：
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="usecase_ut_type" class="input" disabled type="text">
                        </div>
                    </div>
                    <div class="ma-api-info">
                        <label>
                            Status Code：
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="usecase_ut_code" class="input" disabled type="text">
                        </div>
                    </div>
                    <div class="ma-api-info">
                        <label>
                            耗时(ms)：
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="usecase_ut_run_time" class="input" disabled type="text">
                        </div>
                    </div>
                    <div class="ma-api-info">
                        <label>
                            结果判断：
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="usecase_ut_yes" class="input" disabled type="text" style="background: #fff;font-size: 14px;">
                        </div>
                    </div>
                    <div class="ma-api-info" id="usecase_ut_yes_div">
                        <label>
                            判断原因：
                        </label>
                        <div style="flex: 1 1 0%;">
                            <input id="usecase_ut_yes_des" class="input" disabled type="text">
                        </div>
                    </div>
                </div>
                <div class="menu-list item-from ut-return" style="display: none;height: 90%;">
                    <pre id="usecase-ut-return-json" style="width: 100%;height: 100%;overflow: auto;background: #eaeaea;padding: 20px;"></pre>
                </div>
                <div class="menu-list item-from ut-return-header" style="display: none;height: 90%;">
                    <pre id="usecase-ut-return-header-json" style="width: 100%;height: 100%;overflow: auto;background: #eaeaea;padding: 20px;"></pre>
                </div>
                <div class="menu-list item-from ut-body" style="display: none;height: 90%;">
                    <pre id="usecase-ut-body-json" style="width: 100%;height: 100%;overflow: auto;background: #eaeaea;padding: 20px;"></pre>
                </div>
                <div class="menu-list item-from ut-header" style="display: none;height: 90%;">
                    <pre id="usecase-ut-header-json" style="width: 100%;height: 100%;overflow: auto;background: #eaeaea;padding: 20px;"></pre>
                </div>
            </div>
		</div>
	</div>
</div>


<script type="text/javascript" src="__PUBLIC__/admin/tree/prettify.js"></script>

<script type="text/javascript" src="__PUBLIC__/admin/tree/jquery-ui.min.js"></script>
<script src="__PUBLIC__/admin/tree/jquery.jOrgChart.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
    $("#org").jOrgChart({
        chartElement : '#chart',
        dragAndDrop  : true
    });
    prettyPrint()
    $('.node').on('mouseover', function(){
        $(this).children('div').children('.add_tree').show();
    })
    $('.node').on('mouseout', function(){
        $(this).children('div').children('.add_tree').hide();
    })
});
function get_test_doc(id) {
    var array = ajax('/test/usecase/ut_log_info', 'post', {
        'id':id,
    }, true);
    console.log(array);
    if (array == false) {
        return;
    }
    test_task_des(array)
}

function test_task_des(array) {
    $('#usecase_ut_title').val(array.api_title)
    $('#usecase_ut_url').val(array.api_url)
    $('#usecase_ut_method').val(array.request_type)
    $('#usecase_ut_type').val(array.param_type)
    $('#usecase_ut_code').val(array.status_code)
    $('#usecase_ut_run_time').val(array.run_time+' ms')
    
    if (array.yes == 1) {
        $('#usecase_ut_yes').val('正确')
        $('#usecase_ut_yes').css('color', '#59a85c');
        $('#usecase_ut_yes_div').hide(); 
    } else {
        $('#usecase_ut_yes').val('错误')
        $('#usecase_ut_yes').css('color', '#ff0057');
        $('#usecase_ut_yes_div').show(); 
        $('#usecase_ut_yes_des').val(array.yes_des)
    }
    var options = {
        collapsed: false,
        withQuotes: false,
    };
    if (if_json(array.return_json)) {
        $('#usecase-ut-return-json').jsonViewer(eval('('+array.return_json+')'), options);
    } else {
        $('#usecase-ut-return-json').html(array.return_json);
    }
    if (if_json(array.return_head)) {
        $('#usecase-ut-return-header-json').jsonViewer(eval('('+array.return_head+')'), options);
    } else {
        $('#usecase-ut-return-header-json').html(array.return_head);
    }
    if (if_json(array.body_json)) {
        $('#usecase-ut-body-json').jsonViewer(eval('('+array.body_json+')'), options);
    } else {
        $('#usecase-ut-body-json').html(array.body_json);
    }
    if (if_json(array.request_json)) {
        $('#usecase-ut-header-json').jsonViewer(eval('('+array.request_json+')'), options);
    } else {
        $('#usecase-ut-header-json').html(array.request_json);
    }

    $('#usecase-which').hide(); 
        
    $('#usecase-ut-div .main-body').show(); 
    $('#usecase-ut-div').show();
}
$('#usecase-ut-div .ma-bottom-tab li').click(function(){
    $('#usecase-ut-div .ma-bottom-tab li').removeClass('selected');
    $(this).addClass('selected');
    $('#usecase-ut-div .menu-list').hide();
    $('.'+$(this).attr('data-id')).show();
})
</script>