<link rel="stylesheet" href="<?php echo base_url();?>public/plugins/datatables/jquery.dataTables.min.css">
<link rel="stylesheet" href="<?php echo base_url();?>public/plugins/datatables/extensions/Responsive/css/dataTables.responsive.css">
<div class="content_wrapper">

    <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">
                                <div class="col-sm-12">
                                    <div class="btn-group" style="margin-bottom:20px;">
                                        <button type="button" class="btn btn-success" data-toggle="modal" data-target="#actionCode">创建兑换码</button>
                                    </div>
                                    <div class="table-responsive">
                                        <table id="exchangeTable" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                                            <thead>
                                            <tr>
                                                <th>序号</th>
                                                <th>ID</th>
                                                <th width="80">兑换码</th>
                                                <th>奖励</th>
                                                <th>已领奖人数</th>
                                                <th>状态</th>
                                                <th>限制人数</th>
                                                <th>指定用户</th>
                                                <th>备注</th>
                                                <th>过期时间</th>
                                                <th>创建时间</th>
                                            </tr>
                                            </thead>
                                            <tbody>

                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </aside>
            </div>
        </div>
    </div>

</div>

<!-- 操作金币弹出框 -->
<div class="modal fade" id="actionCode" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" style="width:1000px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">创建兑换码</h4>
            </div>
            <form class="form-horizontal J_ajaxForm" role="form" method="post" action="exchange/actionCreateCode" data-callBack="updatecode">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">奖励金币:</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" placeholder="奖励金币数量" name="coins">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">奖励体力:</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" placeholder="奖励体力数量" name="spins">
                        </div>
                    </div>
                    <div class="form-group addOrDelControl" id="vipDiv">
                        <label class="col-sm-3 control-label">奖励道具:</label>
                        <div class="col-sm-9">
                            <div class="col-sm-12" style="margin-top: 1rem;">
                                <button type="button" class="btn btn-success addParent" >新增道具</button>
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">限制人数:</label>
                        <div class="col-sm-9">
                            <input type="number" class="form-control" placeholder="领取兑换码人数上限" name="limitnum">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">过期时间:</label>
                        <div class="col-sm-5">
                            <input type="text" id="test-limit2" class="form-control" placeholder="兑换码过期日期" name="day">
                        </div>
                        <div class="col-sm-4">
                            <input type="text" id="test-limit3" class="form-control" placeholder="兑换码过期时间" name="time">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">备注：</label>
                        <div class="col-sm-9">
                            <textarea name="remake" class="form-control" rows="4"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">限制用户类型</label>
                        <div class="col-sm-9">
                            <label class="radio-inline">
                                <input type="radio" name="userType" class="typeRadio" value="0" checked> 所有
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="userType" class="typeRadio" value="1"> FB
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="userType" class="typeRadio" value="2"> 游客
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="userType" class="typeRadio" value="3"> VIP
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="userType" class="typeRadio" value="4"> 指定
                            </label>
                        </div>
                    </div>
                    <div class="form-group" id="userLimitDiv" style="display: none">
                        <label class="col-sm-3 control-label">用户限定*: </label>
                        <div class="col-sm-9">
                            <textarea id="textareaId" rows="4" onchange="checkExport()" class="form-control" placeholder="使用逗号 , 分割" name="userLimit"><?php echo $info['userLimit']??'';?></textarea>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary J_ajaxSubmitBtn">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>
    <script src="<?php echo base_url();?>public/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="<?php echo base_url();?>public/plugins/datatables/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<!--select2-->
<link rel="stylesheet" href="<?php echo base_url();?>public/js/vendor/select2/select2.min.css">
<script src="<?php echo base_url();?>public/js/vendor/select2/select2.full.min.js"></script>
<script type="text/javascript">
    laydate.render({
        elem: '#test-limit2'
        ,min: 0
        ,max: 999
    });
    //限定可选时间
    laydate.render({
        elem: '#test-limit3'
        ,type: 'time'
        // ,min: '09:30:00'
        // ,max: '17:30:00'
        ,btns: ['clear', 'confirm']
    });
