<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<script type="text/javascript">
    //记录页面打开时blackPhoneType.type的值，为空说明是添加
    let DIS_TYPE = "";
    //动态参数配置
    let DIS_PARAM = "";
    //动态参数值
    let DIS_PARAM_VAL = "";

    let handlerClassList = "";
    window.onload = loadInfo();

    function loadInfo(){
        //黑名单组类型
        DIS_TYPE = $("#disType").val();
        //模板
        DIS_PARAM = $("#disParam").val();
        //动态参数值
        DIS_PARAM_VAL = $("#disParamVal").val();

        if(DIS_PARAM!=""&&DIS_TYPE=="3"){
            //渲染动态参数
            showParamVal();
        }else if(DIS_TYPE!="3"){
            $("#template").css("display","none");
            $("#template2").css("display","none");
            $("#template3").css("display","none");
        }

    }

    //[{"name":"handlerclass","cnname":"黑名单类型"},{"name":"sendurl","cnname":"发送地址"},{"name":"username","cnname":"用户名"},
    // {"name":"password","cnname":"密码"}]
    function showParamVal(){
        // debugger;
        let dynamicParam = eval("("+DIS_PARAM+")");
        let dynamicParamVal = "";
        let keys = "";
        if(DIS_PARAM_VAL!=""){
            dynamicParamVal = eval("("+DIS_PARAM_VAL+")");
            keys = Object.keys(dynamicParamVal);
        }

        let param = ``;

        $.each(dynamicParam,function (index,item){
            let value = "";
            if(keys!="" && keys.indexOf(item.name)>=0){
                value = dynamicParamVal[item.name];
            }
            let placeholder = item.placeholder?item.placeholder:"";

            if(item.name == "cachetype"){
                param +=`<div class="form_group dynamic_param" style="display: none">
                        <label class="form_label col-xs-4">\${item.cnname}：</label>
                        <div class="col-xs-8">
                            <input id = "\${item.name}" value="\${value}" class="form_control dynamic_param_input" placeholder="\${placeholder}"/>
                        </div>
                    </div>`

            }else{
                param +=`<div class="form_group dynamic_param">
                        <label class="form_label col-xs-4">\${item.cnname}：</label>
                        <div class="col-xs-8">
                            <input id = "\${item.name}" value="\${value}" class="form_control dynamic_param_input" placeholder="\${placeholder}"/>
                        </div>
                    </div>`
            }

        })

        $("#blackPhoneType").append(param);
    }

    function blackTypeOnchange(){
        let blackType = $("#blackType").val();

        if(DIS_TYPE==""){
            //添加
            if(blackType == 3){
                $("#template").css("display","");
                $("#template2").css("display","");
                $("#template3").css("display","");
            }else{
                $("#template").css("display","none");
                $("#template2").css("display","none");
                $("#template3").css("display","none");
            }
        }else{
            //编辑
            if(blackType!=3){
                $("#template").css("display","none");
                $("#template2").css("display","none");
                $("#template3").css("display","none");
                $(".dynamic_param").css("display","none");
            }else if(DIS_PARAM!=""&&blackType==3){
                $("#template").css("display","");
                $("#template2").css("display","");
                $("#template3").css("display","");
                $(".dynamic_param").remove();
                //渲染动态参数
                showParamVal();
            }else if(DIS_PARAM==""&&blackType==3){
                $("#template").css("display","");
                $("#template2").css("display","");
                $("#template3").css("display","");
            }

        }
    }

    function templateOnchange(obj){
        // debugger
        $(".dynamic_param").remove()
        let template = $(obj).find("option:selected").attr("data-template");
        if(!template){
            return ;
        }
        template = JSON.parse(template);

        let dynamicParamVal = "";
        let keys = "";
        if(DIS_PARAM_VAL!=""){
            dynamicParamVal = eval("("+DIS_PARAM_VAL+")");
            keys = Object.keys(dynamicParamVal);
        }

        let param = ``;
        $.each(template,function (index,item){
            let value = "";
            if(keys!="" && keys.indexOf(item.name)>=0){
                value = dynamicParamVal[item.name];
            }
            let placeholder = item.placeholder?item.placeholder:"";

            if(item.name == "cachetype"){
                param +=`<div class="form_group dynamic_param" style="display: none">
                        <label class="form_label col-xs-4">\${item.cnname}：</label>
                        <div class="col-xs-8">
                            <input id = "\${item.name}" value="\${value}" class="form_control dynamic_param_input" placeholder="\${placeholder}"/>
                        </div>
                    </div>`

            }else{

                param +=`<div class="form_group dynamic_param">
                        <label class="form_label col-xs-4">\${item.cnname}：</label>
                        <div class="col-xs-8">
                            <input id = "\${item.name}" value="\${value}" class="form_control dynamic_param_input" placeholder="\${placeholder}"/>
                        </div>
                    </div>`
            }

        })

        $("#blackPhoneType").append(param);
    }



