
<body>


<div class="layui-row" style="margin-top: 20px;">
    <div class="layui-col-md3">
        <!-- 添加文案按钮 -->
        <button class="layui-btn layui-btn-sm" id="add-copywriting">添加文案</button>
    </div>
    <div class="layui-col-md6">
        <!-- 搜索表单 -->
        <div class="layui-form" style="display: flex; align-items: center;">
            <div class="layui-input-inline" style="flex-grow: 1;">
                <input type="text" id="search-text" placeholder="请输入文案内容进行搜索" autocomplete="off" class="layui-input">
            </div>
            <button class="layui-btn layui-btn-sm" id="search-btn">搜索</button>
        </div>
    </div>
    <div class="layui-col-md3" style="text-align: right;">
        <!-- 批量删除按钮 -->
        <button class="layui-btn layui-btn-sm layui-btn-danger" id="batch-delete">批量删除</button>
    </div>
</div>
<table id="copywriting-table" lay-filter="copywriting-table" style="margin-top: 20px;"></table>


<!-- 操作栏模板 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="approve">审核</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: '#copywriting-table',
        url: '/admin/copywriting_library/', // 数据接口URL
        method: 'POST',
        where: { // 这里传入的是额外的请求参数，LayUI会将这些参数合并到请求数据中
        action: 'fetch', // 指定操作类型
        },
        contentType: 'application/json', // 设置发送请求的内容类型为JSON
        page: true, // 开启分页
        cols: [[ // 表头
            {type: 'checkbox'},
            {field: 'text_content', title: '文案', width: '40%', templet: function(d) { return decodeURIComponent(d.text_content); }},
            {field: 'source', title: '来源', width: '10%'},
            {field: 'popularity', title: '热度', width: '10%'},
            {field: 'tag', title: '标签', width: '10%',hide:true},
            {field: 'is_approved', title: '是否审核', width: '10%'},
            {field: 'added_time', title: '添加时间', width: '10%', sort: true},
            {title: '操作', width: '10%', toolbar: '#barDemo'}
        ]]
    });

    // 监听搜索按钮事件
    $('#search-btn').on('click', function(){
        var searchText = $('#search-text').val();
        table.reload('copywriting-table', {
            where: {search: searchText}
        });
    });

    // 监听添加按钮事件
    $('#add-copywriting').on('click', function(){
       layer.open({
        type: 1, // 页面层
        area: ['500px', '400px'], // 宽高
        title: '添加文案',
        content: '<div class="layui-form" style="margin:20px;">' +
                    '<div class="layui-form-item">' +
                        '<label class="layui-form-label">文案内容</label>' +
                        '<div class="layui-input-block">' +
                           '<input style="display: none" type="text" name="action" value="add">' +
                            '<textarea name="text_content" required lay-verify="required" placeholder="请输入文案内容" autocomplete="off" 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="source" required 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="tag" 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="formDemo">立即提交</button>' +
                        '</div>' +
                    '</div>' +
                 '</div>', // 表单的HTML内容
        success: function(layero, index){
            layui.form.on('submit(formDemo)', function(data){
                axios.post('/admin/copywriting_library/', 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('copywriting-table'); // 重新加载表格
                        });
                    } else {
                        // 操作失败
                        layer.msg(response.data.message, {icon: 2});
                        layer.close(index); // 关闭弹窗
                    }
                }).catch(function(error){
                    layer.msg('服务器出错了', {icon: 2});
                    console.error('操作失败', error);
                });
                return false; // 阻止表单跳转。
            });

        }
    });

    });

    // 编辑文案的函数
