{% 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/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;
        }

        /* 内容 */

        .mainContent {
            padding: 30px;
        }

        .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;
        }

        .warnSetDiv{
            /* margin-top: 30px; */
        }

        .warnSetDiv .layui-input-block {
            margin-left: 20px;
        }

        .warnSetDiv .layui-form-item .layui-input-inline {
            width: 25%;
        }
        .warnSetDiv .layui-form-item .layui-input-inline.layui-input-inline-title{
            width: 200px;
        }

        /* 筛选框 */

        .selectModel {
            display: none;
        }

        .selectModel>div {
            width: 90%;
            margin-top: 30px;
        }

        /* 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: 20px;
        }
        /* 表单 */
        .layui-form{
            font-size: 14px;
        }
        .layui-form-item .layui-input-block span{
            color: #23a3ee;
            font-weight: 700;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="content">
        <!-- 导航 -->
        <div class="breadcrumbs">
            <span class="layui-breadcrumb">
                <a target="BoardRight">首页</a>
                <a>
                    <cite>阈值设置</cite>
                </a>
            </span>
        </div>
        <!-- 内容 -->
        <div class="mainContent">
            <div class="widget-title">
                <h2>阈值设置</h2>
            </div>
            <div class="currEquip">
                当前设备： 
                {% if equip_list|length %}
                <select class="currEquipSelect" name="state" id="equipSelect">
                    {% for equip in equip_list %}
                    <option value="{{equip.equip_id}}">{{equip.equip_id}}</option>
                    {% endfor %}
                </select>
                {% else %} 当前暂无设备 {% endif %}
            </div>
            <div class="warnSetDiv">
                <form class="layui-form" action="">
                    <div id="warnForm" >

                    </div>
                    <!-- <div class="layui-form-item">
                        <div class="layui-input-block">空气温度</div>
                        <div class="layui-input-block">
                            <div class="layui-input-inline">
                                <select name="city" lay-verify="required">
                                    <option value="">最小值</option>
                                    <option value="0">最大值</option>
                                </select>
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" name="title" required lay-verify="required" placeholder="阈值" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div> -->
                    <div class="layui-form-item ">
                        <div class="layui-input-block"><span>预警号码</span></div>
                        <div class="layui-input-block">
                            <div class="layui-input-inline layui-input-inline-title">
                                <input type="text" name="tel" maxlength="11" lay-verify="userphone" placeholder="预警手机号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>

    <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>
        var element, laydate, laypage, form;
        layui.use(['element', 'layer', 'laydate', 'laypage', 'form'], function () {
            layer = layui.layer;
            laydate = layui.laydate;
            laypage = layui.laypage;
            form = layui.form;
            // select2
            $('.currEquipSelect').select2({
                width: 217
            });
             //select2事件
             $(".currEquipSelect").on("change", function () {
                var data = $(this).val();
                getthreVal(data)
                console.log(data)
            });
            console.log($('.currEquipSelect').val())
            //执行一个laydate实例
            laydate.render({
                elem: '#timSelectBox' //指定元素
                , range: true
                , done: function (value, date) {
                    var dateArray = value.split(' - ')
                    $('#tableBegin').val(dateArray[0])
                    $('#tableEnd').val(dateArray[1])
                }
            });
            form.verify({
                userphone: function(value, item){ //value：表单的值、item：表单的DOM对象
                    if(value !='' ){
                        if(!/^1[3|4|5|6|7|8|9]\d{9}$/.test(value)){
                            return '请输入正确手机号';
                        }
                    }
                }
            }); 

            form.on('select', function(data){
                console.log(data.othis.parents('.layui-form-item').find('.threshold').val(''))
            }); 
            //监听提交
            form.on('submit(formDemo)', function (data) {
                var field = data.field;
                var dat = {};
                for(var i = 1;i<=30;i++){
                    var typeNum = 'typeNum'+i;
                    var thresholdVal = 'thresholdVal'+i;
                    if(field[typeNum] != undefined){
                        var keyEl = 'e'+i;
                        dat[keyEl] = field[typeNum]+'#'+field[thresholdVal]
                    }
                    if(i == 30){
                        console.log(dat)
                    }
                }
                var equip_id = $('#equipSelect').val()
                var alarm = {
                    dat:dat,
                    tel:field.tel,
                    equip_id:equip_id
                }
                $.ajax({
                    url: 'dorm_pub1',
                    data: {
                        alarm:JSON.stringify(alarm)
                    },
                    type: 'post',
                    success: function (data) {
                        if (data) {
                            if (window.id !== '') {
                                layer.msg("发布成功，等待审核", { icon: 1 });
                            } else {
                                layer.msg("发布成功，等待审核", { icon: 1 });
                            }
                        } else {
                            if (window.id !== '') {
                                parent.layer.msg("发布失败", { icon: 2 });
                            } else {
                                layer.msg("发布失败", { icon: 2 });
                            }
                        }
                    },
                    error: function (type) {

                    }
                })
                return false;

            });

        })
        function getthreVal(data){
            var imei = $('#equipSelect').val()
            $.ajax({
                url: 'qxz_alarm',
                data: {
                    imei:imei
                },
                type: 'post',
                success: function (data) {
                    renderHtml(data);
                },
                error: function (type) {
                    var data = {
                        alarm:'{"dat":{"e8":"1#5","e2":"0#7","e3":"0#3","e4":"0#2","e5":"1#56"},"tel":"","equip_id":"16057231"}',
                        conf: {e8: "盐分", e2: "温度#°", e3: "雨量",e4: "气压#hpa",e5: ""}
                    }
                    renderHtml(data);
                }
            })
        }
        var data = {
            alarm:'{"dat":{"e6":"0#","e2":"0#","e3":"0#3","e4":"0#2","e5":"1#56"},"tel":"","equip_id":"16057231"}',
            conf: {e6: "ces", e2: "", e3: "",e4: "风向#°",e5: "数字气压#hpa"}
        }
        renderHtml(data);
        function renderHtml(data){
            var dat = eval('('+data.alarm+')').dat;
            var conf = data.conf;
            var html = '';
            for(var i = 1;i<=30;i++){
                var keyEl = 'e'+i;
                if(conf[keyEl]){
                    var unit = conf[keyEl].split('#')[0];
                    var typenum = dat[keyEl].split('#')[0];
                    var val = dat[keyEl].split('#')[1] || '';
                    html += '<div class="layui-form-item">'+
                                '<div class="layui-input-block"><span class="eleTitle">'+unit+'</span></div>'+
                                '<div class="layui-input-block">'+
                                    '<div class="layui-input-inline layui-input-inline-title">'+
                                        '<select name="typeNum'+i+'" lay-verify="required">';
                                            if(typenum==0){
                                                html +='<option value="0" selected>最小值</option>'+
                                                        '<option value="1">最大值</option>';
                                            }else if(typenum==1){
                                                html +='<option value="0">最小值</option>'+
                                                        '<option value="1" selected>最大值</option>';
                                            }else{
                                                html +='<option value="">请选择</option>'+
                                                '<option value="0">最小值</option>'+
                                                '<option value="1">最大值</option>';
                                            }
                                            
                                            html +='</select>'+
                                    '</div>'+
                                    '<div class="layui-input-inline">'+
                                        '<input type="number" name="thresholdVal'+i+'" value="'+val+'" placeholder="阈值" autocomplete="off" class="layui-input threshold">'+
                                    '</div>'+
                                '</div>'+
                            '</div>'
                }
                if(i == 30){
                    $('#warnForm').html(html)
                    layui.use(['form'], function () {
                        form = layui.form;
                        form.render('select'); //刷新select选择框渲染
                    })
                }
            }
        }
       
    </script>
</body>

</html>