@layout("/common/_container.html"){
<style>
    .newWidth, .single-line{
        max-width:350px !important;display: initial !important;
    }
</style>

<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-content">

                <div class="ibox-title">
                    <h5>储值管理</h5>
                </div>
                <input type="hidden" id="content"       value='${content}'>
                <input type="hidden" id="time"          value="${time}">
                <div class="ibox-title">
                    <div style="display: flex">
                        <label for="editor_1">*常规储值:</label>
                        <div class="col-sm-2">
                            <#button btnCss="info" name="添加" id="ensure" icon="fa-check" />
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row row-lg">
                            <div class="col-sm-6">
                                <div style="height: 200px;width: 1100px; border: 1px solid #e5e6e7;overflow-y: auto;">
                                    <table class="table table-striped table-bordered table-hover table-condensed">
                                        <thead>
                                        </thead>
                                        <tbody id="rules">
<!--                                        <tr class="rulesClass" style="display: flex; justify-content: space-between;">-->
<!--                                            <td style="text-align: center;">*充值金额：<input placeholder="请输入充值金额"  id="recharge" name="recharge" value=""></td>-->
<!--                                            <td style="text-align: center;">*用户兑换玩湃币：<input placeholder="请输入兑换玩湃币"  id="user" name="user" value=""></td>-->
<!--                                            <td style="text-align: center;">*会员兑换玩湃币：<input placeholder="请输入兑换玩湃币"  id="vip" name="vip" value=""></td>-->
<!--                                            <td style="text-align: center;"><button onclick="deleteSub(this)">删除</button></td>-->
<!--                                        </tr>-->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ibox-title">
                    <div style="display: flex">
                        <label for="editor_1">*特殊时间储值:</label>

                        <div class="col-sm-2">
                            <#button btnCss="info" name="添加" id="ensureTime" icon="fa-check" />
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row row-lg">
                            <div class="col-sm-6">
                                <div style="height: 200px;width: 1100px; border: 1px solid #e5e6e7;overflow-y: auto;">
                                    <#TimeCon id="beginTime" name="有效期" isTime="false"/>

                                    <table  class="table table-striped table-bordered table-hover table-condensed">
                                        <thead>
                                        <tr>
                                        </tr>
                                        </thead>
                                        <tbody id="rulesTime">
<!--                                        <tr class="rulesTimeClass" style="display: flex; justify-content: space-between;">-->
<!--                                            <td style="text-align: center;">*充值金额：<input placeholder="请输入充值金额"  id="rechargeTime" name="rechargeTime" value=""></td>-->
<!--                                            <td style="text-align: center;">*用户兑换玩湃币：<input placeholder="请输入兑换玩湃币"  id="userTime" name="userTime" value=""></td>-->
<!--                                            <td style="text-align: center;">*会员兑换玩湃币：<input placeholder="请输入兑换玩湃币"  id="vipTime" name="vipTime" value=""></td>-->
<!--                                            <td style="text-align: center;"><button onclick="deleteSub(this)">删除</button></td>-->
<!--                                        </tr>-->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                            <div class="tab-content">
                                <div id="tab-1" class="tab-pane active">
                                    <div class="panel-body">
                                        <div>
                                        <label for="editor_1">*储值说明:</label>
                                        <textarea id="editor_1" type="text/plain" style="width:1200px;height:400px;">${description}</textarea>
                                        </div>
                                        <div class="row btn-group-m-t">
                                            <div class="col-sm-10 col-sm-offset-5">
                                                <#button btnCss="info" name="保存" id="ensure" icon="fa-check" clickFun="add();" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    laydate.render({
        elem: '#beginTime'
        , trigger: 'click'
        , range: true
    });

    const data1 = {
        content:"",
        sort:null,
        answer:""
    };
    var editor_1 = null;
    $(function () {
        var c = $("#content").val()
        var d= $("#description").val()
        var t = $("#time").val();
        var rulesTable = document.getElementById("rules");
        var rulesTimeTable = document.getElementById("rulesTime");
        // 将json串解析为对象
        var jsonData = c;
        var data = JSON.parse(jsonData);
        // 普通储值规则
        for (var i = 0; i < data.rules.length; i++) {
            var rule = data.rules[i];

            var row = document.createElement("tr");
            row.className = "rulesClass";
            row.style.display = "flex";
            row.style.justifyContent = "space-between";

            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            var td4 = document.createElement("td");
            td1.style.textAlign = "center";
            td2.style.textAlign = "center";
            td3.style.textAlign = "center";
            td4.style.textAlign = "center";

            td1.innerHTML = "*充值金额：<input placeholder='请输入充值金额' id='recharge' name='recharge' value='" + rule.money + "'>";
            row.appendChild(td1);
            td2.innerHTML = "*用户兑换玩湃币：<input placeholder='请输入兑换玩湃币' id='user' name='user' value='" + rule.usersCoins + "'>";
            row.appendChild(td2);
            td3.innerHTML = "*会员兑换玩湃币：<input placeholder='请输入兑换玩湃币' id='vip' name='vip' value='" + rule.MemberCoins + "'>";
            row.appendChild(td3);
            td4.innerHTML = "<button onclick=\"deleteSub(this)\">删除</button>";
            row.appendChild(td4);
            // 依次创建其他列，并添加到row中
            rulesTable.appendChild(row);
        }
        // 时间储值规则
        for (var i = 0; i < data.time_rules.length; i++) {
            var rule = data.time_rules[i];
            var row = document.createElement("tr");
            row.className = "rulesTimeClass";
            row.style.display = "flex";
            row.style.justifyContent = "space-between";
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            var td4 = document.createElement("td");
            td1.style.textAlign = "center";
            td2.style.textAlign = "center";
            td3.style.textAlign = "center";
            td4.style.textAlign = "center";
            td1.innerHTML = "*充值金额：<input placeholder='请输入充值金额' id='rechargeTime' name='rechargeTime' value='" + rule.money + "'>";
            row.appendChild(td1);
            td2.innerHTML = "*用户兑换玩湃币：<input placeholder='请输入兑换玩湃币' id='userTime' name='userTime' value='" + rule.usersCoins + "'>";
            row.appendChild(td2);
            td3.innerHTML = "*会员兑换玩湃币：<input placeholder='请输入兑换玩湃币' id='vipTime' name='vipTime' value='" + rule.MemberCoins + "'>";
            row.appendChild(td3);
            td4.innerHTML = "<button onclick=\"deleteSub(this)\">删除</button>";
            row.appendChild(td4);
            // 依次创建其他列，并添加到row中
            rulesTimeTable.appendChild(row);
        }
        $("#beginTime").val(t);
        //初始化编辑器
        editor_1 = UE.getEditor('editor_1');
        var addButton = document.getElementById('ensure');
        addButton.addEventListener('click', function () {
            if ($("#recharge").val() == ""){
                Feng.error("请输入充值金额")
                return;
            }
            if ($("#user").val() == ""){
                Feng.error("请输入兑换玩湃币-用户")
                return;
            }
            if ($("#vip").val() == ""){
                Feng.error("请输入兑换玩湃币-会员")
                return;
            }
            //封装数据
            var str = '<tr class="rulesClass" style="display: flex; justify-content: space-between;">' +
                '<td style="text-align: center;">*充值金额：<input placeholder="请输入充值金额"  id="recharge" name="rulesClassValue" value=""></td>' +
                '<td style="text-align: center;">*用户兑换玩湃币：<input placeholder="请输入兑换玩湃币"  id="user" name="rulesClassValue" value=""></td>' +
                '<td style="text-align: center;">*会员兑换玩湃币：<input placeholder="请输入兑换玩湃币"  id="vip" name="rulesClassValue" value=""></td>' +
                '<td style="text-align: center;"><button onclick="deleteSub(this)">移除</button></td></tr>';
            $("#rules").append(str);
        });

        var addButtonTime = document.getElementById('ensureTime');
        addButtonTime.addEventListener('click', function () {
            //封装数据
            var str = '<tr class="rulesTimeClass" style="display: flex; justify-content: space-between;">' +
                '<td style="text-align: center;">*充值金额：<input placeholder="请输入充值金额"  id="rechargeTime" name="rulesTimeClassValue" value=""></td>' +
                '<td style="text-align: center;">*用户兑换玩湃币：<input placeholder="请输入兑换玩湃币"  id="userTime" name="rulesTimeClassValue" value=""></td>' +
                '<td style="text-align: center;">*会员兑换玩湃币：<input placeholder="请输入兑换玩湃币"  id="vipTime" name="rulesTimeClassValue" value=""></td>' +
                '<td style="text-align: center;"><button onclick="deleteSub(this)">移除</button></td></tr>';
            $("#rulesTime").append(str);
        })
    });


    function deleteSub(e) {
        console.log("删除")
        $(e).parent().parent().remove();
    }
    function add(){
        var id = $("#id").val();

        var data = {
            rules: [],
            time_rules: []
        };
        var res = {
            id:null,
            content:"",
            description : ""
        };
        var time = $("#beginTime").val();
        var startTime = time.split(" - ")[0];
        var endTime = time.split(" - ")[1];
        if (startTime == endTime){
            Feng.error("有效期不能重复！")
            return;
        }
        var rulesClassElements = document.querySelectorAll('#rules .rulesClass');
        rulesClassElements.forEach(function(rulesTimeClassElement) {
            var recharge = rulesTimeClassElement.querySelector("#recharge").value;
            var user = rulesTimeClassElement.querySelector("#user").value;
            var vip = rulesTimeClassElement.querySelector("#vip").value;
            if (recharge ===""){
                Feng.error("请输入充值金额");
            }
            if (recharge ===""){
                Feng.error("请输入用户兑换玩湃币");
            }
            if (recharge ===""){
                Feng.error("请输入会员兑换玩湃币");
            }
            var rulesArr={
                    money:recharge,
                    usersCoins:user,
                    MemberCoins:vip,
                    startTime:"",
                    endTime:"",
                };
            data.rules.push(rulesArr);
        });

        var rulesTimeClassElements = document.querySelectorAll('#rulesTime .rulesTimeClass');
        rulesTimeClassElements.forEach(function(rulesTimeClassElement) {
            var recharge = rulesTimeClassElement.querySelector("#rechargeTime").value;
            var user = rulesTimeClassElement.querySelector("#userTime").value;
            var vip = rulesTimeClassElement.querySelector("#vipTime").value;
            if (recharge ===""){
                Feng.error("请输入充值金额");
            }
            if (user ===""){
                Feng.error("请输入用户兑换玩湃币");
            }
            if (vip ===""){
                Feng.error("请输入会员兑换玩湃币");
            }
            if (time ===""){
                Feng.error("请选择有效期");
            }
            var rulesTimeArr={
                money:recharge,
                usersCoins:user,
                MemberCoins:vip,
                startTime:startTime,
                endTime:endTime,
            };
            data.time_rules.push(rulesTimeArr);
        });
        if (editor_1.getContent() === ""){
            Feng.error("储值说明不能为空!");
            return;
        }
        var result = JSON.stringify(data);
        res.content = result;
        var description = editor_1.getContent();
        res.description = description;

        $.ajax({
            url: Feng.ctxPath + "/storeValueConfig/addStoreValueConfig",
            type: "POST",
            contentType: "application/json", // 设置请求头的 Content-Type
            data: JSON.stringify(res), // 将数据转换为 JSON 字符串
            success: function(response) {
                Feng.success("添加成功!");
            },
            error: function(xhr, status, error) {
                var errorMessage = xhr.responseText ? xhr.responseText : "添加失败!";
                Feng.error(errorMessage);
            }
        });
    }

</script>
@}