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


<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
    <h4 class="modal-title">添加通道组</h4>
</div>
<div class="modal-body">

    <form id="addForm" method="post">
        <input type="hidden" name="channels"/>
        <input type="hidden" name="weight"/>
        <input type="hidden" name="overstocks"/>
        <div class="form_group">
            <label class="form_label col-xs-3">通道组名称：</label>
            <div class="col-xs-9">
                <input type="text" class="form_control" name="name"/>
            </div>
        </div>
        <div class="form_group">
            <label class="form_label col-xs-3">运营商：</label>
            <div class="col-xs-9">
                <select name="network" class="form_control form_white" style="width: 100%" onchange="change(event)">
                    <option value="1" selected>联通</option>
                    <option value="2">移动</option>
                    <option value="3">电信</option>
<%--                    <option value="4">全网</option>--%>
                </select>
            </div>
        </div>
        <div class="form_group">
            <label class="form_label col-xs-3">通道序列</label>
            <div class="col-xs-9">
                <div class="ltDiv" style="display: block;">
                    <div style="margin-top:10px">
                        <select name="ltChannels" class="singleSelect" style="width: 35%">
                            <c:forEach var="item" items="${channelList}">
                                <c:if test="${item.isSupportUnicom == '1'}">
                                    <option value="${item.id}">${item.id} ${item.channelName}</option>
                                </c:if>
                            </c:forEach>
                        </select>
                        &nbsp;权重：<input type="text" oninput="value=value.replace(/[^\d]/g,'')" name="ltweight"
                                        class="form_control" style="width: 15%"/>
                        <a class="form_control form_white" style="width: 23px;"
                           href="javascript:addChannel('ltChannels');">+</a>
                    </div>
                </div>
                <div class="ydDiv" style="display: none">
                    <div style="margin-top:10px">
                        <select name="ydChannels" class="singleSelect" style="width: 35%">
                            <c:forEach var="item" items="${channelList}">
                                <c:if test="${item.isSupportMobile == '1'}">
                                    <option value="${item.id}">${item.id} ${item.channelName}</option>
                                </c:if>
                            </c:forEach>
                        </select>
                        &nbsp;权重：<input type="text" name="ydweight" class="form_control" style="width: 15%"
                                        oninput="value=value.replace(/[^\d]/g,'')"/>
                        <a class="form_control form_white" style="width: 23px;"
                           href="javascript:addChannel('ydChannels');">+</a>
                    </div>
                </div>
                <div class="dxDiv" style="display: none;">
                    <div style="margin-top:10px">
                        <select name="dxChannels" class="singleSelect" style="width: 35%">
                            <c:forEach var="item" items="${channelList}">
                                <c:if test="${item.isSupportTelecom == '1'}">
                                    <option value="${item.id}">${item.id} ${item.channelName}</option>
                                </c:if>
                            </c:forEach>
                        </select>
                        &nbsp;权重：<input type="text" name="dxweight" class="form_control" style="width: 15%"
                                        oninput="value=value.replace(/[^\d]/g,'')"/>
                        <a class="form_control form_white" style="width: 23px;"
                           href="javascript:addChannel('dxChannels');">+</a>
                    </div>
                </div>
                <div class="qwDiv" style="display: none;">
                    <div style="margin-top:10px">
                        <select name="qwChannels" class="singleSelect" style="width: 35%">
                            <c:forEach var="item" items="${channelList}">

                                <option value="${item.id}">${item.id} ${item.channelName}</option>

                            </c:forEach>
                        </select>
                        &nbsp;权重：<input type="text" name="qwweight" class="form_control" style="width: 15%"
                                        oninput="value=value.replace(/[^\d]/g,'')"/>
                        <a class="form_control form_white" style="width: 23px;"
                           href="javascript:addChannel('qwChannels');">+</a>
                    </div>
                </div>
            </div>

        </div>

        <div class="form_group">
            <label class="form_label col-xs-3">适用业务：</label>
            <div class="col-xs-9">
                <input type="text" name="biz" class="form_control" value="彩信" readonly/>
            </div>
        </div>
        <div class="form_group" style="display: none;">
            <label class="form_label col-xs-3">切换策略：</label>
            <div class="col-xs-9" style="margin-top: 5px">
                <input type="radio" id="strategy_4" value="1" style="margin-bottom: 5px;margin-right: 5px" checked/>
                <label for="strategy_4" style="cursor: pointer;">权重轮询</label>
            </div>
        </div>

        <div class="form_group" style="display:none;">
            <label class="form_label col-xs-3">切换策略：</label>
            <div class="col-xs-9" style="margin-top: 5px">
                <input name="strategy" type="hidden"/>
                <input type="checkbox" id="strategy_1" value="1" style="margin-bottom: 5px;margin-right: 5px" checked/>
                <label for="strategy_1" style="cursor: pointer;">通道网络故障</label>
                <input type="checkbox" id="strategy_2" value="2" style="margin-bottom: 5px;margin-right: 5px"/>
                <label for="strategy_2" style="cursor: pointer;">发送积压</label>
                <input type="checkbox" id="strategy_3" value="3" style="margin-bottom: 5px;margin-right: 5px"/>
                <label for="strategy_3" style="cursor: pointer;">成功率低</label>
            </div>
        </div>
        <p style="color:red">权重值填整数，如:1-100，数字越大，权重越高，发送量更多</p>
    </form>
</div>
<div class="modal-footer">

    <button type="button" class="btn btn_blue" onclick="add()">保存</button>
    <button type="button" class="btn default" data-dismiss="modal">关闭</button>
