<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<link rel="stylesheet" href="${ctx}/css/basic.css">
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>暂降事件列表多条件筛选</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/mulitiCheckbox/fSelect.css">
    <style>
        .form-control{
            height:23px;
            padding:1px 5px
        }
        label{
            margin-top: 3px;
        }
        .fs-wrap{
            width: 235px;
        }
        .fs-dropdown .fs-options{
            max-height: 130px;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <form class="form-horizontal mt15" role="form">
        <div class="form-group">
            <label class="col-xs-3 control-label" style="padding-right: 0px">暂态幅值(%)</label>
            <div class="col-xs-2" style="padding-left: 0px;padding-right: 0px">
                <input type="text" class="form-control" id="minfuzhi" placeholder="0">
            </div>
            <label class="col-xs-4 control-label" style="padding-right: 0px;padding-left: 0px;text-align: center">&lt; &nbsp; 幅值 &nbsp; &lt;</label>
            <div class="col-xs-2" style="padding-left: 0px;padding-right: 0px">
                <input type="text" class="form-control" id="maxfuzhi" placeholder="200">
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-3 control-label" style="padding-right: 0px">暂态持续时间</label>
            <div class="col-xs-2" style="padding-left: 0px;padding-right: 0px">
                <input type="text" class="form-control" id="mintime" placeholder="X毫秒">
            </div>
            <label class="col-xs-4 control-label" style="padding-right: 0px;padding-left: 0px;text-align: center">&lt; &nbsp; 持续时间 &nbsp; &lt;</label>
            <div class="col-xs-2" style="padding-left: 0px;padding-right: 0px">
                <input type="text" class="form-control" id="maxtime" placeholder="X毫秒">
            </div>
        </div>
        <div class="form-group">
            <label class="col-xs-3 control-label" style="padding-right: 0px">事件严重度</label>
            <div class="col-xs-2" style="padding-left: 0px;padding-right: 0px">
                <input type="text" class="form-control" id="minseverity" placeholder="正负数">
            </div>
            <label class="col-xs-4 control-label" style="padding-right: 0px;padding-left: 0px;text-align: center">&lt; &nbsp; 严重度 &nbsp; &lt;</label>
            <div class="col-xs-2" style="padding-left: 0px;padding-right: 0px">
                <input type="text" class="form-control" id="maxseverity" placeholder="正负数">
            </div>
        </div>
        <div class="form-group" style="margin-bottom: 10px">
            <label for="eventType" class="col-xs-3 control-label" style="padding-right: 0px">暂降类型</label>
            <div class="col-xs-9"style="padding-left: 0px">
                <select id="eventType" class="form-control" multiple="multiple" id="eventType" name="eventType">
                </select>
            </div>
        </div>
        <div class="form-group" style="margin-bottom: 10px">
            <label for="eventReason" class="col-xs-3 control-label" style="padding-right: 0px">暂降原因</label>
            <div class="col-xs-9" style="padding-left: 0px">
                <select id="eventReason" class="form-control" multiple="multiple" id="eventReason" name="eventReason">
                </select>
            </div>
        </div>
        <div class="form-group" style="margin-bottom: 10px">
            <label for="triggerType" class="col-xs-3 control-label" style="padding-right: 0px">触发类型</label>
            <div class="col-xs-9" style="padding-left: 0px">
                <select id="triggerType" class="form-control" multiple="multiple" id="triggerType" name="triggerType">
                    <option value="4">其他</option>
                    <option value="0">扰动</option>
                    <option value="1">暂降</option>
                    <option value="2">暂升</option>
                    <option value="3">中断</option>
                    <option value="5">录波</option>
                </select>
            </div>
        </div>
        <div class="form-group" style="margin-bottom: 10px">
            <label for="fileflag" class="col-xs-3 control-label" style="padding-right: 0px">是否存在波形</label>
            <div class="col-xs-9"style="padding-left: 0px">
                <select id="fileflag" class="form-control" style="width: 235px">
                    <option value="">请选择是否存在波形</option>
                    <option value="1">是</option>
                    <option value="0">否</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-xs-12 mt10" style="text-align: center">
                <button id="submit" type="button" class="btn btn-primary">确认</button>
            </div>
        </div>
    </form>

</div>
</body>
<script src="${ctx}/js/plugin/jquery.min.js"></script>
<script src="${ctx}/js/plugin/layerui/layer.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/js/plugin/mulitiCheckbox/fSelect.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script>
$(function () {
    initSelect()

    $('#submit').click(function (){
        let obj = {}
        obj.minfuzhi = $("#minfuzhi").val()
        obj.maxfuzhi = $("#maxfuzhi").val()
        obj.mintime = $("#mintime").val()
        obj.maxtime = $("#maxtime").val()
        obj.minseverity = $("#minseverity").val()
        obj.maxseverity = $("#maxseverity").val()
        obj.eventType = $("select[name='eventType']").val()
        obj.eventReason = $("select[name='eventReason']").val()
        obj.triggerType = $("select[name='triggerType']").val()
        obj.fileflag = $("#fileflag").val()

        var test = /^\d+(\.{0,1}\d+){0,1}$/    //非负数
        let test2 = /^(\-|\+)?\d+(\.\d+)?$/ //所有数字

        if(obj.minfuzhi!='' && obj.minfuzhi!=null){
            if(!obj.minfuzhi.match(test)){
                layer.tips('请输入合法的值', '#minfuzhi', {
                    tips: [1, 'red'] //还可配置颜色
                });
                return
            }else {
                obj.minfuzhi = obj.minfuzhi/100
            }
        }
        if(obj.maxfuzhi!='' && obj.maxfuzhi!=null){
            if(!obj.maxfuzhi.match(test)){
                layer.tips('请输入合法的值', '#maxfuzhi', {
                    tips: [1, 'red'] //还可配置颜色
                });
                return
            }else {
                obj.maxfuzhi = obj.maxfuzhi/100
            }
        }
        if(obj.mintime!='' && obj.mintime!=null){
            if(!obj.mintime.match(test)){
                layer.tips('请输入合法的值', '#mintime', {
                    tips: [1, 'red'] //还可配置颜色
                });
                return
            }
        }
        if(obj.maxtime!='' && obj.maxtime!=null){
            if(!obj.maxtime.match(test)){
                layer.tips('请输入合法的值', '#maxtime', {
                    tips: [1, 'red'] //还可配置颜色
                });
                return
            }
        }

        if(obj.minseverity!='' && obj.minseverity!=null){
            if(!obj.minseverity.match(test2)){
                layer.tips('请输入合法的值', '#minseverity', {
                    tips: [1, 'red'] //还可配置颜色
                });
                return
            }
        }
        if(obj.maxseverity!='' && obj.maxseverity!=null){
            if(!obj.maxseverity.match(test2)){
                layer.tips('请输入合法的值', '#maxseverity', {
                    tips: [1, 'red'] //还可配置颜色
                });
                return
            }
        }

        window.parent.paramToVd(obj)
        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
        parent.layer.close(index); //再执行关闭
    })

})

function initSelect(){
    $.ajax({
        type: 'post',
        url: '/pqs9200/device/getselect',
        data: {dictypeName: '暂降类型'},
        dataType: 'json',
        success: function (data) {
            $('#eventType').empty()
            var html = ''
            data.forEach(function (item) {
                let op = '<option value="' + item.dicIndex + '">' + item.dicName + '</option>'
                html += op;
            })
            $('#eventType').append(html)
            $('#eventType').fSelect();
        }

    })
    $.ajax({
        type: 'post',
        url: '/pqs9200/device/getselect',
        data: {dictypeName: '暂降原因'},
        dataType: 'json',
        success: function (data) {
            $('#eventReason').empty()
            var html = ''
            data.forEach(function (item) {
                let op = '<option value="' + item.dicIndex + '">' + item.dicName + '</option>'
                html += op;
            })
            $('#eventReason').append(html)
            $('#eventReason').fSelect();
        }

    })

    $('#triggerType').fSelect();
}
</script>

</html>
