{include file="../../../application/admin/view/appfox/public/head" /}
<style>
    /* 基础样式 */
    .layui-form-item {
        margin-bottom: 15px;
    }

    .layui-form-label {
        width: 120px !important;
        font-weight: bold;
    }

    .layui-input-block {
        margin-left: 150px !important;
        position: relative;
    }

    .layui-input {
        width: 100%;
        max-width: 600px;
    }

    /* 修复弹窗表单的UI错位问题 */
    .module-form .layui-input-block {
        margin-left: 120px !important;
        width: calc(100% - 120px) !important;
    }

    .module-form .layui-input,
    .module-form .layui-select {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 分类选项卡 */
    .category-tabs {
        margin: 20px 0;
    }

    .category-tabs .layui-tab-title li {
        font-size: 16px;
        padding: 0 25px;
    }

    .category-tabs .layui-tab-title .layui-this {
        background-color: #40cc92;
        color: #FFF;
    }

    .layui-tab-title li:hover {
        background-color: #40cc92;
        color: #FFF;
    }

    /* 分类板块 */
    .category-section {
        margin-top: 30px;
        padding: 20px;
        background: #f9f9f9;
        border-radius: 4px;
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }

    .section-title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }

    /* 操作按钮样式 */
    .action-btns {
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
    }

    .action-btn {
        margin-left: 10px;
    }

    /* 添加按钮 */
    .add-btn-container {
        margin-top: 15px;
    }

    .add-nav-btn {
        float: right;
        color: #fff;
        background-color: #40cc92;
    }

    /* 底部操作按钮样式 */
    .bottom-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 30px;
        padding: 20px 0;
        border-top: 1px solid #e6e6e6;
    }

    .btn-add-module {
        background-color: #40cc92;
        color: #fff;
        border: none;
        padding: 12px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background-color 0.3s;
    }

    .btn-add-module:hover {
        background-color: #35b883;
    }

    .btn-edit-nav {
        background-color: #40cc92;
        color: #fff;
        border: none;
        padding: 12px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background-color 0.3s;
    }

    .btn-edit-nav:hover {
        background-color: #35b883;
    }

    .btn-delete-nav {
        background-color: #ff4757;
        color: #fff;
        border: none;
        padding: 12px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        margin-left: 10px;
        transition: background-color 0.3s;
    }

    .btn-delete-nav:hover {
        background-color: #e63946;
    }

    .right-buttons {
        display: flex;
        align-items: center;
    }

    .lightning-icon {
        color: #87ceeb;
        font-size: 16px;
    }

    .mbs {
        margin-bottom: 15px;
        margin-top: 25px;
    }

    /* 统一表单样式 */
    .module-form .layui-form-item {
        margin-bottom: 12px;
    }

    .module-form {
        padding: 15px 20px;
    }

    .module-form .layui-form-label {
        width: 120px !important;
        font-weight: bold;
    }

    .module-form .layui-input-block {
        margin-left: 120px !important;
        width: calc(100% - 120px) !important;
    }

    .module-form .layui-input-inline {
        width: calc(100% - 120px) !important;
    }

    .module-form .layui-input,
    .module-form .layui-select {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .btn-add-nav {
        background-color: #40cc92;
        color: #fff;
        border: none;
        padding: 12px 20px;
        border-radius: 6px;
        cursor: pointer;
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: background-color 0.3s;
        float: right;
    }
</style>

<body>
    <div class="layui-form" style="padding: 20px 30px; background-color: white">


    <!-- 新建导航按钮 -->
    <div class="right-buttons">
        <button class="btn-add-nav" onclick="addNav()">
            <i class="layui-icon layui-icon-add-1"></i>
            新增导航栏
        </button>
    </div>

        <!-- 分类选项卡 -->
        <div class="category-tabs">
            <div class="layui-tab layui-tab-card" lay-filter="test-hash">
                <ul class="layui-tab-title">
                    {volist name="list" id="vo" key="k"}
                    <li <?php if ($k==1): ?>class="layui-this"
                        <?php endif; ?> lay-id="{$k}" title="(ID:{$vo['id']})">
                        <?php echo $vo['name']; ?>
                    </li>
                    {/volist}

                </ul>
                <div class="layui-tab-content">


                    {volist name="list" id="v" key="k"}
                    <div class="layui-tab-item <?php if ($k == 1): ?>layui-show<?php endif; ?>" id="nav_{$v['id']}" data-id="{$v['id']}">


                        <table class="layui-table">
                            <thead>
                                <tr>
                                <th>ID</th>
                                <th>模块名称</th>
                                <th>模块类型</th>
                                <th>模块分类</th>
                                
                                <th>数据类型</th>
                                <th>排序</th>
                                <th>获取条数</th>
                                <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {if $v['module_list']}
                                {volist name="v['module_list']" id="m"}
                                <tr>

                                    <td>{$m['id']}</td>
                                    <td>{$m['module_name']}</td>
                                    <td>{$m['typename']}</td>
                                    <td>{$m['category_name']}</td>
                                    <td>{$m['bind_recommend_name']}</td>
                                    <td>{$m['sort_order']}</td>
                                    <td>{$m['num']}</td>
                                    <td>
                                        <button class="btn-edit-module layui-btn layui-btn-xs layui-btn-normal" onclick="editModule('{$m['id']}')">编辑</button>
                                        <button class="btn-delete-module layui-btn layui-btn-xs layui-btn-danger"
                                                onclick="deleteModule('{$m['id']}')">删除</button>
                                    </td>
                                </tr>
                                {/volist}
                                {else}
                                <tr>
                                    <td colspan="8" style="text-align: center;">请点击添加自定义模块</td>
                                </tr>
                                {/if}
                            </tbody>
                        </table>

                        <!-- 底部操作按钮 -->
                        <div class="bottom-actions">
                            <button class="btn-add-module" onclick="addCustomModule({$v['id']})">
                                <i class="layui-icon layui-icon-add-1 lightning-icon"></i>
                                添加自定义模块
                            </button>
                            <div class="right-buttons">
                                <button class="btn-edit-nav" onclick="editCurrentNav('{$v['name']}',{$v['nav_sort']},{$v['id']})">
                                    <i class="layui-icon layui-icon-edit lightning-icon"></i>
                                    编辑当前导航栏
                                </button>
                                <button class="btn-delete-nav" onclick="deleteCurrentNav({$v['id']})">删除当前导航栏</button>
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
        </div>




    </div>


    </div>

    {include file="../../../application/admin/view/appfox/public/foot" /}
    <script>
        layui.use(['form', 'element', 'jquery', 'layer'], function () {
            var form = layui.form;
            var element = layui.element;
            var $ = layui.jquery;
            var layer = layui.layer;
            // tab 切换事件
            // hash 地址定位
            var hashName = 'tabid'; // hash 名称
            //             'tabid=2; PHPSESSID=q8qug3lc7brcljj49srnk4hvj0'
            if (document.cookie.match(/tabid=(\d+)/)) {
                var layid = document.cookie.match(/tabid=(\d+)/)[1];
            } else {
                var layid = 1;
            }

            // 初始切换
            element.tabChange('test-hash', layid);
            // 切换事件
            element.on('tab(test-hash)', function (obj) {
                // location.hash = hashName + '=' + this.getAttribute('lay-id');
                //保存cookie js
                document.cookie = hashName + '=' + this.getAttribute('lay-id');

            });
            //新增导航栏 ajax请求
            $('.btn-add-nav').click(function () {
                var formHtml = `
          <div class="layui-form" lay-filter="addNavFormFilter" style="margin: 16px;">
            <div class="demo-login-container">
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <input type="text" name="name" value="" lay-verify="required" placeholder="请输入导航栏名称" lay-reqtext="请填写导航栏名称" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <input type="number" name="nav_sort" value="0" placeholder="请输入排序序号" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>
            </div>
          </div>
        `;

                layer.open({
                    type: 1,
                    title: '新增导航栏',
                    area: ['400px', '250px'],
                    content: formHtml,
                    btn: ['确认', '取消'],
                    success: function (layero, index) {
                        // 重新渲染表单
                        layui.form.render();
                    },
                    yes: function (index, layero) {
                        // 获取表单数据
                        var navName = layero.find('input[name="name"]').val().trim();
                        var navSort = layero.find('input[name="nav_sort"]').val().trim();

                        // 验证必填字段
                        if (!navName) {
                            layer.msg('请填写导航栏名称', { icon: 2 });
                            return;
                        }

                        // 提交数据
                        $.ajax({
                            url: 'add_nav',
                            type: 'POST',
                            data: {
                                navName: navName,
                                navSort: navSort || 0
                            },
                            success: function (res) {
                                if (res.code == 1) {
                                    layer.msg('新增成功', { icon: 1 });
                                    layer.close(index);
                                    location.reload();
                                } else {
                                    layer.msg(res.msg || '新增失败', { icon: 2 });
                                }
                            },
                            error: function () {
                                layer.msg('网络错误', { icon: 2 });
                            }
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                });
            });

            // 添加自定义模块
            window.addCustomModule = function (navId) {
                layer.open({
                    type: 2,
                    title: '新增自定义模块',
                    content: 'adds?navId=' + navId,
                    area: ['600px', '520px']
                    , maxmin: true
                    , area: ['550px', '550px']
                    , btn: ['关闭窗口']
                    , yes: function (index, layero) {
                        // 获取表单数据
                           layer.close(index);
                           location.reload();
                   

                    }
                });
            };
            // 编辑模块
            window.editModule = function (id) {
                layer.open({
                    type: 2,
                    title: '编辑模块',
                    content: 'edit_module?id=' + id
                    , area: ['630px', '550px']
                    , maxmin: true
                    , btn: ['关闭窗口']
                    , yes: function (index, layero) {
                        // 获取表单数据
                           layer.close(index);
                           location.reload();
                   

                    }
                });
            };
            // 删除模块
            window.deleteModule = function (id) {
                layer.confirm('确定要删除该模块吗？', {
                    icon: 3,
                    title: '确认删除'
                }, function (index) {
                    layer.close(index);
                    $.ajax({
                        url: 'delete_module',
                        type: 'POST',
                        data: {
                            id: id
                        },
                        success: function (res) {
                            if (res.code == 1) {
                                layer.msg('删除成功', { icon: 1 });
                                location.reload();
                            } else {
                                layer.msg(res.msg, { icon: 2 });
                            }
                        }
                    });
                });
            };



            // 编辑当前导航栏
            window.editCurrentNav = function (navName, navSort, id) {
                var formHtml = `
          <div class="layui-form" lay-filter="editNavFormFilter" style="margin: 16px;">
            <div class="demo-login-container">
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <input type="text" name="name" value="${navName}" lay-verify="required" placeholder="请输入导航栏名称" lay-reqtext="请填写导航栏名称" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <input type="number" name="nav_sort" value="${navSort}" placeholder="请输入排序序号" autocomplete="off" class="layui-input" lay-affix="clear">
                </div>
              </div>
            </div>
          </div>
        `;

                layer.open({
                    type: 1,
                    title: '编辑当前导航栏',
                    area: ['400px', '250px'],
                    content: formHtml,
                    btn: ['确认', '取消'],
                    success: function (layero, index) {
                        // 重新渲染表单
                        layui.form.render();
                    },
                    yes: function (index, layero) {
                        // 获取表单数据
                        var navName = layero.find('input[name="name"]').val().trim();
                        var navSort = layero.find('input[name="nav_sort"]').val().trim();

                        // 验证必填字段
                        if (!navName) {
                            layer.msg('请填写导航栏名称', { icon: 2 });
                            return;
                        }

                        // 提交数据
                        $.ajax({
                            url: 'edit_current_nav',
                            type: 'POST',
                            data: {
                                navName: navName,
                                navSort: navSort || 0,
                                id: id
                            },
                            success: function (res) {
                                if (res.code == 1) {
                                    layer.msg('编辑成功', { icon: 1 });
                                    layer.close(index);
                                    location.reload();
                                } else {
                                    layer.msg(res.msg || '编辑失败', { icon: 2 });
                                }
                            },
                            error: function () {
                                layer.msg('网络错误', { icon: 2 });
                            }
                        });
                    },
                    btn2: function (index, layero) {
                        layer.close(index);
                    }
                });
            };

            // 删除当前导航栏
            window.deleteCurrentNav = function (id) {
                layer.confirm('确定要删除当前导航栏吗？', {
                    icon: 3,
                    title: '确认删除'
                }, function (index) {
                    layer.close(index);
                    $.ajax({
                        url: 'delete_current_nav',
                        type: 'POST',
                        data: {
                            id: id
                        },
                        success: function (res) {
                            if (res.code == 1) {
                                layer.msg('删除成功', { icon: 1 });
                                location.reload();
                            } else {
                                layer.msg(res.msg, { icon: 2 });
                            }
                        }
                    });
                });
            };


        });
    </script>
</body>

</html>