</div>
<script>
    $(function () {
        $('.singleSelect').select2();
    });

    addChannel = function (network) {
        var htmlObj = getHtml()
        var net = network.slice(0, 2)
        $('.' + net + 'Div').last().append(htmlObj[net])
        $('.singleSelect').select2();
    };
    getHtml = function () {
        var ydoptions = $('select[name="ydChannels"]').first().prop("innerHTML");
        var ltoptions = $('select[name="ltChannels"]').first().prop("innerHTML");
        var dxoptions = $('select[name="dxChannels"]').first().prop("innerHTML");
        var qwoptions = $('select[name="qwChannels"]').first().prop("innerHTML");


        var ydHtml = '<div style="margin-top:10px"><select name="ydChannels" class="singleSelect" style="width: 35%">'
        ydHtml += ydoptions;
        ydHtml += '</select>&nbsp;&nbsp;权重：<input type="text" name="ydweight" class="form_control" style="width: 15%" oninput = "value=this.value.replace(/[^0-9]/g,&apos;&apos;)"/>'
        ydHtml += '&nbsp;<a class="form_control form_white" style="width: 23px;" href="javascript:;"onclick="delChannel(this);">-</a></div>'

        var ltHtml = '<div style="margin-top:10px"><select name="ltChannels" class="singleSelect" style="width: 35%">'
        ltHtml += ltoptions;
        ltHtml += '</select>&nbsp;&nbsp;权重：<input type="text"  name="ltweight" class="form_control" style="width: 15%" oninput = "value=this.value.replace(/[^0-9]/g,&apos;&apos;)" />'
        ltHtml += '&nbsp;<a class="form_control form_white" style="width: 23px;" href="javascript:;"onclick="delChannel(this);">-</a></div>'

        var dxHtml = '<div style="margin-top:10px"><select name="dxChannels" class="singleSelect" style="width: 35%">'
        dxHtml += dxoptions;
        dxHtml += '</select>&nbsp&nbsp;;权重：<input type="text"   name="dxweight" class="form_control" style="width: 15%" oninput = "value=this.value.replace(/[^0-9]/g,&apos;&apos;)" />'
        dxHtml += '&nbsp;<a class="form_control form_white" style="width: 23px;" href="javascript:;"onclick="delChannel(this);">-</a></div>'

        var qwHtml = '<div style="margin-top:10px"><select name="qwChannels" class="singleSelect" style="width: 35%">'
        qwHtml += qwoptions;
        qwHtml += '</select>&nbsp;&nbsp;权重：<input type="text"  name="qwweight" class="form_control" style="width: 15%" oninput = "value=this.value.replace(/[^0-9]/g,&apos;&apos;)" />'
        qwHtml += '&nbsp;<a class="form_control form_white" style="width: 23px;" href="javascript:;"onclick="delChannel(this);">-</a></div>'
        return {yd: ydHtml, lt: ltHtml, dx: dxHtml, qw: qwHtml}

    };

    change = function (e) {
        var net = e.target.value, n = ''
        if (net == 1) {
            n = 'lt'
        }
        if (net == 2) {
            n = 'yd'
        }
        if (net == 3) {
            n = 'dx'
        }
        if (net == 4) {
            n = 'qw'
        }
        $('.' + n + 'Div').css('display', 'block').siblings().css('display', 'none')
    };


    delChannel = function (_slf) {
        $(_slf).closest('div').remove()
    };


    add = function () {
        var network = $('#addForm select[name="network"]').val()
        var net = '', channels = '', weight = '', overstocks = '';
        if (network == 1) {
            net = 'lt'
        }
        if (network == 2) {
            net = 'yd'
        }
        if (network == 3) {
            net = 'dx'
        }
        if (network == 4) {
            net = 'qw'
        }
        let isRepeat = false;
        let channelIdArrar = [];
        $('.' + net + 'Div').find('select[name="' + net + 'Channels"]').each(function (i, el) {
            let val = el.value;
            if (channelIdArrar.includes(val)) {
                Dialog.alertError("通道组内已存在同名通道,请重新选择")
                isRepeat = true;
                return false;
            }
            channelIdArrar.push(val)
        })
        if (isRepeat) {
            return false;
        }
        channels = channelIdArrar.join()
        $('.' + net + 'Div').find('input[name="' + net + 'weight"]').each(function (i, el) {
            weight += el.value + ','
        })
        var strategy = ''
        if ($('#strategy_1').prop('checked')) strategy += 1 + ','
        if ($('#strategy_2').prop('checked')) strategy += 2 + ','
        if ($('#strategy_3').prop('checked')) strategy += 3 + ','
        $('#addForm input[name="strategy"]').val(strategy.replace(/,$/, ''))
        $('#addForm input[name="channels"]').val(channels.replace(/,$/, ''))
        let weightStr = weight.replace(/,$/, '');
        if (!weightStr || weightStr === '') {
            Dialog.alertError("权重不能为空")
            return false;
        }
        $('#addForm input[name="weight"]').val(weightStr)
        $('#addForm input[name="overstocks"]').val(overstocks.replace(/,$/, ''))
        submitForm('addForm', basepage + '/spList/add.html', function (data) {
            if (data && data.returnCode == '200') {
                Dialog.alertSucc(data.returnMsg);
            }
            window.setTimeout(() => {
                window.location.reload();
            }, 1000)
        }, function (data) {
            alert(data.returnMsg);
        })
    };
</script>