</script>


<form id="blackPhoneType" method="post">
	<p style="color: red;">线上：量较小的黑名单,在线维护; 线下：超大量的黑名单,由运维人员线下导入;第三方黑名单:由第三方提供的黑名单,远程调用</p>
    <input type="hidden" name="id" id="id" value="${blackPhoneType.id}"/>
    <div class="form_group">
        <label class="form_label col-xs-4">黑名单组名：</label>
        <div class="col-xs-8">
            <input name="blacklist_group_name" id = "blacklist_group_name"  class="form_control" value="${blackPhoneType.blacklist_group_name}" />
        </div>
    </div>

     <div class="form_group">
        <label class="form_label col-xs-4">黑名单组类型：</label>
        <div class="col-xs-8">
           <select id="blackType" name="type" class="form_control" onchange="blackTypeOnchange()">
           		<option <c:if test="${blackPhoneType.type==1 or blackPhoneType.type==null or blackPhoneType.type==''}">selected</c:if> value="1">线上</option>
           		<option <c:if test="${blackPhoneType.type==2}">selected</c:if> value="2">线下</option>
           		<option <c:if test="${blackPhoneType.type==3}">selected</c:if> value="3">第三方</option>
           </select>
        </div>
    </div>

    <div class="form_group">
        <label class="form_label col-xs-4">价格：</label>
        <div class="col-xs-8">

            <input name="price" id = "price"  class="form_control" value="<fmt:formatNumber type='number' value='${blackPhoneType.price/10000}' maxFractionDigits='5'/>" />
        </div>
    </div>

    <div class="form_group">
        <label class="form_label col-xs-4">添加备注：</label>
        <div class="col-xs-8">
            <textarea name="descption"  class="form_control">${blackPhoneType.descption}</textarea>
        </div>
    </div>

<%--    <div id="dynamicParam" class="form_group">--%>
<%--        <label class="form_label col-xs-4">动态参数配置：</label>--%>
<%--        <div class="col-xs-8">--%>
<%--            <textarea name="dynamic_param" style="height: 70px"  id="dynamic_param" class="form_control">${blackPhoneType.dynamic_param}</textarea>--%>
<%--        </div>--%>
<%--    </div>--%>
    <div id="template3" class="form_group">
        <label class="form_label col-xs-4">调用优先级</label>
        <div class="col-xs-8">
            <input name="request_order" id = "request_order" placeholder="由大到小调用"  class="form_control" value="${blackPhoneType.request_order}" />
        </div>
    </div>
    <div id="template" class="form_group">
        <label class="form_label col-xs-4">选择模板：</label>
        <div class="col-xs-8">
            <select name="dynamic_param" class="form_control" onchange="templateOnchange(this)">
                <option value="">--请选择--</option>
                <c:forEach items="${templates}" var="template">
                    <option value="${template.handlerName}" data-template='${template.template}'
                            <c:if test="${blackPhoneType.dynamic_param==template.handlerName }">selected</c:if> >${template.name}</option>
                </c:forEach>
            </select>
        </div>
    </div>

    <div id="template2" class="form_group">
        <label class="form_label col-xs-4">缓存：</label>
        <div class="col-xs-8">
            <input type="radio" name="buffer" value="open" <c:if test="${blackPhoneType.buffer eq 'open' }">checked</c:if> />开启
            <input type="radio" name="buffer" value="close" <c:if test="${blackPhoneType.buffer ne 'open' }">checked</c:if> />关闭
        </div>
    </div>

    <!--方便存取值用-->
    <input id="disType" value="${blackPhoneType.type}"  style="display: none"/>
    <textarea id="disParam" style="display: none">${blackPhoneType.template}</textarea>
    <textarea id="disParamVal" style="display: none">${blackPhoneType.dynamic_param_val}</textarea>
    <input id="disDynamicParamVal" name="dynamic_param_val" style="display: none"/>

</form>