function editCopywriting(data) {
  layer.open({
    type: 1, // 页面层
    area: ['500px', '400px'], // 宽高
    title: '编辑文案',
    content: '<div class="layui-form" style="margin:20px;">' +
                    '<div class="layui-form-item">' +
                        '<label class="layui-form-label">文案内容</label>' +
                        '<div class="layui-input-block">' +
                           '<input style="display: none" type="text" name="action" value="edit">' +
                             '<input style="display: none" type="text" name="id" value="'+data.id+'">' +
                            '<textarea name="text_content" required lay-verify="required" placeholder="请输入文案内容" autocomplete="off" class="layui-textarea">'+data.text_content+'</textarea>' +
                        '</div>' +
                    '</div>' +
                    '<div class="layui-form-item">' +
                        '<label class="layui-form-label">来源</label>' +
                        '<div class="layui-input-block">' +
                            '<input type="text" name="source" value="'+data.source+'" required 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="tag" value="'+data.tag+'" 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="editSubmit">立即提交</button>' +
                        '</div>' +
                    '</div>' +
                 '</div>' , // 使用LayUI的模板引擎渲染表单，并填充当前行的数据
    success: function(layero, index) {
      layui.form.render(null, 'editForm'); // 重新渲染表单
      // 表单提交事件
      layui.form.on('submit(editSubmit)', function(formdata) {
        axios.post('/admin/copywriting_library/', JSON.stringify(formdata.field), {
          headers: {'Content-Type': 'application/json'}
        }).then(function(response) {
          if(response.data.status === 'success') {
            layer.msg('编辑成功', {icon: 1});
            layer.close(index); // 关闭弹窗
            layui.table.reload('copywriting-table'); // 重新加载表格
          } else {
            layer.msg('编辑失败', {icon: 2});
          }
        }).catch(function(error) {
          layer.msg('编辑过程中出错', {icon: 2});
          console.error('编辑失败', error);
        });
        return false; // 阻止表单跳转。
      });
    }
  });
}


    // 监听批量删除按钮事件
    $('#batch-delete').on('click', function(){
        var checkStatus = table.checkStatus('copywriting-table');
        var data = checkStatus.data;
        var ids = data.map(function(item) {
            return item.id;
        });
        if(ids.length > 0) {
            layer.confirm('确认删除选中的文案吗？', function(index){
                // 发送批量删除请求...
                axios.post('/admin/copywriting_library/', 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('copywriting-table'); // 重新加载表格
                    } else {
                        layer.msg('批量删除失败', {icon: 2});
                    }
                }).catch(function(error){
                    console.error('批量删除失败', error);
                });
            });
        } else {
            layer.msg('请选择需要删除的文案');
        }
    });

    // 监听表格操作事件
table.on('tool(copywriting-table)', function(obj){
    var data = obj.data; // 获取当前行的数据
    if(obj.event === 'edit'){
        // 编辑操作
        editCopywriting(data);
    } else if(obj.event === 'delete'){
        // 单项删除操作
        layer.confirm('确定删除此文案吗？', function(index){
            // 发送删除请求...
            axios.post('/admin/copywriting_library/', 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('copywriting-table'); // 重新加载表格
                } else {
                    layer.msg('删除失败', {icon: 2});
                }
            }).catch(function(error){
                layer.msg('删除过程中出错', {icon: 2});
                console.error('删除失败', error);
            });
            layer.close(index); // 关闭确认弹窗
        });
    }else if(obj.event === 'approve'){
                layer.confirm('确定审核此文案吗？', function(index){
            // 发送删除请求...
            axios.post('/admin/copywriting_library/', JSON.stringify({action: 'approve', id: data.id}), {
                headers: {'Content-Type': 'application/json'}
            }).then(function(response){
                if(response.data.status === 'success'){
                    layer.msg('审核完成', {icon: 1});
                    layui.table.reload('copywriting-table'); // 重新加载表格
                } else {
                    layer.msg('审核失败', {icon: 2});
                }
            }).catch(function(error){
                layer.msg('审核过程中出错', {icon: 2});
                console.error('审核失败', error);
            });
            layer.close(index); // 关闭确认弹窗
        });
    }
});

});
</script>
</body>


