

    <div class="layui-row">
        <div class="layui-col-md4">
            <button class="layui-btn layui-btn-sm" id="addRedemptionCard">增加</button>
            <button class="layui-btn layui-btn-danger layui-btn-sm" id="batchDeleteRedemptionCard">批量删除</button>
        </div>
    </div>

    <table id="redemptionCardTable" lay-filter="redemptionCardTable">

    </table>
    
    <script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">删除</a>
    </script>


    <script>
        layui.use(['table', 'layer',['form']], function(){
            var table = layui.table;
            var layer = layui.layer;
            var form = layui.form;
            // 渲染表格
            table.render({
                elem: '#redemptionCardTable',
                url: '/admin/redemption-cards/', // 数据接口URL
                page: true, // 开启分页
                limit: 10, // 每页显示的条数
                method: 'post', // 使用POST请求
                where: { // 这里传入的是额外的请求参数，LayUI会将这些参数合并到请求数据中
                    action: 'fetch', // 指定操作类型
                },
                contentType: 'application/json', // 设置发送请求的内容类型为JSON
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'code', title: '卡密', sort: true},
                   {field: 'card_type', title: '卡类型', templet: function(d){
                        return d.card_type === 'member' ? '会员卡' : '额度卡';
                    }},
                    {field: 'created_date', title: '生成日期', sort: true, templet: function(d){
                        return layui.util.toDateString(d.created_date, 'yyyy-MM-dd HH:mm:ss');
                    }},
                    {field: 'expiry_date', title: '到期时间', sort: true, templet: function(d){
                        return layui.util.toDateString(d.expiry_date, 'yyyy-MM-dd HH:mm:ss');
                    }},
                    {field: 'is_used', title: '是否已使用', templet: function(d) { return d.is_used ? '是' : '否'; }},
                    
                    {field: 'validity_period', title: '额度'},
                    {field: 'used_by_openid', title: '使用者OpenID'},
                    {title: '操作', toolbar: '#barDemo'}
                ]]
            });

            // 监听工具条
// 监听工具条
table.on('tool(redemptionCardTable)', function(obj){
    var data = obj.data; // 获得当前行数据
    if(obj.event === 'edit'){
        // 编辑操作
        console.log('编辑卡密', data);
        // 打开编辑窗口的代码...
    } else if(obj.event === 'delete'){
        // 删除操作
        layer.confirm('真的删除行么', function(index){
            axios.post('/admin/redemption-cards/', JSON.stringify({action: 'delete', id: data.id}), {
                headers: {'Content-Type': 'application/json'}
            }).then(function(response){
                if(response.data.status === 'success'){
                    layer.msg('删除成功', {icon: 1});
                    layui.table.reload('redemptionCardTable'); // 重新加载表格
                } else {
                    layer.msg('删除失败', {icon: 2});
                }
            }).catch(function(error){
                layer.msg('删除过程中出错', {icon: 2});
                console.error('删除失败', error);
            });
            layer.close(index); // 关闭确认弹窗
            // 向服务端发送删除指令的代码...
        });
    }
});

            // 监听添加卡密按钮点击事件
            document.getElementById('addRedemptionCard').onclick = function() {
                layer.open({
    type: 1,
    title: '添加卡密管理',
    area: ['500px', '400px'],
    content: '<form class="layui-form" lay-filter="addRedemptionCardForm">' +
        '<div class="layui-form-item">' +
        '<label class="layui-form-label">卡密前缀</label>' +
        '<div class="layui-input-inline">' +
         '<input style="display: none" type="text" name="action" value="add">' +
        '<input type="text" name="code_prefix" lay-verify="required" placeholder="请输入卡密前缀" autocomplete="off" class="layui-input">' +
        '</div>' +
        '</div>' +
        '<div class="layui-form-item">' +
        '<label class="layui-form-label">卡类型</label>' +
        '<div class="layui-input-inline">' +
        '<select name="card_type"  lay-verify="required">' +
        '<option value="">请选择卡类型</option>' +
        '<option value="member">会员卡</option>' +
        '<option value="quota">额度卡</option>' +
        '</select>' +
        '</div>' +
        '</div>' +
        '<div class="layui-form-item">' +
        '<label class="layui-form-label">数量</label>' +
        '<div class="layui-input-inline">' +
        '<input type="number" name="quantity" lay-verify="required" placeholder="请输入数量" autocomplete="off" class="layui-input">' +
        '</div>' +
        '</div>' +
        '<div class="layui-form-item">' +
        '<label class="layui-form-label">有效期</label>' +
        '<div class="layui-input-inline">' +
        '<input type="date" name="expiry_date" lay-verify="required" placeholder="请选择有效期" autocomplete="off" class="layui-input">' +
        '</div>' +
        '</div>' +
        '<div class="layui-form-item">' +
        '<label class="layui-form-label">额度</label>' +
        '<div class="layui-input-inline">' +
        '<input type="text" name="validity_period" lay-verify="required" placeholder="额度" autocomplete="off" class="layui-input">' +
        '</div>' +
        '</div>' +
        '<div class="layui-form-item">' +
        '<div class="layui-input-block">' +
        '<button class="layui-btn" lay-submit lay-filter="addRedemptionCard">添加</button>' +
        '</div>' +
        '</div>' +
        '</form>',
    success: function(layero, index) {
        form.render();
        layui.form.on('submit(addRedemptionCard)', function(data){
                axios.post('/admin/redemption-cards/', JSON.stringify(data.field), {
                    headers: {'Content-Type': 'application/json'}
                }).then(function(response){
                    if(response.data.status === 'success'){
                        layer.msg('操作成功', {icon: 1, time: 1000}, function(){
                            layer.close(index); // 关闭弹窗
                            layui.table.reload('redemptionCardTable'); // 重新加载表格
                        });
                    } else {
                        // 操作失败
                        layer.msg(response.data.message, {icon: 2});
                        layer.close(index); // 关闭弹窗
                    }
                }).catch(function(error){
                    layer.msg('服务器出错了', {icon: 2});
                    console.error('操作失败', error);
                });
                return false; // 阻止表单跳转。
            });
         
    }
});

            };

            // 监听批量删除按钮点击事件
            document.getElementById('batchDeleteRedemptionCard').onclick = function() {
                var checkStatus = table.checkStatus('redemptionCardTable');
                var selectedData = checkStatus.data;
                var ids = selectedData.map(function(item) {
                    return item.id;
                });
                if (selectedData.length === 0) {
                    layer.msg('请选择要删除的卡密', {icon: 5});
                } else {
                    layer.confirm('确认删除选中的卡密吗？', function(index){
                        // 发送批量删除请求...
                        axios.post('/admin/redemption-cards/', JSON.stringify({ids: ids,action:'batch_delete'}), {
                            headers: {'Content-Type': 'application/json'}
                        }).then(function(response){
                            if(response.data.status === 'success'){
                                layer.msg('批量删除成功', {icon: 1});
                                layui.table.reload('redemptionCardTable'); // 重新加载表格
                            } else {
                                layer.msg('批量删除失败', {icon: 2});
                            }
                        }).catch(function(error){
                            console.error('批量删除失败', error);
                        });
                    });
                }
            };
        });
    </script>
