<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="UTF-8">
    <title>菜单权限</title>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}"/>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" th:href="@{/css/animate.min.css}">
    <link rel="stylesheet" th:href="@{/iconfont/iconfont.css}">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-datetimepicker.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-treeview.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap-switch.min.css">
</head>

<style>
    html, body {
        height: 100%;
        margin:0;padding:0;
        font-size: 12px;
    }
    div{
        -moz-box-sizing: border-box;  /*Firefox3.5+*/
        -webkit-box-sizing: border-box; /*Safari3.2+*/
        -o-box-sizing: border-box; /*Opera9.6*/
        -ms-box-sizing: border-box; /*IE8*/
        box-sizing: border-box; /*W3C标准(IE9+，Safari5.1+,Chrome10.0+,Opera10.6+都符合box-sizing的w3c标准语法)*/
    }

    .layui-table-view .layui-table {width:100%}
</style>

<body class="animated fadeIn">

    <div class="page-loading">
        <div class="rubik-loader"></div>
    </div>

    <div style="height: 100%">
        <div style="height: 100%">
            <div style="padding: 20px; background-color: #F2F2F2;height:100%;">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">监控事件树</div>
                            <div class="layui-card-body" id="toolbarDiv" style="width: 360px;!important;">
                                <ul id="menuTree" class="dtree" data-id="0" ></ul>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md9">
                        <div class="layui-card">
                            <div class="layui-card-header" id="card-header">菜单列表</div>
                            <div class="layui-card-body">
                                <table class="layui-hide" id="menu-table"  style="width: 360px;"></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <script type="text/html" id="column-toolbar">

        <shiro:hasPermission name="menu:delete">

            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="del">
                删除
            </button>
            <!--<button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="start">-->
                <!--启动-->
            <!--</button>-->
            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="stop">
                停止
            </button>
            <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="detail">
                图片详情
            </button>
        </shiro:hasPermission>
        <shiro:lacksPermission  name="menu:update, menu:delete">
            <i class="zadmin-icon zadmin-icon-wuquanxian zadmin-oper-area zadmin-red"></i>无权限
        </shiro:lacksPermission>

    </script>
    <script th:src="@{/lib/jquery/jquery.min.js}"></script>
    <script th:src="@{/lib/layui/layui.js}"></script>
    <script th:src="@{/js/common.js}"></script>
    <script th:src="@{/js/util/http_util.js}"></script>
    <!--<script src="../js/viewer.min.js"></script>-->
    <script src="../js/util/photoviewer.js"></script>
    <script src="../js/notice.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap/js/bootstrap-treeview.js"></script>
    <script src="../bootstrap/js/bootstrap-switch.min.js"></script>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/echarts-liquidfill.min.js"></script>
    <script src="../js/vue.js"></script>


    <script type="text/javascript" th:inline="javascript">
       var  draw;
        var parentMenuId = 0;
        var table;
        // 获取有没有删除, 更新, 和新增的权限.
        var hasMenuDelete = false;
        var hasMenuUpdate = false;
        var hasMenuAdd = false;

        $.get('/security/hasPermission/menu:update', function (data) {
            hasMenuUpdate = data.data;
        });
        $.get('/security/hasPermission/menu:delete', function (data) {
            hasMenuDelete = data.data;
        });
        $.get('/security/hasPermission/menu:add', function (data) {
            hasMenuAdd = data.data;
        });

        layui.config({
            base: '/lib/layui/extend/'
        }).use(['jquery', 'dtree', 'layer', 'table', 'element', 'tablePlug'], function () {
            var dtree = layui.dtree;
            var layer = layui.layer;
            table= layui.table;
            var tablePlug = layui.tablePlug;

            tablePlug.smartReload.enable(true);

            var DTree = dtree.render({
                elem: "#menuTree",
                url:"/depttree/videotree/"+getCookie("bjpt_deptId"),
                dataStyle: "layuiStyle",
                initLevel: 5,   // 初始打开节点级别
                method: "GET",
                dot: false,     // 圆点是否显示
                toolbar: true,  // 右键工具栏
                menubar: true,  // 树上方工具栏, 展开、收缩、刷新、搜索等
                toolbarShow: [],
                toolbarScroll: "#toolbarDiv",
                toolbarExt: [
                    {
                        toolbarId: "add",
                        icon: "dtree-icon-roundadd",
                        title: "添加子菜单",
                        handler: function (node, $div) {
                            add(node.nodeId);
                        }
                    },

                    {
                        toolbarId: "remove",
                        icon: "dtree-icon-roundclose",
                        title: "删除",
                        handler: function (node, $div) {
                            del(node.nodeId);
                        }
                    }
                ],
                response: {
                    statusCode: 0,
                    message: "msg",
                    treeId: "id",
                    parentId: "parentId",
                    title: "name"
                },
                toolbarFun:{
                    loadToolbarBefore: function(buttons, param, $div) {
                        if(param.level === "2") { // 如果是顶级节点, 则取消编辑和删除功能.
                            buttons.edit = "";
                            buttons.remove = "";
                        }
                        if (!hasMenuAdd) {
                            buttons.add = "";
                        }
                        if (!hasMenuDelete) {
                            buttons.remove = "";
                        }
                        if (!hasMenuUpdate) {
                            buttons.edit = "";
                        }
                        return buttons;
                    }
                }
            });

            table.render({
                elem: '#menu-table'
                , url: '/depttree/recordtype/list'
                , where: {
                    parentId:'-1'
                },
                page: true
                , cellMinWidth: 80
                , toolbar: '#toolbar'
                , smartReloadModel: true
                , cols: [
                    [
                        {type: 'numbers', title: 'ID', width: "5%"}
                        , {field: 'taskno', title: '任务编号', width: "15%"}
                        , {field: 'taskname', title: '任务名称', width: "15%"}
                        , {field: 'sendtype', title: 'AI类型', width: "15%"}
                        , {field: 'videoid', title: '设备编号', width: "15%"}
                        , {field: 'schedulerrule', title: '间隔时间（s）', width: "5%"}
                       , {title: '状态', field: 'frozenstatus', width: "15%"},
                        {title: '操作', fixed: 'right', align: 'center', toolbar: '#column-toolbar'}
                    ]
                ]
            });

            dtree.on("node('menuTree')", function (obj) {
                table.reload('menu-table', {
                    where: {
                        parentId: obj.param.nodeId
                    }
                });
                parentMenuId = obj.param.nodeId;
                $("#card-header").html("[" + obj.param.context + "]的子菜单");
            });

            table.on('toolbar', function (obj) {
                var event = obj.event;
                if (event === 'add') {
                    add(parentMenuId);
                }
            });


            function del(taskno) {
                layer.confirm("你确定删除数据吗？", {icon: 3, title: '提示'},
                    function (index) {
                        $.get('/depttree/delvideorecord/' + taskno+"/3", function (data) {
                            layer.close(index);
                            handlerResult(data, function () {
                                refresh();
                            });
                        });
                    }, function (index) {
                        layer.close(index);
                    }
                );
            }
            function detail(data) {
                //data 赋值给页面
                 $("#detectType").val(data.recordtype);
                 $("#videoid").val(data.videoid);
                 // $("#status").val(data.frozenstatus=="FROZEN"?"2":"1");
                 $("#name").val(data.taskname);
                 $("#schedulerRule").val(data.schedulerrule.replace('*','').replace('?',''));
                 $("#objectxy").val(data.objectx+","+data.objecty+","+data.objectw+","+data.objecth);
                 //查询图片
                 getsnapshot();
                 $("#myModal2").modal("show");
            }
            function refresh() {
                table.reload("menu-table");
                DTree.menubarMethod().refreshTree();
            }

            function add(parentId) {
                 $("#myModal2").modal("show");
            }
            $('#detectType').on('change',function(){

            if( $(this).val()=='12')
            {
                $("#threshold").show();
            }
            else {
                $("#threshold").hide();
            }
        });
            $('#tasktype').on('change',function(){
                if($(this).val()){
                    $("#tasktypename").text($("#tasktype option:selected").text())}
            });


        });
        function define () {
            if ($("#recordtype").val() == '') {
                return;
            }
            $.ajax({
                url: "/video/task",
                dateType: 'json',
                type: "POST",
                contentType: 'application/json',
                data: JSON.stringify(
                    {
                        detectType: $("#detectType").val(),
                        deviceId: $("#videoid").val(),
                        type: "0",
                        name:$("#name").val(),
                        params: {
                        schedulerRule:$("#schedulerRule").val(),
                            thresholdValue:0
                    },
                        area: [{
                        x: 1150,
                        y: 353,
                        w: 353,
                        h: 353,
                    }],
                        callBackUrl: "http://kvideo.51iwifi.com"
                    }
                    )
                    ,
                success: function (result) {
                    if (result.errorCode==0 ) {
                        info_new("事件已存在");
                        return;
                        }
                    if (result.errorCode==0) {
                        info_new("任务添加成功");
                        window.setTimeout("$('#info-warning-new').modal('hide')", 2000);
                        $("#myModal2").modal("hide");
                        table.reload("menu-table");
                    }
                }
            });
        }
function  getsnapshot()
{
    $.ajax({
        url: "/video/getSnapshot",
        dataType: "json",
        type: "post",
        contentType: 'application/json',
        data: JSON.stringify($("#videoid").val()),
        success: function (result) {
            if (result.status == 200) {
                draw.src = result.message.split(",")[0];
                draw.setImageBackground(result.message.split(",")[0]);
                init();
            }
            else{
                alert("超时！");
                init();
            }
        },
        error:function (result) {
            alert("超时！");
        }
    });
}
        $("#getwidth").on('click', function (e) {
            getsnapshot();
        });



    </script>



</body>

</html>