{% load static %}
<html>
<head>
  <meta charset="utf-8">
  <title>后台管理系统</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="{% static '/js/layui/css/layui.css' %}">
    <script src="{% static '/js/jquery.js' %}"></script>
    <script src="{% static '/js/layui/layui.js' %}"></script>
    <script src="{% static '/js/qs.js' %}"></script>
    <script src="{% static '/js/axios.js' %}"></script>
    <style>
        .layui-nav .layui-nav-item a:hover, .layui-nav .layui-this a {
            background-color: #009688 !important;
        }
        .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this>a, .layui-nav-tree .layui-this>a:hover {

            background-color: #009688 !important;
        }
.clickable-element:hover {
    /* 鼠标悬停时的样式 */
    cursor: pointer; /* 指定鼠标悬停时的光标样式 */
}
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black nev_list clickable-element"  data-url="/admin/main"  >后台主页</div>
    <!-- 头部区域（可配合layui 已有的水平导航） -->
{#    <ul class="layui-nav layui-layout-left">#}
{#      <!-- 移动端显示 -->#}
{#      <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">#}
{#        <i class="layui-icon layui-icon-spread-left"></i>#}
{#      </li>#}
{#      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 1</a></li>#}
{#      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 2</a></li>#}
{#      <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">nav 3</a></li>#}
{#      <li class="layui-nav-item">#}
{#        <a href="javascript:;">nav groups</a>#}
{#        <dl class="layui-nav-child">#}
{#          <dd><a href="javascript:;">menu 11</a></dd>#}
{#          <dd><a href="javascript:;">menu 22</a></dd>#}
{#          <dd><a href="javascript:;">menu 33</a></dd>#}
{#        </dl>#}
{#      </li>#}
{#    </ul>#}
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
        <a href="javascript:;">
          <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
            {{ username }}
        </a>
        <dl class="layui-nav-child">
          <dd><a href="javascript:;">修改信息</a></dd>
          <dd><a href="javascript:;">设置</a></dd>
          <dd><a href="/admin/admin_logout">退出</a></dd>
        </dl>
      </li>
    </ul>
  </div>
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
        <ul class="layui-nav layui-nav-tree" id="side-menu" lay-filter="test">
          <li class="layui-nav-item layui-nav-itemed">
            <a class="" href="javascript:;" data-url="">用户管理</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/miniapp_users">小程序用户</a></dd>
              <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/wechat_users">微信用户</a></dd>
              <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/other_sources">其它来源</a></dd>
              <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/site_admins">网站管理员</a></dd>
                <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/redemption-cards">卡密管理</a></dd>
              <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/transaction-logs">订单记录</a></dd>
              <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/membership-types">会员配置</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item">
            <a href="javascript:;" data-url="">产品信息</a>
            <dl class="layui-nav-child">
              <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/video_extraction_records">视频提取记录</a></dd>
{#              <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/copy_extraction_records">文案提取记录</a></dd>#}
              <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/ai_api_usage">API接口使用</a></dd>
            </dl>
          </li>

            <li class="layui-nav-item">
            <a href="javascript:;" data-url="">增加内容</a>
            <dl class="layui-nav-child">
                <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/copywriting_library">文案库</a></dd>
                <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/article_records">文章</a></dd>
                <dd><a href="javascript:void(0)" class="nev_list" data-url="/admin/material_library">素材库</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="javascript:void(0)" class="nev_list" data-url="/admin/website_settings">网站设置</a></li>
          <li class="layui-nav-item"><a href="javascript:void(0)" class="nev_list" data-url="/admin/miniapp_settings">小程序设置</a></li>
        </ul>
    </div>
  </div>
  <div class="layui-body" >
    <!-- 内容主体区域 -->
      <div id="content" style="padding: 15px;">

        </div>
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    底部固定区域
  </div>
</div>

</div>
<script>
//JS
layui.use(['element', 'layer', 'util'], function(){
  var element = layui.element;
  var layer = layui.layer;
  var util = layui.util;
  var $ = layui.$;

});

 $(document).ready(function () {

    function loadContent(url) {

        // 使用 AJAX 加载内容
        $.get(url, function (data) {
            $('#content').html(data);
            console.log(url);
        });
    }

    // 在 localStorage 中存储当前 URL
    function saveActiveMenuUrl(url) {
        localStorage.setItem('activeMenuUrl', url);
    }

    // 从 localStorage 中获取当前 URL
    function getActiveMenuUrl() {
        return localStorage.getItem('activeMenuUrl');
    }

    $('.nev_list').on('click', function () {
        $('.nev_list').removeClass('layui-this');
        $(this).addClass('layui-this');
        var url = $(this).data('url');
        loadContent(url);
        saveActiveMenuUrl(url);
    });

    // 默认加载上次激活的菜单项的内容，如果没有则加载第一个菜单项
    var activeMenuUrl = getActiveMenuUrl();
    if (activeMenuUrl) {

        loadContent(activeMenuUrl);
        $('.nev_list[data-url="' + activeMenuUrl + '"]').addClass('layui-this');
    } else {
        $('.nev_list').eq(0).trigger('click');
    }
    });
</script>
</body>
</html>