<%@ 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}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <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"/>
    <title>流量策略详情</title>
    <link rel="stylesheet" href="${ctx}/css/plugin/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/plugin/fontawesome/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx}/css/basic.css">
    <style>
        .form-control, .control-label {
            height: 22px;
            padding: 1px 5px;
            line-height: 22px;
        }

        .form-horizontal .control-label {
            padding-top: 0px;
            text-align: right;
        }

        .btn {
            padding: 1px 6px;
            font-size: 12px;
        }
    </style>
</head>
<body class="container-fluid">

<div class="row">
    <form role="form" class="form-horizontal">
        <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12" style="margin-top: 25px">
            <div class="form-group">
                <label for="strategy_name" class="col-md-3 col-sm-3 col-xs-3 col-lg-3 control-label">策略名称</label>
                <div class="col-md-6 col-sm-6 col-xs-6" style="padding-left: 5px">
                    <input type="text" class="form-control" id="strategy_name"
                           placeholder="请输入策略名称">
                </div>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="form-group">
                <label for="type" class="col-md-3 col-sm-3 col-xs-3 col-lg-3 control-label">类型</label>
                <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6" style="padding-left: 5px">
                    <select class="form-control" id="type">
                        <option value="0">通用</option>
                        <option value="1">定制</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12 mt10">
            <div class="form-group">
                <label for="ptong" class="col-md-3 col-sm-3 col-xs-3 col-lg-3 control-label">普通占比</label>
                <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6" style="padding-left: 5px">
                    <input type="text" class="form-control" id="ptong"
                           placeholder="请输入普通占比">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" style="padding:0px 0px">
                    <button type="button"  class="btn btn-primary config" id="ptongConfig">功能配置</button>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12 mt10">
            <div class="form-group">
                <label for="warn" class="col-md-3 col-sm-3 col-xs-3 col-lg-3 control-label">预警占比</label>
                <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6" style="padding-left: 5px">
                    <input type="text" class="form-control" id="warn"
                           placeholder="请输入预警占比">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" style="padding:0px 0px">
                    <button class="btn btn-primary config" id="warnConfig">功能配置</button>
                </div>
            </div>
        </div>
        <div class="col-md-12 col-sm-12 col-xs-12 col-lg-12 mt10">
            <div class="form-group">
                <label for="alarm" class="col-md-3 col-sm-3 col-xs-3 col-lg-3 control-label">告警占比</label>
                <div class="col-md-6 col-sm-6 col-xs-6 col-lg-6" style="padding-left: 5px">
                    <input type="text" class="form-control" id="alarm"
                           placeholder="请输入告警占比">
                </div>
                <div class="col-md-3 col-sm-3 col-xs-3 col-lg-3" style="padding:0px 0px">
                    <button type="button" class="btn btn-primary config" id="alarmConfig">功能配置</button>
                </div>
            </div>
        </div>
    </form>
</div>

<footer class="navbar-fixed-bottom">
    <div class="row">
        <div class="col-md-12 col-lg-12 mt10" style="text-align: center">
            <div class="form-group">
                <button type="button" class="btn btn-primary" id="save">确认</button>
            </div>
        </div>
    </div>
