var parent = window.parent;
var layer;

(function () {

    layui.use(['laypage', 'layer', 'laydate'], function () {
        layer = layui.layer;
    });

    var svg = document.querySelector('#menu')
    var items = svg.querySelectorAll('.item')
    var trigger = document.querySelector('.menu-trigger')
    var open = false
    var angle = 45
    var playComplete = true

    function show() {
        open = true
        var tl = new TimelineLite()
        tl.to(items, 0.2, {scale: 1, ease: Back.easeOut.config(4)}, 0.1)

        for (var i = 0; i < items.length; i++) {
            tl.to(items[i], 0.7, {rotation: -i * angle + 'deg', ease: Bounce.easeOut}, 0.35)
        }

        trigger.classList.add('active')
        svg.style.pointerEvents = 'auto'

        // close the nav when document is clicked
        document.addEventListener('click', hide)
    };

    function hide() {
        open = false
        var tl = new TimelineLite()
        for (var i = 0; i < items.length; i++) {
            tl.to(items[i], 0.3, {rotation: 0, ease: Circ.easeOut}, 0.05)
        }

        tl.to(items, 0.3, {scale: 0, ease: Back.easeIn}, 0.3)
        tl.call(function () {
            trigger.classList.remove('active')
        })
        svg.style.pointerEvents = 'none'

        // remove document click event
        document.removeEventListener('click', hide)
    };

    function toggle(evn) {
        if (!event) var event = window.event
        event.stopPropagation()
        open ? hide() : show()
    };

    // set up event handler
    trigger.onclick = toggle
    svg.onclick = function (e) {
        e.stopPropagation()
    };

    // 更新按钮点击
    document.querySelector('.circle-menu .update').onclick = function () {
        layer.msg("暂不支持该功能！");

    };

    // 透传按钮点击
    document.querySelector('.circle-menu .passthrough').onclick = function () {
        layer.msg("暂不支持该功能！");
        // layer.open({
        //     type: 1,
        //     skin: 'circle-menu-layer layer-passthrough-wrap',
        //     shade: 0.65,
        //     resize: false,
        //     move: false,
        //     area: ['600px', '500px'],
        //     title: '命令透传',
        //     content:
        //         '<div class="layer-passthrough">' +
        //         '<label>响应信息</label>' +
        //         '<div class="layer-passthrough__str notedit" id="orderResposeStr">不可编辑文本</div>' +
        //         '<label>输入指令：</label>' +
        //         '<div class="layer-passthrough__str"><textarea placeholder="请输入“透传指令”" id="tranValue"></textarea></div>' +
        //         '</div>'
        //     ,
        //     btn: ['透传', '关闭'],
        //     btnAlign: 'c',
        //     yes: function () {
        //         transCommand(deviceId);
        //     },
        //     btn2: function () {
        //         layer.closeAll();
        //     }
        // });
    }

    // 动作按钮点击
    document.querySelector('.circle-menu .action').onclick = function () {
        console.log(category);
        // renderActionInfo();
        if(category == "2002" || category == "2003" || category == "2017"){
            //layer.alert("暂不支持远程操作！");
            // loadDeviceActionList(deviceId, companyId);
            renderActionInfo();
        }else {
            layer.msg("暂不支持该功能！");
        }
    };

    // 定时按钮点击
    document.querySelector('.circle-menu .timing').onclick = function () {
        layer.msg("暂不支持该功能！");
       // layer.open({
       //      type: 1,
       //      skin: 'circle-menu-layer layer-timing-wrap',
       //      shade: 0.65,
       //      resize: false,
       //      move: false,
       //      area: ['600px', '450px'],
       //      title: '定时信息',
       //      content: "<table class=\"layui-table layer-timing\" style='color: #FFFFFF'>" +
       //          "<thead>" +
       //          "<tr>" +
       //          "<th>定时器说明</th>" +
       //          "<th>动作名称</th>" +
       //          "</tr>" +
       //          "</thead>" +
       //          "<tbody>" +
       //
       //          // "<tr>\n" +
       //          // "<td>每天下午17：30分执行</td>" +
       //          // "<td>关闭</td>" +
       //          // "</tr>" +
       //          // "<tr>" +
       //          // "<td>每天下午17：30分执行</td>" +
       //          // "<td>关闭</td>" +
       //          // "</tr>" +
       //          // "<tr>" +
       //          // "<td>每天下午17：30分执行</td>" +
       //          // " <td>关闭</td>" +
       //          // " </tr>" +
       //
       //          "</tbody>" +
       //          "</table>",
       //      btn: ['关闭'],
       //      btnAlign: 'c',
       //      yes: function () {
       //          layer.closeAll();
       //      }
       //  });
    }

})();



executeAction = function(actionId,newValue) {
    layer.msg("开始执行动作……");
    var data = {"deviceId": deviceId, "actionId": actionId, "newValue":newValue};
    $.ajax({
        type: 'POST',
        url: '../../basic/device/control/do-action',
        dataType: 'JSON',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function (result) {
            layer.close(1);
            if ("0000" == result.code) {
                layer.msg("动作指令发送成功……");
            } else {
                layer.msg(result.msg);
            }
        }
    });
};

