layui.config({
    base: "/js/"
}).use(['layer', 'jquery'], function () {
    var layer = layui.layer,
        $ = layui.jquery

    //堆垛机监控属性
    var width = 60;
    var height = 20;
    var STKheight = 40;
    var X = 60;
    var Y = 30;
    var Y2 = Y + (height + STKheight);
    var list = [];

    //立库和堆垛机俯视图
    function GetSTK(stk) {
        STK = stk;
        $.ajax({
            async: false,
            url: "/monitor/STKMonitor/GetRow",
            type: "post",
            data: { Roadway: stk },
            dataType: "json",
            success: function (data) {
                list = [];
                arr = data.data;
                arr.forEach(function (e) {
                    $('#canvas' + stk).drawRect({
                        layer: true,
                        name: "L" + e.Roadway + "" + e.Row + "1",
                        strokeStyle: '#000',
                        strokeWidth: 1,
                        x: X + (width * (e.Row - 1)), y: Y,
                        width: width,
                        height: height,
                    })
                        .drawText({
                            layer: true,
                            name: "T" + e.Roadway + "" + e.Row + "1",
                            fillStyle: '#9cf',
                            strokeStyle: '#25a',
                            strokeWidth: 2,
                            x: X + (width * (e.Row - 1)), y: Y,
                            fontSize: 20,
                            fontFamily: 'Verdana, sans-serif',
                            text: e.Row
                        });
                    $('#canvas' + stk).drawRect({
                        layer: true,
                        name: "L" + e.Roadway + "" + e.Row + "2",
                        strokeStyle: '#000',
                        strokeWidth: 1,
                        x: X + (width * (e.Row - 1)), y: Y2,
                        width: width,
                        height: height,
                    })
                        .drawText({
                            layer: true,
                            name: "T" + e.Roadway + "" + e.Row + "2",
                            fillStyle: '#9cf',
                            strokeStyle: '#25a',
                            strokeWidth: 2,
                            x: X + (width * (e.Row - 1)), y: Y2,
                            fontSize: 20,
                            fontFamily: 'Verdana, sans-serif',
                            text: e.Row
                        });
                    list.push("L" + e.Roadway + "" + e.Row + "1");
                    list.push("L" + e.Roadway + "" + e.Row + "2");
                    list.push("T" + e.Roadway + "" + e.Row + "1");
                    list.push("T" + e.Roadway + "" + e.Row + "2");
                });
                //堆垛机
                $('#canvas' + stk).addLayer({
                    type: 'image',
                    name: 'STK' + stk,
                    source: "/images/STK.gif",
                    x: X + (width * (1 - 1)) - (width * 0.7), y: Y + height - (height * 0.4),
                    width: width + (width * 0.5),
                    height: STKheight * 0.8,
                    fromCenter: false
                })
            }
        });

        setInterval(function () {
            var STKstate = 2;
            if (STKstate == 2) {
                $('#stk1')[0].innerText = '异常';
                $('#stk1').css('color', 'red');
            }
        }, 3000);
    }

    //堆垛机移动
    function STKMove(stk) {
        for (var i = 2; i < 7; i++) {
            $('#canvas' + stk).animateLayer('STK' + stk, {
                x: X + (width * (i - 1)) - (width * 0.7), y: Y + height - (height * 0.4),
            }, 1000);
        }
    }

    $(document).on("click", "#move", function () {
        for (var i = 1; i < 4; i++) {
            STKMove(i);
        }
    });

    //初始加载
    $(document).ready(function () {
        for (var i = 1; i < 4; i++) {
            GetSTK(i);
        }
    });
});