{% 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>生产方式设置</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' %}">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet" />
    <style>
        /* 面包屑导航 */

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

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

        /* 内容 */

        .floatDiv {
            overflow: hidden;
        }

        .floatDiv>div {
            float: left;
        }


        /* 主体控制 */

        /* .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%; */
            line-height: 30px;
        }

        .bySwitchName>img {
            width: 40px;
        }

        .switchName,
        .bySwitchName {
            text-indent: 20px;
        }

        .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-right: 20px;
            text-align: right;
        }

        /* 控制按钮 */

        .ctrlLoading {
            position: absolute;
            left: 30px;
            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;
        }

        .warnEleName {
            margin-top: 9px;
            max-width: 200px;
            overflow: hidden;
        }

        .bySwitchName>span {
            display: inline-block;
            max-width: 120px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-indent: 0;
        }

        .warnEleVal {
            margin-left: 40%;
        }

        /* select2 */

        .select2-container .select2-selection--single {
            height: 38px;
            border: 1px solid #e6e6e6;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 38px;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 38px;
        }

        .currEquip {
            padding: 0 0 20px 30px;
        }

        /* 阈值弹出框 */

        .openModel {
            padding-top: 20px;
        }

        #hintDiv>span {
            color: red;
        }
        .openModel{
            display: none;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 导航 -->
        <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a target="BoardRight">首页</a>
                <a>
                    <cite>生产方式设置</cite>
                </a>
            </span>
        </div>
        <!-- 内容 -->
        <div>
            <div class="">
                <div class="ctrlDiv">
                    <div class="title">
                        <div class="widget-title">
                            <h2>控制开关
                                <span id="Uptime"></span>
                            </h2>
                        </div>

                    </div>
                    <div>
                        <div class="currEquip">
                            当前设备： {% if equip_list|length %}
                            <select class="currEquipSelect" name="state">
                                {% for equip in equip_list %}
                                <option value="{{equip.equip_id}}">{{equip.equip_id}}</option>
                                {% endfor %}
                            </select>
                            {% else %} 当前暂无设备 {% endif %}
                        </div>
                        <div class="layui-row controlInfo" id="getthresholdDiv">
                            <div class="layui-col-xs6 layui-col-md3">
                                <div class="grid-demo ctrlItem">
                                    <div class="ctrlUp">
                                        <input type="hidden" value="" class="currStutas">
                                        <div class="ctrlName">
                                            <p class="switchName">开关一</p>
                                            <div class="clearfix">
                                                <div class="fl warnEleName">
                                                    <div class="bySwitchName">
                                                        <span title="111">空气湿度</span>
                                                        <img src="{% static 'imgs/devWhite/icon_101.png'%}" alt="">
                                                    </div>
                                                </div>
                                                <div class="warnEleVal">
                                                    <p>最大值：90</p>
                                                    <p>最小值：10</p>
                                                </div>
                                            </div>
                                        </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>

                        </div>
                    </div>
                    <!-- 设置阈值弹出框 -->
                    <div class="openModel" id="openModel">
                        <div>
                            <form class="layui-form" action="" id="modelForm" lay-filter="formModel">
                                <input type="hidden" value="" name="JK">
                                <input type="hidden" value="" name="eKey">
                                <div class="layui-form-item">
                                    <label class="layui-form-label">最大值</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="upper" id="upper" required lay-verify="required" placeholder="请输入最大值" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">最小值</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="lower" required lay-verify="required" placeholder="请输入最小值" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">规　则</label>
                                    <div class="layui-input-inline">
                                        <input type="radio" name="method" lay-filter="radioSwitch" value="1" title="程序一" checked="">
                                        <input type="radio" name="method" lay-filter="radioSwitch" value="0" title="程序二">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux" id="hintDiv"></div>
                                </div>
                            </form>
                        </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="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
    <script src="{% static '/js/backstageNet/common.js'%}"></script>
    <script src="{% static '/js/warn/qxz_dict.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;
            // select2
            $('.currEquipSelect').select2({
                width: 217
            });
            //select2事件
            $(".currEquipSelect").on("change", function () {
                var data = $(this).val();
                getthresholdFun(data)
            });
            getthresholdFun($(".currEquipSelect").val())
        })
        // 阈值请求
        function getthresholdFun(facId) {
            $.ajax({
                url: "qxz_auto",
                type: 'post',
                data: {
                    imei: facId
                },
                dataType: 'json',
                success: function (data) {
                    if (data.auto_list.length) {
                        var switchData = eval('(' + data.auto_list + ')');
                        var qxz_list = data.qxz_list;
                    } else {
                        var switchData = [];
                        var qxz_list = [];
                    }

                    if (switchData.length) {
                        var html = '';
                        for (var i = 0; i < switchData.length; i++) {
                            if (switchData[i].JK != 255) {
                                if (switchData[i].upper == 32767 || switchData[i].lower == 32767) {
                                    var check = false;
                                } else {
                                    var check = true;
                                }
                                // 判断通道号
                                if (!isNaN(switchData[i].eKey)) {
                                    var eknum = switchData[i].eKey + 1;
                                    var ek = 'e' + eknum;
                                } else {
                                    var ek = switchData[i].eKey;
                                }
                                for (var j = 0; j < qxz_list.length; j++) {
                                    if (qxz_list[j].eKey == ek) {
                                        var eNum = qxz_list[j].eNum;
                                        var txt = qxz_dict[qxz_list[j].eNum][1];

                                        html += '<div class="layui-col-xs6 layui-col-md3"><div class="grid-demo ctrlItem">' +
                                            '<div class="ctrlUp"><input type="hidden" value=' + JSON.stringify(switchData[i]) + ' class="currStutas">' +
                                            '<div class="ctrlName"><p class="switchName">开关' + switchData[i].JK + '（通道' + switchData[i].eKey + '）</p><div class="clearfix">' +
                                            '<div class="fl warnEleName"><div class="bySwitchName"><span title="' + txt + '">' + txt + '</span>' +
                                            '<img src="http://www.yfzhwlw.com/static/img/dev/icon_' + eNum + '.png" alt=""></div></div>' +
                                            '<div class="warnEleVal"><p>最大值：' + switchData[i].upper + '</p><p>最小值：' + switchData[i].lower + '</p></div></div></div>' +
                                            '<div class="checkCtrlName setThreshold" onclick="setthresholdFun(this)"><i class="layui-icon layui-icon-set"></i>' +
                                            '</div></div><div class="ctrlDown"><form class="layui-form" action="">';

                                        if (check) {
                                            html += '<input type="checkbox" checked name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">' +
                                                '</form></div></div></div>'
                                        } else {
                                            html += '<input type="checkbox" name="switch" lay-skin="switch" lay-filter="switchTest" lay-text="开启|关闭">' +
                                                '</form></div></div></div>'
                                        }

                                        break;
                                    }
                                }

                            }

                            if (i == switchData.length - 1) {
                                if (html) {
                                    $('#getthresholdDiv').html(html)
                                    form.render('checkbox'); //刷新select选择框渲染          
                                    // 开启阈值
                                    openOperate()
                                } else {
                                    $('#getthresholdDiv').html('<div style="text-align:center">空</div>')
                                }
                            }
                        }
                    } else {
                        $('#getthresholdDiv').html('<div style="text-align:center">空</div>')
                    }
                },
                error: function (type) {
                    $('#getthresholdDiv').html('<div style="text-align:center">空</div>')
                }
            })
        }

        // 设置阈值
        function setthresholdFun(ele) {
            var obj = $(ele);
            var currValstr = obj.parents('.ctrlItem').find('.currStutas').val();
            var currVal = eval('(' + currValstr + ')');
            layui.use(['layer', 'form'], function () {
                var rule0 = "低于下限<span>开启</span>,高于上限<span>关闭</span>";
                var rule1 = "低于下限<span>关闭</span>,高于上限<span>开启</span>";
                var layer = layui.layer;
                var form = layui.form;
                //给表单赋值
                form.val("formModel", {
                    "JK": currVal.JK
                    , "eKey": currVal.eKey
                    , "upper": currVal.upper
                    , "lower": currVal.lower
                    , "method": currVal.method
                });
                if (currVal.method == 1) {
                    $('#hintDiv').html(rule1)
                } else {
                    $('#hintDiv').html(rule0)
                }
                form.on('radio(radioSwitch)', function (data) {
                    if (data.value == 1) {
                        $('#hintDiv').html(rule1)
                    } else {
                        $('#hintDiv').html(rule0)
                    }
                });

                layer.open({
                    type: 1,
                    title: '阈值设置',
                    btn: ['确定', '取消'],
                    area: ['600px', '300px'], //宽高
                    content: $('#openModel'),
                    success: function (layero, index) { // 成功弹出后回调
                        // 添加form标识
                        layero.addClass('layui-form');
                        // 将保存按钮改变成提交按钮
                        layero.find('.layui-layer-btn0').attr({
                            'lay-filter': 'setYuzhi',
                            'lay-submit': ''
                        });
                    },
                    yes: function (index, layero) {
                        form.on('submit(setYuzhi)', function (data) {
                            if (parseInt(data.field.upper) < parseInt(data.field.lower)) {
                                layer.tips('最大值不能小于最小值！', $('#upper'));
                                return false;
                            }
                            var hideVal = JSON.stringify(data.field)
                            var id = $('.currEquipSelect').val()
                            data.field.equip_id = id;

                            var dat = data.field;
                            $.ajax({
                                url: 'qxz_value_mqtt',
                                type: 'post',
                                data: data.field,
                                success: function (data) {
                                    if (data == 0) {
                                        layer.msg('设置成功',{icon:1})
                                        obj.parents('.ctrlItem').find('.warnEleVal').children().eq(0).html('最大值：' + dat.upper)//最大值
                                        obj.parents('.ctrlItem').find('.warnEleVal').children().eq(1).html('最小值：' + dat.lower)//最小值
                                        obj.parents('.ctrlItem').find('input[type="checkbox"]').prop('checked', 'checked');//开启阈值
                                        form.render('checkbox'); //刷新select选择框渲染
                                        obj.parents('.ctrlItem').find('.currStutas').val(JSON.stringify(dat));
                                    }

                                },
                                error: function (type) {
                                }
                            })
                            layer.closeAll(); //疯狂模式，关闭所有层
                            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
                        });

                    }
                    , btn2: function (index, layero) {
                        $('#Modal').hide()
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                });


            });
        }
        
        function openOperate (){
            form.on('switch(switchTest)', function(data){
                var parent = $(data.elem).parents('.ctrlItem');
                var currStutas = parent.find('.currStutas').val();
                var dat = eval('('+currStutas+')');
                var curawitchVal = data.elem.checked
                if(!curawitchVal){
                    dat.upper = '32767';
					dat.lower = '32767';
                }
                var id = $('.currEquipSelect').val()
                dat.equip_id = id;
                $.ajax({
                    url: 'qxz_value_mqtt',
                    type: 'post',
                    data: dat,
                    success: function (data) {
                        if (data == 0) {
                            layer.msg('设置成功',{icon:1})
                        }

                    },
                    error: function (type) {
                    }
                })
            });
        }


    </script>
</body>

</html>