//根据业务设备ID更新监控信息
function queryAttr(deviceId) {
    var data = {"deviceId": deviceId};
    $.ajax({
        type: 'POST',
        url: '../../basic/device/control/query-attr',
        dataType: 'JSON',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function (result) {
            // console.log(result);
            layer.close(1);
            if ("0000" == result.code) {
                layer.msg("指令发送成功……");
            } else {
                layer.msg(result.msg);
            }
        }
    });
};
//根据业务设备ID更新监控信息
function transCommand(deviceId) {
    var tranValue = $("#tranValue").val();
    var data = {"deviceId": deviceId,"tranValue":tranValue};
    $.ajax({
        type: 'GET',
        url: 'control/trans-command',
        dataType: 'JSON',
        contentType: 'application/json',
        data: data,
        success: function (result) {
            $("#orderResposeStr").html(JSON.stringify(result));
        }
    });
};
function loadDeviceActionList(deviceId, companyId) {
    var data = {"companyId": companyId, "deviceId": deviceId};
    $.ajax({
        type: 'POST',
        url: '../../basic/device/control/list-action',
        dataType: 'JSON',
        contentType: 'application/json',
        data: JSON.stringify(data),
        success: function (result) {
            if (result.code != "0000") {
                layer.alert(result.msg);
                return;
            }
            var list = result.data;
            renderActionButton(list);
        }
    });
}

function renderActionButton(list) {
    var parent = window.parent;
    var config = {
        type: 1,
        skin: 'circle-menu-layer layer-action-wrap',
        shade: 0.65,
        resize: false,
        move: true,
        area: ['600px', '400px'],
        title: '设备动作',
        content:
            '<div class="layer-action">' +

            '<div class="layer-action__btns">' +
            '<span class="layer-action__btn">动作1</span>' +
            '<span class="layer-action__btn">动作2</span>' +
            '<span class="layer-action__btn">动作3</span>' +
            '</div>' +

            '<div  class="layer-action__btns">' +
            '<span class="layer-action__btn">动作4</span>' +
            '<span class="layer-action__btn">动作5</span>' +
            '<span class="layer-action__btn">动作6</span>' +
            '</div>' +

            '<div class="layer-action__btns">' +
            '<span class="layer-action__btn">动作7</span>' +
            '<span class="layer-action__btn">动作8</span>' +
            '<span class="layer-action__btn">动作9</span>' +
            '</div>' +

            '</div>'
        ,
        btn: ['关闭'],
        btnAlign: 'c',
        yes: function () {
            layer.closeAll();
        }
    };

    //根据配置动作重新调整内容
    var content = '<div class="layer-action">';
    if (list) {
        var height = 350;
        var tag = 0;
        list.forEach(function (data, index) {
            if (tag == 0) {
                if (index > 5) {
                    height += 64;
                }
                content += '<div class="layer-action__btns">';
            }
            if(companyId == "3126"){
                content += '<span class="layer-action__btn layui-btn" ' +
                    'onClick="confirm(\'' + data.id + '\',\'' + data.passcode + '\',\'' + data.actionName + '\')">' + data.actionName + '</span>';
            }else{
                content += '<span class="layer-action__btn layui-btn" ' +
                    'onClick="executeAction(\'' + data.id + '\',\'' + data.targetValue + '\')">' + data.actionName + '</span>';
            }

            // content += '<span class="layer-action__btn layui-btn" ' +
            //     'onClick="confirm(\'' + data.id + '\',\'' + data.passcode + '\',\'' + data.actionName + '\')">' + data.actionName + '</span>';

            tag++;
            if (tag == 3) {
                content += '</div>';
                tag = 0;
            }
            if (0 != tag && index == (list.length - 1)) {
                content += '</div>';
            }
        });
        content += '</div>';
        config.content = content;
        config.area = ["600px", (height + "px")];
        layer.open(config);
    }
}


function confirm(id, passcode, name) {
    var content = "<div class=\"layer-action\" style='color: white;'>";
    if(category == "2002" && passcode == "11"){
        content += "<div class=\"layer-action__btns\"><span class=\"layer-action__btn\">请输入温度值</span></div>";
        content += "<div class=\"layer-action__btns\"><input type='text' id='text' style='width: 200px;height: 30px;' placeholder='16~30'></div>";
        content += "<div class=\"layer-action__btns\"><span class=\"layer-action__btn\" id='msg'></span></div>";
    }else{
        content += "<div class=\"layer-action__btns\"><span class=\"layer-action__btn\">确认执行操作“ " + name + " ”吗？</span></div>";
    }
    content += "</div>";

    var config = {
        type: 1,
        skin: 'circle-menu-layer layer-action-confirm',
        shade: 0.65,
        resize: false,
        move: true,
        area: ['480px', '300px'],
        title: '提示',
        content: content,
        btn: ['确认','关闭'],
        btnAlign: 'c',
        yes: function () {
            if(category == "2002" && passcode == "11"){
                var value = $("#text").val();
                if(value >= 16 && value <= 30){
                    layer.closeAll();
                    $("#msg").text("");
                    executeAction(id,value);
                }else {
                    $("#msg").text("提示：空调温度设定范围是16~30！");
                }
            }else {
                layer.closeAll();
                executeAction(id,0);
            }
        },
        btn2: function(index, layero){
            layer.close(1);
            $("#msg").text("");
        }
    };

    layer.open(config);
}


function renderActionInfo(){
    action();
}