{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
    <link rel="stylesheet" href="{% static '/lib/font/fontIcon/iconfont.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/reset.css' %}">
    <style>
        /* 面包屑导航 */

        .breadcrumbs {
            /* line-height: 38px; */
            padding: 12px 0 12px 30px;
            border-bottom: 1px solid #dbdbdb;
        }

        .layui-breadcrumb>* {
            font-size: 16px;
        }

        /* 内容 */

        .tableDiv {
            display: table;
            width: 100%;
        }

        .tableDiv>div {
            display: table-cell;
        }

        .equipListDiv {
            width: 233px;
            /* height: 751px; */
            position: absolute;
        }

        .searchInp {
            text-align: center;
            margin: 10px 0;
            position: relative;
            height: 40px;
        }

        .searchInp>input {
            line-height: 30px;
            font-size: 14px;
            border: 1px solid #d9d9d9;
            width: 93%;
            padding-left: 5px;
            position: absolute;
            left: 10px;
        }

        .searchInp>button {
            position: absolute;
            top: 1px;
            right: 0;
            line-height: 31px;
            background: #bbb;
            color: #fff;
        }

        .searchInp>button:hover {
            background: #8B9AA3;
        }

        .searchInp>button span {
            padding: 0 10px;
        }

        .equipListUl>li {
            padding-left: 30px;
            color: #333;
            font-size: 14px;
            line-height: 30px;
            cursor: pointer;
            position: relative;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .equipListUl>li:before {
            position: absolute;
            content: '';
            width: 7px;
            height: 7px;
            background: #1e9fff;
            border-radius: 50%;
            margin-top: -3.5px;
            top: 50%;
            left: 15px;
        }

        .equipListUl>li.active:before {
            background: #3ab851
        }

        .equipListUl>li.active {
            background: #eee;
        }

        .equipListUl>li i {
            font-size: 12px;
            margin-right: 10px;
            color: #41baff;
        }

        .page {
            text-align: center;
            padding: 10px 0;
        }

        .page span {
            padding: 0 5px;
            vertical-align: middle;
        }

        .page span i {
            font-size: 28px;
            cursor: pointer;
            vertical-align: middle;
        }

        .page span i:hover {
            color: #1E9FFF;
        }


        /* 主体控制 */

        .ctrlDiv {
            min-height: 730px;
            margin-left: 240px;
            border-left: 1px solid #dbdbdb;
        }

        .ctrlDiv {
            padding-top: 20px;
        }

        .ctrlItem {
            box-shadow: 0px 2px 8px 0px rgba(61, 69, 152, 0.08);
            width: 90%;
            margin: auto;
            border-radius: 6px;
            margin-bottom: 30px;
        }

        .ctrlUp {
            line-height: 100px;
            height: 100px;
            background: #22a3ed;
            border-radius: 6px 6px 0 0;
            color: #fff;
        }

        .ctrlUp>div {
            text-indent: 10%;
        }

        .ctrlUp>.ctrlName i {
            margin-right: 20px;
        }

        .ctrlUp>.ctrlName i.online {
            color: #3ab851;
        }

        .ctrlUp>.ctrlName i.offline {
            color: #b9b9b9;
        }

        .checkCtrlName {
            position: absolute;
            right: 25px;
            top: 5px;
            line-height: 33px;
            width: 28px;
            font-size: 22px;
            cursor: pointer;
        }

        .ctrlDown {
            height: 70px;
            line-height: 53px;
            border-radius: 0 0 6px 6px;
            padding-left: 20px;
        }

        /* 控制按钮 */

        .isonlineicon {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 7px;

        }

        .isonlineicon.active {
            background: #02fa02;
            animation: 1s ease 0s infinite normal none running myfirst01;
        }

        .isonlineicon {
            background: #909090;
            animation: 1s ease 0s infinite normal none running myfirst02;
        }

        @keyframes myfirst01 {
            0% {
                -moz-box-shadow: 0px 0px 6px 1px #02fa02;
                box-shadow: 0px 0px 6px 1px #02fa02;
            }
            100% {
                -moz-box-shadow: 0px 0px 6px 1px #02fa02;
                box-shadow: 0px 0px 6px 1px #02fa02;
            }

        }

        @keyframes myfirst02 {
            0% {
                -moz-box-shadow: 0px 0px 6px 1px #909090;
                box-shadow: 0px 0px 6px 1px #909090;
            }
            100% {
                -moz-box-shadow: 0px 0px 6px 1px #909090;
                box-shadow: 0px 0px 6px 1px #909090;
            }

        }

        .ctrlLoading {
            position: absolute;
            right: 24px;
            bottom: 39px;
        }

        .title {
            padding: 0 20px 20px;
        }

        .widget-title {
            position: relative;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title::after {
            position: absolute;
            content: '';
            left: 0;
            top: 9px;
            height: 15px;
            border-left: 5px solid #23a3ee;
            padding-left: 10px;
            font-size: 16px;
            padding: 5px 0 5px 10px;
        }

        .widget-title h2 {
            font-weight: 700;
            line-height: 33px;
        }

        .widget-title h2 span {
            font-size: 13px;
            font-weight: 100;
            margin-left: 20px;
            color: #333;
        }

        .clearfix {
            zoom: 1;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 导航 -->
        <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a href="info_pub" target="BoardRight">首页</a>
                <a>
                    <cite>控制模块</cite>
                </a>
            </span>
        </div>
        <!-- 内容 -->
        <div>
            <div class="">
                <div class="equipListDiv">
                    <div class="searchInp">
                        <input type="text" id="searchImei" autocomplete="off" placeholder="请输入设备ID搜索">
                        <button id="searchBtn">
                            <span class="iconfont"><i class="layui-icon layui-icon-search"></i></span>
                        </button>
                    </div>
                    <ul class="equipListUl">
                    </ul>
                    <div class="page">
                        <span onclick="gotofirstpage()">
                            <i class="iconfont">&#xe661;</i>
                        </span>
                        <span onclick="changePage('jian')">
                            <i class="iconfont">&#xe728;</i>
                        </span>
                        <span>1</span>
                        <span>/</span>
                        <span id="totelpage">3</span>
                        <span onclick="changePage('add')">
                            <i class="iconfont">&#xe601;</i>
                        </span>
                    </div>
                </div>
                <div class="ctrlDiv">
                    <div class="title">
                        <div class="widget-title">
                            <button type="button" class="layui-btn  layui-btn-normal layui-btn-sm fr" onclick="qxzDownCtrlFun()">刷新</button>
                            <h2>控制开关
                                <span id="Uptime"></span>
                            </h2>
                        </div>
                    </div>
                    <div>
                        <div class="layui-row controlInfo" id="ctrlBox">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" id="qxzPhotoId">

    <script src="{% static '/lib/js/jquery-2.1.4.min.js'%}"></script>
    <script src="{% static '/lib/layui/layui.js'%}"></script>
    <script src="{% static '/js/backstageNet/common.js'%}"></script>
    <script>
        var currpage = 1;
        var layer, element, form;
        layui.use(['element', 'layer', 'form'], function () {
            element = layui.element;
            layer = layui.layer;
            form = layui.form;
            getEquipList(1, '');
            // loadProject('123456')
            // 搜索
            $('#searchBtn').on('click', function () {
                getEquipList(1, $('#searchImei').val())
            });
            $('#searchImei').on('keyup', function (event) {
                if (event.keyCode == 13) {
                    getEquipList(1, $('#searchImei').val())
                }
            })

        })
        // 首页
        function gotofirstpage() {
            currpage = 1;
            $('#currentpage').html(1);
            getEquipList(1, $('#searchImei').val())
        }
        function changePage(symbol) {
            var totelpage = Number($('#totelpage').html());
            if (symbol == 'add') {
                if (currpage < totelpage) {
                    currpage++;
                    $('#currentpage').html(currpage);
                    $('addPage').attr('disable', 'false')
                } else {
                    $('addPage').attr('disable', 'true')
                    return false;
                }
            } else {
                if (currpage > 1) {
                    currpage--;
                    $('#currentpage').html(currpage);
                    $('jianPage').attr('disable', 'false')
                } else {
                    $('jianPage').attr('disable', 'true')
                    return false;
                }
            }
            getEquipList(currpage, $('#searchImei').val())

        }
        // 加载数据列表
        function getEquipList(page, filter) {
            $.ajax({
                url: 'qxz_page',
                type: 'get',
                dataType: 'json',
                data: {
                    page: page,
                    f_id: filter
                },
                beforeSend: function (XMLHttpRequest) {
                    loadingFlag = layer.load();
                },
                success: function (data) {
                    layer.close(loadingFlag);
                    if (data.nums) {
                        var html = '';
                        var msg = data.ids
                        var pagecount = Math.ceil(data.nums / 10);
                        for (var i = 0; i < msg.length; i++) {
                            if (msg[i].equip_name) {
                                var equip_name = '设备：' + msg[i].equip_name;
                            } else {
                                var equip_name = '设备：' + msg[i].equip_id;
                            }
                            // var equip_name = msg[i].equip_name?'---设备名：'+msg[i].equip_name:'';
                            html += '<li title="设备' + msg[i].equip_id + '"id="' + msg[i].equip_id + '">' + equip_name + '</li>';
                            // html += '<a href="javascript:;" title="设备' + msg[i].equip_id + '" class="text-overflow" id="' + msg[i].equip_id + '" data-pid="322">' + equip_name + '</a>'
                        }
                        $('.equipListUl').html(html);
                        $('.page').show();
                        $('#totelpage').html(pagecount)
                        // 菜单栏
                        $(".equipListUl li:eq(0)").addClass('active');
                        loadProject(msg[0].equip_id);
                        $('#qxzPhotoId').val(msg[0].equip_id)
                    } else {
                        $('.page').hide();
                        var html = '<a href="javascript:;" class="text-overflow nulldata" data-pid="322">暂未设备</a>'
                        $('#firstpane .menu_body').html(html);
                    }
                },
                error: function (type) {
                    layer.close(loadingFlag);
                    // console.log(type)
                }
            })
        }
        $(".equipListUl").on('click', 'li', function () {
            $(".equipListUl li").removeClass("active");
            $(this).addClass("active");
            var facId = $(this).attr("id");
            if (facId && facId != null && facId != "") {
                loadProject(facId);
                $('#qxzPhotoId').val(facId);
            }
        });

        function loadProject(facId) {
            // var qxz_switch = "[{'status': 0, 'JK': 0}, {'status': 0, 'JK': 1}]";
            var html = '';
            $.ajax({
                url: 'qxzcontrol',
                type: 'post',
                data: {
                    e_id: facId
                },
                dataType: 'json',
                success: function (data) {
                    addCtrlBtn(data.qxz_switch, data.switch_name)
                },
                error: function (type) {

                }

            })
        }
        // 控制按钮
        function addCtrlBtn(data, switch_name) {
            if (data) {
                var data = eval('(' + data + ')');
                var ctrl_name = eval('(' + switch_name + ')');
                // $('.qxzDownCtrl').show();
            } else {
                var data = []
                // $('.qxzDownCtrl').hide();
            }
            if (data.length) {
                var html = '';
                for (var i = 0; i < data.length; i++) {
                    if (data[i].status == 0) {
                        var curClass = '';
                    } else {
                        var curClass = 'active';
                    }
                    if (data[i].status == 0) {
                        var curChecked = ''; //关
                    } else {
                        var curChecked = 'checked';
                    }
                    if (ctrl_name[i].name != '') {
                        var switch_name = ctrl_name[i].name;
                    } else {
                        var switch_name = '开关' + ctrl_name[i].JK;
                    }
                    html += '<div class="layui-col-xs6 layui-col-md3"><div class="grid-demo ctrlItem"><div class="ctrlUp">' +
                        '<input type="hidden" value="' + data[i].JK + '" class="currStutas"><div class="ctrlName"><span class="isonlineicon ' + curClass + ' "></span><span class="numName">' + switch_name + '</span>' +
                        '</div><div class="checkCtrlName setName"><i class="layui-icon layui-icon-set"></i>  </div></div><div class="ctrlDown">' +
                        '<form class="layui-form" action=""><input type="checkbox" ' + curChecked + ' name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">' +
                        '</form></div></div></div>';
                    if (i == data.length - 1) {
                        $('#ctrlBox').html(html);
                        form.render();
                        //监听指定开关
                        form.on('switch(switchTest)', function (data) {
                            // console.log($(this).parents('.ctrlItem'))
                            var _this = this;
                            $(this).parents('.ctrlItem').find('.ctrlLoading').remove()
                            $(this).attr('disabled', true);
                            $(this).parents('.ctrlItem').append('<div class="ctrlLoading"><img src="http://www.nyzhwlw.com/images/loading.gif" width="24">操作中...</div>');
                            var currWay = $(this).parents('.ctrlItem').find('.currStutas').val();
                            var imei = $('#qxzPhotoId').val();
                            if ($(this).is(":checked")) {
                                var oldStatus = 0;
                                var currStutas = 1;
                            } else {
                                var oldStatus = 1;
                                var currStutas = 0;
                            }
                            $.ajax({
                                url: 'qxz_mqtt',
                                type: 'post',
                                data: {
                                    'req': 'set',
                                    'imei': imei,
                                    'way': currWay,
                                    'switch': currStutas
                                },
                                success: function (data) {
                                    $(_this).attr('disabled', false);
                                    $(_this).parents('.ctrlItem').find('.ctrlLoading').html('');
                                    if (currStutas) {
                                        $(_this).parents('.ctrlItem').find('.isonlineicon').addClass('active')
                                    } else {
                                        $(_this).parents('.ctrlItem').find('.isonlineicon').removeClass('active')
                                    }
                                },
                                error: function (type) {
                                    $(_this).parents('.ctrlItem').find('.ctrlLoading').html('<span style="color:red">操作失败</span>');
                                    $(_this).attr('disabled', false);
                                    if (oldStatus) {
                                        $(_this).prop('checked', true);
                                        $(_this).parents('.ctrlItem').find('.isonlineicon').addClass('active')
                                    } else {
                                        $(_this).prop('checked', false);
                                        $(_this).parents('.ctrlItem').find('.isonlineicon').removeClass('active')
                                    }
                                    form.render();
                                }
                            })
                        });
                    }
                }
            } else {
                $('#ctrlBox').html('<div style="text-align:center">空</div>');
            }
        }
        // 下发控制名称
        $('#ctrlBox').on('click', '.setName', function () {
            var _this = this;
            var ele = $(this).parents('.ctrlItem').find('.numName');
            var currWay = $(this).parents('.ctrlItem').find('.currStutas').val();

            $(this).parents('.ctrlItem').find('.ctrlLoading').remove()
            layui.use('layer', function () {
                var layer = layui.layer;
                layer.prompt({ title: '自定义名称', formType: 0, value: ele.html(), maxlength: 10 }, function (text, index) {
                    if (text == ele.html()) {
                        return false;
                        layer.close(index);
                        layer.msg('演示完毕！您的口令：' + text);
                        ele.html(text)
                    }
                    $.ajax({
                        url: 'qxz_switch_name',
                        type: 'post',
                        data: {
                            'imei': $('#qxzPhotoId').val(),
                            'way': currWay,
                            'sw_name': text
                        },
                        success: function (data) {
                            if (data == 0) {
                                ele.html(text)
                                $(_this).parents('.ctrlItem').find('.ctrlLoading').remove()
                            } else {
                                $(_this).parents('.ctrlItem').append('<div class="ctrlLoading"><span style="color:red">设置名称失败</span></div>');
                            }
                            layer.close(index);
                        },
                        error: function (type) {
                            $(_this).parents('.ctrlItem').find('.ctrlLoading').html('<span style="color:red">操作失败</span>');
                            $(_this).attr('disabled', false);
                            if (oldStatus) {
                                $(_this).prop('checked', true);
                                $(_this).parents('.ctrlItem').find('.isonlineicon').addClass('active')
                            } else {
                                $(_this).prop('checked', '');
                                $(_this).parents('.ctrlItem').find('.isonlineicon').removeClass('active')
                            }
                        }
                    })
                });
            });
        })
        // 获取最新控制按钮状态
        function qxzDownCtrlFun() {
            $.ajax({
                url: 'qxz_mqtt',
                type: 'post',
                data: {
                    'req': 'conf', //
                    'imei': $('#qxzPhotoId').val(),
                },
                beforeSend: function () {
                    loadFlage = layer.load();
                },
                complete: function () {
                    setTimeout(function () {
                        layer.close(loadFlage);
                    }, 2000)
                },
                success: function (data) {
                    setTimeout(function () {
                        loadProject($('#qxzPhotoId').val())
                    }, 2000)
                }
            })
        }

    </script>
</body>

</html>