<!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: 80px;
        }

        #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" style="padding-left: 15px;">
                                <button type="button" style="margin-bottom: 10px;width: 80px;" class="btn btn-danger" id="submitBtn">提交</button>
                                <span id="filespan" class="btn btn-success fileinput-button" style="width: 80px">
                                    <span >导入</span>
                                    <input type="file" id="upfile">
                                </span>
                                <input type="button" style="display: none;margin-bottom: 10px;width: 80px;" class="btn btn-success" value="上传" id="btnfloor"/>
                                <a type="button" href="/Export/cardFloorConf" style="margin-bottom: 10px;width: 80px;" class="btn btn-success">导出</a>
                            </div>
                        </div>
                        <div class="container-fluid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <div class="table-responsive ">
                                        <form id="cardFloorData">
                                            <table class="table table-bordered">
                                                <thead>
                                                <tr>
                                                    <th width="120">ID</th>
                                                    <th>最小等级</th>
                                                    <th>最大等级</th>
                                                    <th>最小集齐卡片数</th>
                                                    <th>最大集齐卡片数</th>
                                                    <th>保底值</th>
                                                    <th width="100">操作</th>
                                                </tr>
                                                </thead>
                                                <tbody id="CardFloorConf"></tbody>
                                                <tr>
                                                    <td colspan="7">
                                                        <div class="text-center" style="margin-top: 20px">
                                                            <botton class="btn btn-primary addCardFloorConfTrBtn" onclick="addCardFloorConfTr(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 CardFloorTrCount = 0;
    const reward = <?php echo json_encode($conf);?>;

    initReward()

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


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

        $.each(reward, function (idx, item) {
            $('.addCardFloorConfTrBtn').click()
            $(`input[name="conf[${idx}][lvStart]"]`).val(item.lvStart)
            $(`input[name="conf[${idx}][lvEnd]"]`).val(item.lvEnd)
            $(`input[name="conf[${idx}][cardNumStart]"]`).val(item.cardNumStart)
            $(`input[name="conf[${idx}][cardNumEnd]"]`).val(item.cardNumEnd)
            $(`input[name="conf[${idx}][floorValue]"]`).val(item.floorValue)
        })
    }

    function addCardFloorConfTr() {
        const rIdx = CardFloorTrCount++
        const html = `
        <tr id="CardFloorTr_${rIdx}" data-idx="${rIdx}">
            <td width="120"><input type="text" class="form-control" value="${rIdx + 1}" readonly ></td>
            <td><input type="number" class="form-control" name="conf[${rIdx}][lvStart]" value="0" ></td>
            <td><input type="number" class="form-control" name="conf[${rIdx}][lvEnd]" value="0" ></td>
            <td><input type="number" class="form-control" name="conf[${rIdx}][cardNumStart]" value="0" ></td>
            <td><input type="number" class="form-control" name="conf[${rIdx}][cardNumEnd]" value="0" ></td>
            <td><input type="number" class="form-control" name="conf[${rIdx}][floorValue]" value="0" ></td>
            <td width="100">
                <button type="button" class="btn btn-outline btn-danger" onclick="delCardFloorConfTr(${rIdx})">删除</button>
            </td>
        </tr>
    `;
        $('#CardFloorConf').append(html)
    }

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

        $("#btnfloor").click(function(){
            var formData = new FormData();
            formData.append("file",document.getElementById("upfile").files[0]);
            showLoading()
            $.ajax({
                type: "POST", // 数据提交类型
                url: "Import/cardFloorConf", // 发送地址
                data: formData, //发送数据
                async: true, // 是否异步
                processData: false, //processData 默认为false，当设置为true的时候,jquery ajax 提交的时候不会序列化 data，而是直接使用data
                contentType: false, //
                success: function(data) { // 成功回调
                    hideLoading();
                    data = JSON.parse(data);
                    if(data.ret == 0){
                        window.location.reload();
                    }else {
                        msgTip = $('#msg-tip');
                        msgTip.messager().warn('上传失败');
                    }
                },
                error:function(){
                    hideLoading();
                }
            });
        });

        $("#filespan").on("change", "input[type='file']", function() {
            var filePath = $(this).val();
            //如果仅上传图片 if(filePath.indexOf("jpg") != -1 || filePath.indexOf("png") != -1) {
            if (filePath) {
                $("#btnfloor").click()
            } else {
                return false
            }
        });
    });
</script>
