<body>

<div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" id="addMembershipType">添加</button>
</div>

<div class="layui-tab layui-tab-brief" lay-filter="membershipTab">
    <ul class="layui-tab-title">
        <li class="layui-this" lay-id="membership">会员充值</li>
        <li lay-id="quota">额度充值</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <table class="layui-hide" id="membershipTable" lay-filter="membershipTableFilter"></table>
        </div>
        <div class="layui-tab-item">
            <table class="layui-hide" id="quotaTable" lay-filter="quotaTableFilter"></table>
        </div>
    </div>
</div>

<script type="text/html" id="operationBar">
  <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', 'element',['form']], function(){
    var table = layui.table;
    var layer = layui.layer;
    var element = layui.element;
    var form = layui.form;
    // 初始化会员充值表格
    table.render({
        elem: '#membershipTable',
        url: '/admin/membership-types/', // 数据接口URL
        page: true, // 开启分页
        method: 'post', // 使用POST请求
        where: { // 这里传入的是额外的请求参数，LayUI会将这些参数合并到请求数据中
            action: 'fetch', // 指定操作类型
            is_quota: false // 仅获取会员充值数据
        },
        contentType: 'application/json', // 设置发送请求的内容类型为JSON
        cols: [[
            {field: 'id', title: 'id'},
            {field: 'type', title: '卡类型'},
            {field: 'title', title: '标题'},
            {field: 'description', title: '描述'},
            {field: 'price', title: '价格'},
            {field: 'duration_days', title: '有效天数'},
            {field: 'coins', title: '额度'}, // 修改字段
            {title: '操作', align: 'center', toolbar: '#operationBar'}
        ]]
    });

    // 初始化额度充值表格
    table.render({
        elem: '#quotaTable',
        url: '/admin/membership-types/', // 数据接口URL
        page: true, // 开启分页
        method: 'post', // 使用POST请求
        where: { // 这里传入的是额外的请求参数，LayUI会将这些参数合并到请求数据中
            action: 'fetch', // 指定操作类型
            is_quota: true // 仅获取额度充值数据
        },
        contentType: 'application/json', // 设置发送请求的内容类型为JSON
        cols: [[
            {field: 'id', title: 'id'},
            {field: 'type', title: '卡类型'},
            {field: 'title', title: '标题'},
            {field: 'description', title: '描述'},
            {field: 'price', title: '价格'},
            {field: 'coins', title: '充值额度'}, // 修改字段
            {title: '操作', align: 'center', toolbar: '#operationBar'}
        ]]
    });

    // 监听工具条
    table.on('tool(membershipTableFilter)', function(obj){
        var data = obj.data; // 获得当前行数据
        if(obj.event === 'edit'){
            // 编辑操作
            console.log('编辑会员卡类型', data);

            // 打开编辑窗口的代码
            layer.open({
                type: 1,
                zIndex: 999,
                title: '编辑会员卡类型',
                area: ['500px', '600px'],
                content: '<div id="editMembershipTypeForm" style="padding:20px;">'+
    '<form class="layui-form" lay-filter="editMembershipTypeForm">'+
        '<input type="text" name="id" value="'+data.id+'" lay-verify="required" style="display: none"  class="layui-input">'+
        '<div class="layui-form-item">'+
          '  <label class="layui-form-label">卡类型</label>'+
           ' <div class="layui-input-block">'+
             '<input type="text" name="type" value="'+data.type+'" 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-block">'+
            '    <input type="text" name="title" value="'+data.title+'" 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-block">'+
               ' <textarea name="description" lay-verify="required" placeholder="请输入描述" class="layui-textarea">'+data.description+'</textarea>'+
            '</div>'+
       ' </div>'+
       ' <div class="layui-form-item">'+
           ' <label class="layui-form-label">价格</label>'+
           ' <div class="layui-input-block">'+
              '  <input type="text" name="price" value="'+data.price+'" lay-verify="required|number" placeholder="请输入价格" autocomplete="off" class="layui-input">'+
           ' </div>'+
       ' </div>'+
        '<div class="layui-form-item">'+
           ' <label class="layui-form-label">有效天数</label>'+
           ' <div class="layui-input-block">'+
               ' <input type="text" name="duration_days" value="'+data.duration_days+'" lay-verify="required|number" placeholder="请输入有效天数" autocomplete="off" class="layui-input">'+
            '</div>'+
       ' </div>'+
        '<div class="layui-form-item">'+
           ' <label class="layui-form-label">额度</label>'+ // 修改字段
           ' <div class="layui-input-block">'+
               ' <input type="text" name="coins" value="'+data.coins+'" lay-verify="required|number" placeholder="请输入额度" autocomplete="off" class="layui-input">'+
            '</div>'+
       ' </div>'+
        '<div class="layui-form-item">'+
           ' <label class="layui-form-label">会员/额度</label>'+ // 新增字段
           ' <div class="layui-input-block">'+
               ' <input type="checkbox" name="is_quota" lay-skin="switch" lay-text="是|否" '+(data.is_quota ? 'checked' : '')+'>'+
            '</div>'+
       ' </div>'+
    '</form>'+
'</div>',
                success: function(layero, index){
                    // 将当前行数据填充到表单中
                    form.render();
                },
                btn: ['保存', '取消'],
                yes: function(index, form){
                    axios.post('/admin/membership-types/', {
                        action: 'edit',
                        id: $('input[name="id"]').val(),
                        type: $('input[name="type"]').val(),
                        title: $('input[name="title"]').val(),
                        description: $('textarea[name="description"]').val(),
                        price: $('input[name="price"]').val(),
                        duration_days: $('input[name="duration_days"]').val(),
                        coins: $('input[name="coins"]').val(), // 修改字段
                        is_quota: $('input[name="is_quota"]').prop('checked') // 新增字段
                    },{
                        headers: {'Content-Type': 'application/json'}
                    })
                    .then(function(response) {
                        // 编辑成功后的操作...
                        if(response.data.status === 'success'){
                            layer.msg(response.data.message, {icon: 1, time: 1000}, function(){
                                layer.close(index); // 关闭弹窗
                                table.reload('membershipTable'); // 重载表格
                                table.reload('quotaTable'); // 重载表格
                            });
                        } else {
                            layer.msg(response.data.message, function(){
                                layer.close(index); // 关闭弹窗
                            });
                        }
                    })
                    .catch(function(error) {
                        console.error('编辑失败:', error);
                    });
                },
                btn2: function(index, layero){
                    // 取消操作
                    layer.close(index);
                }
            });
        } else if(obj.event === 'delete'){
            // 删除操作
            layer.confirm('真的删除行么', function(index){
                axios.post('/admin/membership-types/', {
                    action: 'delete',
                    id: data.id
                },{
                    headers: {'Content-Type': 'application/json'}
                })
                .then(function(response) {
                    if(response.data.status === 'success'){
                        layer.msg(response.data.message, {icon: 1, time: 1000}, function(){
                            table.reload('membershipTable'); // 重载表格
                            table.reload('quotaTable'); // 重载表格
                        });
                    } else {
                        layer.msg(response.data.message, function(){
                            table.reload('membershipTable'); // 重载表格
                            table.reload('quotaTable'); // 重载表格
                        });
                    }
                })
                .catch(function(error) {
                    console.error('删除失败:', error);
                });

                layer.close(index);
            });
        }
    });

    // 监听添加会员卡类型按钮点击事件
    document.getElementById('addMembershipType').onclick = function() {
        // 打开添加会员卡类型窗口的代码...
        layer.open({
            type: 1,
            zIndex: 999,
            title: '添加会员卡类型',
            area: ['500px', '600px'],
            content: '<div id="addMembershipTypeForm" style="padding:20px;">'+
    '<form class="layui-form" lay-filter="addMembershipTypeForm">'+
        '<div class="layui-form-item">'+
          '  <label class="layui-form-label">卡类型</label>'+
           ' <div class="layui-input-block">'+
             '<input type="text" name="type" 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-block">'+
            '    <input type="text" name="title" 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-block">'+
               ' <textarea name="description" lay-verify="required" placeholder="请输入描述" class="layui-textarea"></textarea>'+
            '</div>'+
       ' </div>'+
       ' <div class="layui-form-item">'+
           ' <label class="layui-form-label">价格</label>'+
           ' <div class="layui-input-block">'+
              '  <input type="text" name="price" lay-verify="required|number" placeholder="请输入价格" autocomplete="off" class="layui-input">'+
           ' </div>'+
       ' </div>'+
        '<div class="layui-form-item">'+
           ' <label class="layui-form-label">有效天数</label>'+
           ' <div class="layui-input-block">'+
               ' <input type="text" name="duration_days" lay-verify="required|number" placeholder="请输入有效天数" autocomplete="off" class="layui-input">'+
            '</div>'+
       ' </div>'+
        '<div class="layui-form-item">'+
           ' <label class="layui-form-label">额度</label>'+ // 修改字段
           ' <div class="layui-input-block">'+
               ' <input type="text" name="coins" lay-verify="required|number" placeholder="请输入额度" autocomplete="off" class="layui-input">'+
            '</div>'+
       ' </div>'+
        '<div class="layui-form-item">'+
           ' <label class="layui-form-label">会员/额度</label>'+ // 新增字段
           ' <div class="layui-input-block">'+
               ' <input type="checkbox" name="is_quota" lay-skin="switch" lay-text="是|否">'+
            '</div>'+
       ' </div>'+
    '</form>'+
'</div>', 
            success: function(layero, index){
                    // 将当前行数据填充到表单中
                    form.render();
                },
            btn: ['保存', '取消'],
            yes: function(index, form){
                axios.post('/admin/membership-types/', {
                    action: 'add',
                    type: $('input[name="type"]').val(),
                    title: $('input[name="title"]').val(),
                    description: $('textarea[name="description"]').val(),
                    price: $('input[name="price"]').val(),
                    duration_days: $('input[name="duration_days"]').val(),
                    coins: $('input[name="coins"]').val(), // 修改字段
                    is_quota: $('input[name="is_quota"]').prop('checked') // 新增字段
                },{
                    headers: {'Content-Type': 'application/json'}
                })
                .then(function(response) {
                    // 添加成功后的操作...
                    if(response.data.status === 'success'){
                        layer.msg(response.data.message, {icon: 1, time: 1000}, function(){
                            layer.close(index); // 关闭弹窗
                            table.reload('membershipTable'); // 重载表格
                            table.reload('quotaTable'); // 重载表格
                        });
                    } else {
                        layer.msg(response.data.message, function(){
                            layer.close(index); // 关闭弹窗
                        });
                    }
                })
                .catch(function(error) {
                    console.error('添加失败:', error);
                });
            },
            btn2: function(index, layero){
                // 取消操作
                layer.close(index);
            }
        });
    };

    // 监听选项卡切换
    element.on('tab(membershipTab)', function(data){
        if(data.index === 0){
            table.reload('membershipTable', {
                where: {
                    action: 'fetch',
                    is_quota: false
                }
            });
        } else if(data.index === 1){
            table.reload('quotaTable', {
                where: {
                    action: 'fetch',
                    is_quota: true
                }
            });
        }
    });
});
</script>

</body>
