<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改活动</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>public/js/bootstrap/bootstrap.min.css">
    <link rel="stylesheet"
          href="<?php echo base_url(); ?>public/js/vendor/bootstrap-datepicker/css/bootstrap-datepicker.standalone.min.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>public/css/jquery.timepicker.min.css">
    <!-- Select2 -->
    <link rel="stylesheet" href="<?php echo base_url(); ?>public/js/vendor/select2/select2.min.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>public/css/vendor/bootstrap/bootstrap-table.css">
    <link rel="stylesheet" href="<?php echo base_url(); ?>public/css/vendor/bootstrap/table-fix-column.css">
    <link rel="stylesheet"
          href="<?php echo base_url(); ?>public/node_modules/bootstrap-select/dist/css/bootstrap-select.min.css">
    <script src="<?php echo base_url(); ?>public/node_modules/bootstrap-select/dist/js/bootstrap-select.min.js"></script>

    <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;
        }

        #roleTable tr:nth-child(5n) {
            background: rgb(198, 239, 206);
        }

        /**隔五行*/

        .fixed-table-toolbar {
            display: none;
        }

        .fileinput-button {
            position: relative;
            top: -5px;
        }

        .fileinput-button input {
            position: absolute;
            right: 0px;
            top: 0px;
            opacity: 0;
            -ms-filter: 'alpha(opacity=0)';
        }
    </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" style="margin-bottom: 10px">
                            <div class="row">
                                <div class="col-sm-12">
                                    <button type="button" class="btn btn-success" id="submitBtn">提交</button>
                                </div>
                            </div>
                        </div>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="table-responsive ">
                                        <form id="actUnlockData">
                                            <table class="table table-bordered" id="actUnlockData">
                                                <thead>
                                                <tr>
                                                    <th width="120">ID</th>
                                                    <th>活动名</th>
                                                    <th>预告出现等级</th>
                                                    <th>预告消失等级</th>
                                                    <th width="100">操作</th>
                                                </tr>
                                                </thead>
                                                <tbody id="ActUnlockConf"></tbody>
                                                <tr>
                                                    <td colspan="5">
                                                        <div class="text-center" style="margin-top: 20px">
                                                            <botton class="btn btn-primary addActUnlockConfTrBtn" onclick="addActUnlockConfTr(this)">添加</botton>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </table>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>
</div>
</body>

<script src="<?php echo base_url(); ?>static/common/js/props.js"></script>
<script src="<?php echo base_url(); ?>public/js/vendor/bootstrap/src/bootstrap-table.js"></script>
<script src="<?php echo base_url(); ?>public/js/vendor/bootstrap/src/table-fix-column.js"></script>

<script>
    let ActUnlockTrCount = 0;

    const reward = <?php echo json_encode($conf);?>;
    let selectOptions = ''
    $.each(<?php echo json_encode($option);?>, function (i, o) {
        selectOptions += `<option value="${i}">${o}</option>`
    });

    initReward()

    function initReward() {
        $("#ActUnlockConf").empty();


        // 奖励回写
        console.log('reward:', reward)
        console.log('selectOptions:', selectOptions)
        if (!reward) {
            return
        }

        $.each(reward, function (idx, item) {
            $('.addActUnlockConfTrBtn').click()
            $(`select[name="conf[${idx}][key]"]`).val(item.key)
            $(`input[name="conf[${idx}][showLv]"]`).val(item.showLv)
            $(`input[name="conf[${idx}][hideLv]"]`).val(item.hideLv)
        })
    }

    function addActUnlockConfTr() {
        const rIdx = ActUnlockTrCount++
        const html = `
        <tr id="ActUnlockTr_${rIdx}" data-idx="${rIdx}">
            <td width="120"><input type="text" class="form-control" value="${rIdx + 1}" readonly ></td>
            <td><select class="form-control" name="conf[${rIdx}][key]">
                ${selectOptions}
            </select></td>
            <td><input type="number" class="form-control" name="conf[${rIdx}][showLv]" value="0" ></td>
            <td><input type="number" class="form-control" name="conf[${rIdx}][hideLv]" value="0" ></td>
            <td width="100">
                <button type="button" class="btn btn-outline btn-danger" onclick="delActUnlockConfTr(${rIdx})">删除</button>
            </td>
        </tr>
    `;
        $('#ActUnlockConf').append(html)
    }

    function delActUnlockConfTr(idx) {
        $("#ActUnlockTr_" + idx).remove();
    }
</script>
<script>
    $(function () {
        //提交表格数据
        $('#submitBtn').click(function () {
            const data = $('#actUnlockData').toObject();
            $.ajax({
                type: 'POST',
                dataType: 'json',
                data: data,
                url: 'config/saveActUnlockConf',
                success: function (data) {
                    alert(data.msg);
                    if (data.ret == 0) {
                        window.location.reload()
                    }
                },
                error: function (xhr, error) {
                    alert(data.msg);
                }
            });
        });
    });
</script>