</script>
<script type="text/javascript">
    var skins = {
        19:JSON.parse('<?php echo json_encode($chestSkin); ?>'),
        41:JSON.parse('<?php echo json_encode($easterEggSkin); ?>')
    }
    var idData = JSON.parse('<?php echo json_encode($props); ?>');
    $('.addParent').on("click",function(){
        var str = '<div class="col-sm-12 prizeParent" style="margin-top: 1rem;padding-left:0">' +
            '<div class="col-sm-3">' +
            '<select class="form-control typeControl select2" name="props[id][]">';
        for(var x in idData) {
            str += '<option value="'+x+'">'+idData[x]['msg']+'</option>';
        }
        str +='</select>' +
            '</div>' +
                '<div class="col-sm-3">' +
                    '<select class="form-control skin select2" name="props[skin][]">'+
                        '<option hidden >选择皮肤</option>'+
                    '</select>'+
                '</div>' +
                '<div class="col-sm-3">' +
                    '<input type="number" class="form-control" placeholder="道具数量" name="props[num][]" min="1" value="1">'+
                '</div>' +
                '<div class="col-sm-1">' +
                    '<button type="button" class="btn btn-danger deleteParent" >删除</button>' +
                '</div>' +
            '</div>';
        $(this).parent().before(str);
        $('.select2').select2({})
    });
    $('.addOrDelControl').on("change",'.typeControl',function(){
        var _this = $(this)
        var propId = _this.val();
        console.log(skins[propId])
        if(skins[propId] != undefined ){
            console.log(skins[propId].length)
            var selector = _this.parents('.prizeParent').find('.skin')
            console.log(selector)
            selector.empty()
            $.each(skins[propId], function(i, o){
                selector.append('<option value="'+i+'">'+o+'</option>')
            })
            $('.select2').select2({})
        }
    });
    $('.addOrDelControl').on("click",'.deleteParent',function(){
        $(this).parent().parent().remove();
    });
    $(".typeRadio").change(function(){
        var userType = $(this).val();
        if(userType == 4){
            $("#userLimitDiv").show(300);
        }else{
            $("#userLimitDiv").hide(300);
        }
    });
    function updatecode() {
        // location.reload();
    }
    function checkExport() {
        var textarea = $('#textareaId').val();
        $('#textareaId').val(textarea.replace(/，/g,","));
    }

    $(function () {
        var exchangeTable = $("#exchangeTable").DataTable({
            "paging": true,
            "select": true,
            "processing": true,
            "serverSide": true,
            "language": {
                'lengthMenu': '每页显示 _MENU_ 记录',
                'zeroRecords': '没有数据',
                'info': ' 第_PAGE_ 页/ _PAGES_页，共 _TOTAL_ 条',
                'infoEmpty': '没有符合条件的记录',
                'search': '查找',
                'infoFiltered': '(从  _MAX_ 条记录中过滤)',
                'paginate': { "first":  "首页 ", "last": "末页", "next": "下一页","previous": "上一页"}

            },
            "ajax": {
                url: rootPath + "exchange/listData",
                type:"post",
                //增加参数查询参数
                data:function(data){

                }
            },
            "lengthChange": true,
            "searching": false,
            "ordering": false,
            "info": true,
            "autoWidth": false,
            "columns": [
                {"data": "index"},
                {"data": "id"},
                {"data": "code"},
                {"data": "reward"},
                {"data": "rwdNum"},
                {"data": "status"},
                {"data": "limit"},
                {"data": "userLimit", render:function (data) {
                    return '<textarea id="textareaId" rows="4" readonly class="form-control" placeholder="使用逗号 , 分割" name="userLimit">'+data+'</textarea>';
                }},
                {"data": "remake"},
                {"data": "expire"},
                {"data": "time"},
            ]
        });

        //当点击search按钮时按条件重新加载数据
        $("#searchBtn").click(function(){
            if($("#exchangeForm").valid()) {
                exchangeTable.ajax.reload();
            }
        });


    });
</script>