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


<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%;}
    }
    </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__VERSION__" />
    
    <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: 0px;
        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: 1px solid #a0a0a0;
    color: #fff;
    width: max-content;
    height: max-content;
    padding: 5px 10px;
    z-index: unset;
    }
    .jOrgChart {
    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;
    }
    </style>
    {$html|raw}
    <div id="chart" class="orgChart"></div>
    {if (count($list) <= 0)}
        <button type="button" class="add_tree" onclick="add_tree()" style="top:10px;display:block">添加一级节点</button>
    {/if}
    
    <div id="add_html" style="display: none;">
        <form class="myForm" method="post">
        <input type="hidden" name="template_id" value="{$param.template_id}">
        <input type="hidden" id="pid" name="pid" value="">
        <input type="hidden" id="code" name="code" value="">
        <div class="form-row">
            <div class="form-group col-md-12">
            <label for="inputCity">所属项目</label>
            <select id="item_id" name="item_id" class="form-control top" onchange="getCity(this.value);">
                <option value="">选择项目</option>
                {foreach $item as $v}
                <option value="{$v.id}">{$v.title}</option>
                {/foreach}
            </select>
            </div>
            <div class="form-group col-md-12">
            <label for="inputCity">所属接口</label>
            <select id="api_id" name="api_id" class="form-control top" onchange="getUsecase(this.value);">
                <option value="">请选择</option>
            </select>
            </div>
            <div class="form-group col-md-12">
            <label for="inputCity">测试用例</label>
            <select id="usecase_id" name="usecase_id" class="form-control top">
                <option value="">请选择</option>
            </select>
            </div>
            <div class="form-group col-md-12" id="sleep_time" style="display: none;">
            <label for="inputCity">休眠多少秒才继续下列任务</label>
            <input type="text" class="form-control top" name="sleep_time" placeholder="秒" value="">
            </div>
        </div>
        </form>
    </div>
    
    <div id="update_html" style="display: none;">
        <form class="myForm2" method="post">
        <input type="hidden" id="cid" name="id" value="">
            <div class="form-group col-md-12">
            <label for="inputCity">休眠多少秒才继续下列任务</label>
            <input type="text" class="form-control top sleep_time2" name="sleep_time" placeholder="秒" value="">
            </div>
        </div>
        </form>
    </div>
    <script type="text/javascript" src="__PUBLIC__/admin/tree/prettify.js__VERSION__"></script>
    <!-- jQuery includes -->
    <script type="text/javascript" src="__PUBLIC__/admin/tree/jquery-ui.min.js__VERSION__"></script>
    <script src="__PUBLIC__/admin/tree/jquery.jOrgChart.js__VERSION__"></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();
        })
        // 禁用的状态码
        $('.no_click').each(function(){
        $(this).parent('.node').css('background-color', '#fff');
        $(this).parent('.node').css('color', '#333');
        })
    });
    </script>
    <script>
    // 新建表单
    function add_tree(pid, code) {
        var id = pid ? pid : 0;
        var co = code ? code : '';
        if (id != 0) {
        $('#sleep_time').show();
        } else {
        $('#sleep_time').hide();
        }
        $('#pid').val(id);
        $('#code').val(co);
        iframe.createIframe('选择接口',$('#add_html').html(), {
        'width':'500px',
        'height':'320px',
        'type':2,
        'function':'create'
        })
    }
    function create() {
        var data = new FormData($(".myForm")[0]);
        lightyear.loading('show');
        $.ajax({
            type: 'post',
            data: data,
        async: false,
        processData: false,
        contentType: false,
            url: "/test/usecase/template_tree_insert_ajax",
            success: function(array) {
            lightyear.loading('hide'); 
                res = array;
                if (array['code'] == '0') {
                    lightyear.notify(array['msg'], 'danger', 2000, 'mdi mdi-emoticon-happy', 'top', 'center')
                } else {
            lightyear.notify(array['msg'], 'success', 2000, 'mdi mdi-emoticon-happy', 'top', 'center');setTimeout(function () {
                window.location.reload();
            },1000);
            }
            }
        });
    }
    // 编辑节点
    function update_tree(id, sleep_time) {
        iframe.createIframe('编辑接口',$('#update_html').html(), {
        'width':'500px',
        'height':'150px',
        'type':2,
        'function':'update'
        })
        $('#cid').val(id);
        $('.sleep_time2').val(sleep_time);
    }
    function update() {
        var data = new FormData($(".myForm2")[0]);
        lightyear.loading('show');
        $.ajax({
            type: 'post',
            data: data,
        async: false,
        processData: false,
        contentType: false,
            url: "/test/usecase/template_tree_update_ajax",
            success: function(array) {
            lightyear.loading('hide'); 
                res = array;
                if (array['code'] == '0') {
                    lightyear.notify(array['msg'], 'danger', 2000, 'mdi mdi-emoticon-happy', 'top', 'center')
                } else {
            lightyear.notify(array['msg'], 'success', 2000, 'mdi mdi-emoticon-happy', 'top', 'center');setTimeout(function () {
                window.location.reload();
            },1000);
            }
            }
        });
    }
    // 删除节点
    function delete_tree(id) {
        $.alert({
        title: '确认删除？',
        content: '确认后，数据将会被删除。 <br> 您确定需要 <strong>删除</strong>吗？',
        buttons: {
            confirm: {
            text: '确认',
            btnClass: 'btn-primary',
            action: function(){
                lightyear.loading('show');
                $.ajax({
                    type: "POST",
                    url: "/test/usecase/template_tree_delete",
                    data: {
                    id:id,
                    template_id:"{$param.template_id}"
                    },
                    success: function (array) {
                    lightyear.loading('hide');
                    if (array['code'] == '0') {
                        lightyear.notify(array['msg'], 'danger', 500);
                    } else {
                        lightyear.notify(array['msg'], 'success', 2000, 'mdi mdi-emoticon-happy', 'top', 'center');setTimeout(function () {
                        window.location.reload();
                        },1000);
                    }
                    }
                });
            }
            },
            cancel: {text: '取消'}
        }
        });
        return false;
    }
    // 编辑参数
    function param_tree(id) {
        iframe.createIframe('查看请求参数', '/test/usecase/template_tree_param.html?id='+id, {
        'width':'1180px',
        'height':'500px',
        'footer':'none',
        // 'function':'param_ajax'
        })
    }
    function param_ajax(){
        lightyear.loading('show');
        var _this = $('#myModal').find('iframe')[0];
        var bool  = _this.contentWindow.doSubimt();
        lightyear.loading('hide');
        if (bool !== false) {
        lightyear.notify(bool['msg'], 'success', 2000, 'mdi mdi-emoticon-happy', 'top', 'center');setTimeout(function () {
            window.location.reload();
        },1000);
        }
    }
    // 联动获取
    function getCity(val){
        $.getJSON('/common/get_api',{id:val},function(data){
            var html = '<option value="">请选择</option>';
            $.each(data['data'], function(i,item){
                html += '<option value="'+item.id+'">'+item.title+'</option>';
            });
        $('#api_id').html(html);
        $('#usecase_id').html('');
        });
    }
    
    function getUsecase(val){
        $.getJSON('/common/get_usecase',{id:val},function(data){
            var html = '<option value="">请选择</option>';
            $.each(data['data'], function(i,item){
                html += '<option value="'+item.id+'">'+item.title+'</option>';
            });
        $('#usecase_id').html(html);
        });
    }
    </script>



</body>
</html>