</footer>
<input type="hidden" id="username" value="${username}">
<script src="${ctx}/js/plugin/jquery/jquery.min.js"></script>
<script src="${ctx}/js/plugin/layui/layer.js"></script>
<script src="${ctx}/js/plugin/bootstrap/bootstrap.min.js"></script>
<script src="${ctx}/jspJS/utils/loading.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
<script src="${ctx}/js/plugin/xss/xss.js"></script>
<script src="${ctx}/jspJS/utils/common.js"></script>
<script src="${ctx}/jspJS/confirmIndentity.js"></script>
<script src="${ctx}/js/plugin/xss/aes.js"></script>
<script src="${ctx}/jspJS/sm2.js"></script>
<script src="${ctx}/jspJS/sm3.js"></script>
<script>
    var comArr=[]
    var warnArr=[]
    var alerArr=[]
    var fsIndex;
    var type = getQueryString('type')
    $(function () {
       var indexi;
        if(type == 1){
            //新增
        }else if(type == 2) {
            //修改
            initInfo(2)
        }else {
            //只用于查看不可操作
            initInfo(3)
        }






        $('body').on('click', '.config', function () {
            let pertype;
            let fsdIndex;

            let id = $(this).attr('id')
            let title = ''
            if(type == 1){
                title = '添加绑定类型'
                //新增
                if(id == 'ptongConfig'){
                    pertype = 1
                }else if(id == 'warnConfig') {
                    pertype = 2
                }else {
                    pertype = 3
                }
            }else if(type == 2) {
                title = '修改绑定类型'
                //修改
                if(id == 'ptongConfig'){
                    pertype = 1
                    fsdIndex = $('#ptongConfig').attr('value')
                }else if(id == 'warnConfig') {
                    pertype = 2
                    fsdIndex = $('#warnConfig').attr('value')
                }else {
                    pertype = 3
                    fsdIndex = $('#alarmConfig').attr('value')
                }
            } else {
                title = '查看绑定类型'
                //只用于查看
                if(id == 'ptongConfig'){
                    pertype = 1
                    fsdIndex = $('#ptongConfig').attr('value')
                }else if(id == 'warnConfig') {
                    pertype = 2
                    fsdIndex = $('#warnConfig').attr('value')
                }else {
                    pertype = 3
                    fsdIndex = $('#alarmConfig').attr('value')
                }
            }



            layer.open({
                type: 2,
                title: title,
                maxmin: false,
                area: ['80%', '90%'],
                content: ['flowopentwo?type='+type+'&pertype='+pertype+'&fsdIndex='+fsdIndex,'no'],
                scrollbar: false
            })

           return false
        })

        $('#save').click(function () {
            let name =$('#strategy_name').val()
            let ty = $('#type').val()
            let com = $('#ptong').val()
            let warn = $('#warn').val()
            let alarm = $('#alarm').val()


            if(name==null||name==""){
                layer.tips('名称不可为空', '#strategy_name', {
                    tips: [1, 'red'] //还可配置颜色
                });
                return
            }else if(!/^[\u4E00-\u9FA5A-Za-z0-9_]+$/gi.test(name)){
                layer.tips('名称含有非汉字字符', '#strategy_name', {
                    tips: [1, 'red'] //还可配置颜色
                });
                return;
            }else {
                let vv = valiteLength(name)
                if(vv!=''){
                    layer.tips(vv, '#strategy_name', {
                        tips: [1, 'red'] //还可配置颜色
                    });
                }
            }

            if(!/^([1-9]|[1-9]\d|1\d{2}|200)$/.test(com)){
                layer.tips('请填1~200的正整数', '#ptong', {
                    tips: [1, 'red'] //还可配置颜色
                });
                return;
            }
            if(!/^([1-9]|[1-9]\d|1\d{2}|200)$/.test(warn)){
                layer.tips('请填1~100的正整数', '#warn', {
                    tips: [1, 'red'] //还可配置颜色
                });
                return;
            }
            if(!/^([1-9]|[1-9]\d|1\d{2}|200)$/.test(alarm)){
                layer.tips('请填1~100的正整数', '#alarm', {
                    tips: [1, 'red'] //还可配置颜色
                });
                return;
            }

           if(com>=warn || com>=alarm ){
               layer.tips('普通预警占比不能大于等于告警占比', '#ptong', {
                   tips: [1, 'red'] //还可配置颜色
               });
               return;
           }
           if(warn>=alarm){
               layer.tips('预警占比不能大于等于告警占比', '#warn', {
                   tips: [1, 'red'] //还可配置颜色
               });
               return;
           }



            name = filterXSS(name)
            com = filterXSS(com)
            warn = filterXSS(warn)
            alarm = filterXSS(alarm)
            let username = $('#username').val()
            let resetName = '二次'
            passwordIndentityForEd(username, resetName, function () {
                layer.confirm('确认提交吗?', function () {
                    let map = {
                        name: name,
                        type: ty,
                        comPer: com,
                        warnPer: warn,
                        alertPer: alarm,
                        comList: comArr,
                        warnList: warnArr,
                        alertList: alerArr
                    }
                    if (type == 1) {
                        //新增提交
                        $.ajax({
                            type: "post",
                            url: "/pqs9900/flowstrategy/addStrategy",
                            contentType: 'application/json;charset=UTF-8',
                            dataType: "json",
                            data: JSON.stringify(map),
                            beforeSend: function () {
                                indexi = ityzl_SHOW_LOAD_LAYER();
                            },
                            success: function (data) {
                                if (data.code === 200) {
                                    layer.msg(data.message, {icon: 1, time: 2000}, function () {
                                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                        parent.layer.close(index); //再执行关闭
                                        window.parent.reflah()
                                    })
                                } else {
                                    layer.msg(data.message, {icon: 2, time: 2000})

                                }
                                ityzl_CLOSE_LOAD_LAYER(indexi);
                            }
                        })
                    } else {
                        map.fsIndex = fsIndex
                        map.comPerIndex = $('#ptongConfig').attr('value')
                        map.warnPerIndex = $('#warnConfig').attr('value')
                        map.alertPerIndex = $('#alarmConfig').attr('value')
                        //修改提交
                        $.ajax({
                            type: "post",
                            url: "/pqs9900/flowstrategy/updateStrategy",
                            contentType: 'application/json;charset=UTF-8',
                            dataType: "json",
                            data: JSON.stringify(map),
                            beforeSend: function () {
                                indexi = ityzl_SHOW_LOAD_LAYER();
                            },
                            success: function (data) {
                                if (data.code === 200) {
                                    layer.msg(data.message, {icon: 1, time: 2000}, function () {
                                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                        parent.layer.close(index); //再执行关闭
                                        window.parent.reflah()
                                    })
                                } else {
                                    layer.msg(data.message, {icon: 2, time: 2000})

                                }
                                ityzl_CLOSE_LOAD_LAYER(indexi);
                            }
                        })
                    }
                })
            })
            })


    })


    function initInfo(tyof){
        if(tyof == 3){
            $('#save').hide()
            //不可操作
            $('#strategy_name').attr('disabled',true)
            $('#type').attr('disabled',true)
            $('#ptong').attr('disabled',true)
            $('#warn').attr('disabled',true)
            $('#alarm').attr('disabled',true)
           /* $('#ptongConfig').attr('disabled',true)
            $('#warnConfig').attr('disabled',true)
            $('#alarmConfig').attr('disabled',true)*/
        }
        fsIndex = getQueryString('fsIndex')
        $.ajax({
            type:'get',
            url:'/pqs9900/flowstrategy/getStrategy',
            dataType:'json',
            data:{fsIndex:fsIndex},
            beforeSend:function () {
                indexi = ityzl_SHOW_LOAD_LAYER();
            },
            success:function (data) {
                if(data.code == 200){
                    let da = data.body
                    $('#strategy_name').val(da.name)
                    $('#type').val(da.type)
                    $('#ptong').val(da.comPer)
                    $('#warn').val(da.warnPer)
                    $('#alarm').val(da.alertPer)
                    $('#ptongConfig').attr('value',da.comPerIndex)
                    $('#warnConfig').attr('value',da.warnPerIndex)
                    $('#alarmConfig').attr('value',da.alertPerIndex)
                    comArr = da.comList
                    warnArr = da.warnList
                    alerArr = da.alertList
                }else {

                }
                ityzl_CLOSE_LOAD_LAYER(indexi);
            }
        })

    }

    //赋值
    window.bindContent = function (arr,type) {
        if(type == 1){
            comArr = arr
        }else if(type == 2){
            warnArr= arr
        }else if(type == 3){
            alerArr=arr
        }
    }

    window.paramContent = function (type) {
        if(type == 1){
            return comArr
        }else if(type == 2){
            return warnArr
        }else if(type == 3){
            return alerArr
        }

    }
</script>
</body>
</html>
