<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>舰R脚本管理器</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

</head>

<body>

<div class="myDiy">
    <blockquote class="layui-elem-quote">舰R脚本管理器:<span id="taskStatus"></span><br/><br/><span id="taskName">当前无任务</span><br/><br/><span id="runIndex"></span><br/><br/><span id="log"></span>
    </blockquote>
    <button class="layui-btn layui-btn-lg layui-btn-normal" onclick="createTask()">创建任务</button>
    <button class="layui-btn layui-btn-lg layui-btn-normal" id="createDevice">选择设备
        <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
    <blockquote class="layui-elem-quote">
        调用设备:<span id="deviceName"></span><br>
    </blockquote>
    <br/><br/><br/>

    <div class="layui-bg-gray layui-row layui-col-space15" id="card" style="padding: 30px;">
    </div>
</div>

</body>
<script src="layui/layui.js"></script>
<script src="layui/jquery-3.2.1.js"></script>
<script>
    let homeUrl="";
    let device;
    let deviceModel=[];

    function createTask() {
        if(device===undefined){
            layer.msg('请选择设备')
            return
        }
        layer.prompt({
            formType: 2,
            value: '{\n' +
                '    "title":"",\n' +
                '    "script":[\n' +
                '        {\n' +
                '            "title":"",\n' +
                '            "activity":"map|attack|formationType#{0-4}|dialog_go|dialog_back|dialog_assets",\n' +
                '            "nextWaitTime": 0,\n' +
                '            "randomNextWaitTime": 0\n' +
                '        }\n' +
                '    ]\n' +
                '}',
            title: '创建任务',
            maxlength: 99999,
            area: ['800px', '350px'] //自定义文本域宽高
        }, function (value, index, elem) {
            $.post(homeUrl+"/jianr/task/add.do", {task: value}, function (json) {
                layer.msg(json.msg)
            })
            layer.close(index);
        });
    }

    function runTask(name,title) {
        if(device===undefined){
            layer.msg('请选择设备')
            return
        }

        $.post(homeUrl+"/jianr/run.do", {task: name,device:device.title,modelName:title}, function (json) {
            layer.msg(json.msg)
        })
    }

    function stopTask() {
        $.post(homeUrl+"/jianr/stop.do", function (json) {
            layer.msg(json.msg)
        })
    }

    function removeTask(name) {
        $.post(homeUrl+"/jianr/task/remove.do", {task: name}, function (json) {
            layer.msg(json.msg)
        })
    }
    function showDevice() {
        if(isSelectDevice()){
            layer.msg("当前未选择设备")
        }else{
            layer.prompt({
                formType: 2,
                value: JSON.stringify(device),
                title: '查看设备',
                maxlength: 99999,
                area: ['800px', '350px'] //自定义文本域宽高
            }, function (value, index, elem) {
                $.post(homeUrl+"/jianr/device/edit.do", {device: value,oldDevice:device.title}, function (json) {
                    layer.msg(json.msg)
                })
                layer.close(index);
            });
        }
    }
    function delDevice() {

    }
    function isSelectDevice() {
        return device===undefined;
    }
    function getStatus() {
        $.post(homeUrl+"/jianr/status.do", function (json) {
            if(json.data.status){
                $('#taskStatus')[0].innerHTML="运行"
                $('#taskStatus').css('color','#5C962C')
                $('#taskName')[0].innerHTML='执行次数: '+json.data.runIndex;
                $('#runIndex')[0].innerHTML='当前正在执行: '+json.data.taskName;
                $('#log')[0].innerHTML=json.data.log
            }else{
                $('#taskStatus')[0].innerHTML="停止"
                $('#taskStatus').css('color','#FF5722')
            }
            setTimeout(function () {
                getStatus()
            },1000)

        })
    }
    layui.use('dropdown', function(){
        let dropdown = layui.dropdown

        function createCard(name) {
            let html = '<div class="layui-card layui-col-md3 layui-col-lg-offset1"><div class="layui-card-header">' + name
                + '</div><div class="layui-card-body">' +
                '<button class="layui-btn layui-btn-radius layui-btn-normal" id="runTask_'+name+'" ><i class="layui-icon">&#xe652;</i>运行 <i class="layui-icon layui-icon-down layui-font-12"></i></button><br/><br/><button class="layui-btn layui-btn-radius layui-btn-warm" onclick="stopTask()"><i class="layui-icon">&#xe651;</i>停止</button><br/><br/><button class="layui-btn layui-btn-radius layui-btn-danger" onclick="removeTask(\'' + name + '\')"><i class="layui-icon">&#xe64d;</i>删除</button></div></div>';
            $('#card').append(html)
            dropdown.render({
                elem: '#runTask_'+name //可绑定在任意元素中,此处以上述按钮为例
                ,data: deviceModel
                ,id: 'runTask_'+name
                //菜单被点击的事件
                ,click: function(obj){
                    console.log(obj);
                    if(obj.title==='查看'){
                        $.post(homeUrl+"/jianr/task/get.do",{task:name},function (json) {
                            layer.prompt({
                                formType: 2,
                                value: json.data,
                                title: '脚本内容',
                                area: ['800px', '350px'] //自定义文本域宽高
                            }, function(value, index, elem){
                                layer.close(index);
                            });
                        })


                    }else{
                        runTask(name,obj.title)
                    }
                }
            });
        }
        $.get(homeUrl+"/jianr/task/list.do", function (json) {

            json.data.forEach(function (item) {
                    createCard(item)
                }
            )
        })
        $.get(homeUrl+"/jianr/device/list.do",function (json) {
            let devices=json.data;
            devices.push({type:'-'})
            devices.push({
                title: '添加设备',
                name:"addDevice"
                ,href: '#'
            })

            dropdown.render({
                elem: '#createDevice' //可绑定在任意元素中,此处以上述按钮为例
                ,data: devices
                ,id: 'createDevice'
                //菜单被点击的事件
                ,click: function(obj){
                    if(obj.name==='addDevice'){
                        layer.prompt({
                            formType: 2,
                            value: '{\n' +
                                '    "deviceId":"",\n' +
                                '    "title":"",\n' +
                                '    "androidDevice":{\n' +
                                '        "height":0,\n' +
                                '        "width":0\n' +
                                '    },\n' +
                                '    "deviceDisplay":[\n' +
                                '        {\n' +
                                '        "title":"",\n' +
                                '            "start":{\n' +
                                '                "x":0,\n' +
                                '                "y":0,\n' +
                                '                "enableRandomX":false,\n' +
                                '                "enableRandomY":false,\n' +
                                '                "absRandomX":false,\n' +
                                '                "absRandomY":false,\n' +
                                '                "randomNumX":0,\n' +
                                '                "randomNumY":0\n' +
                                '            },\n' +
                                '            "end":{\n' +
                                '                "x": 0,\n' +
                                '                "y": 0,\n' +
                                '                "enableRandomX": false,\n' +
                                '                "enableRandomY": false,\n' +
                                '                "absRandomX": false,\n' +
                                '                "absRandomY": false,\n' +
                                '                "randomNumX": 0,\n' +
                                '                "randomNumY": 0\n' +
                                '            }\n' +
                                '        }\n' +
                                '    ]\n' +
                                '}',
                            title: '添加设备',
                            maxlength: 99999,
                            area: ['800px', '350px'] //自定义文本域宽高
                        }, function (value, index, elem) {
                            $.post(homeUrl+"/jianr/device/add.do", {device: value}, function (json) {
                                layer.msg(json.msg)
                            })
                            layer.close(index);
                        });
                    }else{
                        console.log(obj)
                        if(obj.data==='select'){
                            device=obj.device;
                            device.deviceDisplay.forEach(function (item){
                                deviceModel.push({
                                    title:item.title
                                })
                                deviceModel.push({type: '-'})

                            })
                            deviceModel.push({
                                title:"查看",
                            })
                            $('#deviceName')[0].innerHTML=obj.device.title;
                        }else if (obj.data==='edit'){
                            showDevice()
                        }else if (obj.data==='del'){
                            delDevice()
                        }else if (obj.data==='connect'){
                            $.post(homeUrl+"/jianr/device/connect.do",{device:obj.device.deviceId},function (json) {
                                layer.msg(json.msg)
                            })
                        }

                    }
                }
            });

        })

    });

    window.onload = function init() {

        getStatus()
    }
</script>
<style>
    .myDiy {
        width: 40%;
        height: 300px;
        margin-top: 10px;
        margin-left: 25%;
    }

    .button {
        width: 100px;
        height: 100px;
        font-size: 1em;
    }

</style>

</html>