<body>


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

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

    <script>
        layui.use(['table', 'layer'], function(){
            var table = layui.table;
            var layer = layui.layer;

            // 渲染表格
            table.render({
                elem: '#transactionLogTable',
                url: '/admin/transaction-logs/', // 数据接口URL
                page: true, // 开启分页
                limit: 10, // 每页显示的条数
                method: 'post', // 使用POST请求
                where: { // 这里传入的是额外的请求参数，LayUI会将这些参数合并到请求数据中
                    action: 'fetch', // 指定操作类型
                },
                contentType: 'application/json', // 设置发送请求的内容类型为JSON
                cols: [[
                    
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'transaction_no', title: '交易编号', sort: true},
                    {field: 'transaction_status', title: '交易状态', templet: function(d){
                        return d.transaction_status === 'pending' ? '待处理' : (d.transaction_status === 'completed' ? '完成' : '失败');
                    }},
                    {field: 'user_openid', title: '用户OpenID'},
                    {field: 'transaction_type', title: '交易类型',templet: function(d){
                        return d.transaction_type === 'member' ? '开通会员' : '续费会员'
                    }},
                    {field: 'transaction_amount', title: '交易金额'},
                    {field: 'remark', title: '备注', templet: function(d){
                        var remarkMap = {
                            'day': '一天会员充值',
                            'week': '一周会员充值',
                            'month': '一月会员充值',
                            'season': '三月会员充值',
                            'year': '一年会员充值'
                        };
                        return remarkMap[d.remark] || '未知';
                    }},

                    {field: 'created_at', title: '创建时间', templet: function(d){
                        return layui.util.toDateString(d.created_at, 'yyyy-MM-dd HH:mm:ss');
                    }},
                    {field: 'updated_at', title: '更新时间', templet: function(d){
                        return layui.util.toDateString(d.updated_at, 'yyyy-MM-dd HH:mm:ss');
                    }},
                    {title: '操作', toolbar: '#barDemo'}
                ]]
            });

            // 监听工具条
            table.on('tool(transactionLogTable)', function(obj){
                var data = obj.data; // 获得当前行数据
                if(obj.event === 'delete'){
                    // 删除操作
                    layer.confirm('真的删除行么', function(index){
                        axios.post('/admin/transaction-logs/', 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('transactionLogTable'); // 重新加载表格
                            } else {
                                layer.msg('删除失败', {icon: 2});
                            }
                        }).catch(function(error){
                            layer.msg('删除过程中出错', {icon: 2});
                            console.error('删除失败', error);
                        });
                        layer.close(index); // 关闭确认弹窗
                        // 向服务端发送删除指令的代码...
                    });
                }
            });

            // 监听批量删除按钮点击事件
            document.getElementById('batchDeleteTransaction').onclick = function() {
                var checkStatus = table.checkStatus('transactionLogTable');
                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/transaction-logs/', 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('transactionLogTable'); // 重新加载表格
                            } else {
                                layer.msg('批量删除失败', {icon: 2});
                            }
                        }).catch(function(error){
                            console.error('批量删除失败', error);
                        });
                    });
                }
            };
        });
    </script>
