<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改活动</title>

    <style type="text/css">
        table {
            table-layout: fixed !important;
        }

        th {
            background: rgb(146, 208, 80);
        }

        td, th {
            max-width: 400px;
            word-wrap: break-word;
        }

        .table-hover > tbody > tr:hover {
            background-color: #c8bd6d;
        }

        input {
            width: 60px;
        }

    </style>
</head>

<body>
<div class="content_wrapper">
    <div id="msg-tip"></div>
    <div class="container-fluid ">
        <div class="row">
            <div class="col-sm-12">
                <aside>
                    <header><i class="fa fa-fw fa-file"></i>概率干预修正区间</header>
                    <section>
                        <div class="container-fluid">
                            <div class="row" style="margin:5px;0">
                                <button type="button" class="btn btn-primary" id="goodsSubmitBtn">提交</button>
                            </div>
                            <hr>
                            <div class="row">
                                <div class="col-sm-12">
                                    <form class="form-horizontal" method="post" id="goodForm" action="">
                                        <div class="form-group">
                                            <div id="ceProConfList"></div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    var ceOptions = buildCeOptions()
    initReward()

    function initReward() {
        $("#ceProConfList").empty();
        initCeProWrap();
        const confData = JSON.parse('<?php echo json_encode($conf);?>')

        $.each(confData, (lvIdx, item) => {
            $('#addCeProLvWrapBtn').click()
            $(`input[name="conf[${lvIdx}][s_lv]"]`).val(item.s_lv)
            $(`input[name="conf[${lvIdx}][e_lv]"]`).val(item.e_lv)

            $.each(item.conf, (stageKey, rewardItem) => {
                $('.addCeProSpinsTrBtn:last').click()

                $(`input[name="conf[${lvIdx}][conf][${stageKey}][s_sp]"]`).val(rewardItem.s_sp)
                $(`input[name="conf[${lvIdx}][conf][${stageKey}][e_sp]"]`).val(rewardItem.e_sp)
                $(`select[name="conf[${lvIdx}][conf][${stageKey}][ce]"]`).val(rewardItem.ce)
            })
        })
    }

    function buildCeOptions() {
        return `<option value="0">正常概率</option>
                <option value="1">一级概率干预</option>
                <option value="2">二级概率干预</option>
                <option value="3">三级概率干预</option>`
    }

    function initCeProWrap() {
        CeProLvCnt = 0;
        CeProSpinsStages = {}

        var html = CeProWrapStageTable();
        $("#ceProConfList").append(html);
    }

    function CeProWrapStageTable() {
        return `
         <div class="text-center" style="margin:5px;padding:5px;">
            <button style="margin-top: 20px" id="addCeProLvWrapBtn" class="btn btn-primary" onclick="addCeProLvWrap(this)" type="button">添加等级区间</button>
            <button style="margin-top: 20px" class="btn btn-danger" onclick="delCeProLvWrap()" type="button">删除等级区间</button>
         </div>`
    }

    function addCeProLvWrap(obj) {
        var lvIdx = CeProLvCnt++

        CeProSpinsStages[lvIdx] = 0
        var html = `
        <div class="CeProLvWrap" id="CeProlvWrap_${lvIdx}" data-idx="${lvIdx}" style="margin:10px;padding:5px;border:solid 1px goldenrod;">
            <table class="table table-bordered" >
                <thead>
                    <tr>
                        <td colspan="3">
                             <div class="form-group">
                                <label class="col-sm-1 control-label m-b">等级区间: </label>
                                <div class="col-sm-3 input-group">
                                    <input type="text" style="text-align: center" class="form-control" name="conf[${lvIdx}][s_lv]" value="0">
                                    <span class="input-group-addon">-</span>
                                    <input type="text" style="text-align: center" class="form-control" name="conf[${lvIdx}][e_lv]" value="0">
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th width="120">体力下限</th>
                        <th width="120">体力上限</th>
                        <th >干预等级</th>
                    </tr>
                </thead>
                <tbody id="CeProRewardBody_${lvIdx}"></tbody>
                <tr>
                    <td colspan="3">
                        <div class="text-center" style="margin-top: 20px">
                            <botton class="btn btn-primary addCeProSpinsTrBtn" onclick="addCeProRewardTr(this)">添加</botton>
                            <botton class="btn btn-danger del-tr" onclick="delCeProRewardTr(this)">删除</botton>
                        </div>
                    </td>
                </tr>
           </table>
        </div>`
        $(obj).before(html)
    }

    function delCeProLvWrap(obj) {
        if (CeProLvCnt < 0) {
            return;
        }

        $('#CeProlvWrap_' + (CeProLvCnt - 1)).remove();
        CeProLvCnt--;
    }

    function addCeProRewardTr(obj) {
        var lvIdx = $(obj).parents('.CeProLvWrap').data('idx')
        var rewardStage = CeProSpinsStages[lvIdx]++
        var rewardKey = lvIdx + '_' + rewardStage

        var html = `
        <tr class="CeProRewardInfoTr" id="CeProRewardInfo_${rewardKey}" data-idx="${rewardStage}">
            <td><input name="conf[${lvIdx}][conf][${rewardStage}][s_sp]" type="number" class="form-control" value="0"></td>
            <td><input name="conf[${lvIdx}][conf][${rewardStage}][e_sp]" type="number" class="form-control" value="0"></td>
            <td>
                <select name="conf[${lvIdx}][conf][${rewardStage}][ce]" class="form-control">
                   ${ceOptions}
                </select>
            </td>
        </tr>`;

        $('#CeProRewardBody_' + lvIdx).append(html)
    }

    function delCeProRewardTr(obj) {
        var lvIdx = $(obj).parents('.CeProLvWrap').data('idx')
        var rewardKey = lvIdx + '_' + (CeProSpinsStages[lvIdx] - 1)

        if (CeProSpinsStages[lvIdx] < 0) return;
        $('#CeProRewardInfo_' + rewardKey).remove()
        CeProSpinsStages[lvIdx]--
    }

    $(function () {
        $('#goodsSubmitBtn').click(function () {
            const data = $('#goodForm').toObject()
            $.ajax({
                url: rootPath + 'slot/ceProConfUpdate',
                type: 'POST',
                data: data,
                dataType: 'json',
                success: function (data) {
                    alert(data.msg);

                    if (data.ret == 0) {
                        window.location.reload();
                    }
                },
                error: function (data) {
                    alert(data.msg);
                }
            });
        });
    });


</script>
