<!DOCTYPE html>
<html class="x-admin-sm">

    <head>
        <meta charset="UTF-8">
        <title>menu</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
        <link rel="stylesheet" href="{*cdn*}css/font.css">
        <link rel="stylesheet" href="{*cdn*}css/xadmin.css">
        <script type="text/javascript" src="{*cdn*}js/jquery.min.js"></script>
        <script src="{*cdn*}lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="{*cdn*}js/xadmin.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
      <div class="layui-fluid">
        <div class="layui-card" style="background: rgba(255, 255, 255, 0.2);">
          <div class="layui-card-header">
            <button class="layui-btn" name="button" onclick="window.location.reload()"><i class="iconfont">&#59050;</i> {*locale['dashboard.menu.menu_manage.table.options.reflush']*}</button>
            <button class="layui-btn" name="button" onclick="xadmin.open('{*locale['dashboard.menu.menu_manage.table.options.add']*}', '{*menu_add_url*}', 500, 280)"><i class="iconfont">&#xe6b9;</i> {*locale['dashboard.menu.menu_manage.table.options.add']*}</button>
          </div>
          <div class="layui-card-body">
            <table class="layui-table layui-form">
              <thead>
                <tr>
                  <th width="10" style="text-align: center">{*locale['dashboard.menu.menu_manage.table.id']*}</th>
                  <th width="30" style="text-align: center">{*locale['dashboard.menu.menu_manage.table.icon']*}</th>
                  <th width="150" style="text-align: center">{*locale['dashboard.menu.menu_manage.table.name']*}</th>
                  <th width="200" style="text-align: center">{*locale['dashboard.menu.menu_manage.table.url']*}</th>
                  <th width="180" style="text-align: center">{*locale['dashboard.menu.menu_manage.table.options']*}</th>
                </tr>
              </thead>
              <tbody class='x-cate'>
              {% if menus and type(menus) == 'table' then%}
                {% for index, menu in ipairs(menus) do %}
                <tr cate-id='{*menu.id*}' fid='0'>
                  <td style="text-align: center" >{*menu.id*}</td>
                  <td style="text-align: center" ><i class="layui-icon">{*menu.icon*}</i></td>
                  <td>
                    {% if type(menu.list) == 'table' then %}
                      <i class="layui-icon x-show" status='true' style="color:#009688">&#xe623;</i>
                    {% end %}{{locale[menu.name] or menu.name}}
                  </td>
                  <td style="text-align: center">{{ menu.url or '-' }}</td>
                  <td class="td-manage">
                    <button class="layui-btn layui-btn-xs"  onclick="xadmin.open('{*locale['dashboard.menu.menu_manage.table.options.add']*}', '{*menu_add_url*}?id={*menu.id*}', 500, 280)" ><i class="iconfont">&#xe6b9;</i>{*locale['dashboard.menu.menu_manage.table.options.add']*}</button>
                    <button class="layui-btn layui-btn-warm layui-btn-xs"  onclick="xadmin.open('{*locale['dashboard.menu.menu_manage.table.options.edit']*}','{*menu_edit_url*}?id={*menu.id*}', 500, 280)"><i class="layui-icon">&#xe642;</i>{*locale['dashboard.menu.menu_manage.table.options.edit']*}</button>
                    <button class="layui-btn layui-btn-danger layui-btn-xs"  onclick="member_del(this, {action: 'delete', token: '{*token*}', id:{*menu.id*}})" ><i class="layui-icon">&#xe640;</i>{*locale['dashboard.menu.menu_manage.table.options.delete']*}</button>
                  </td>
                </tr>
                {% if type(menu.list) == 'table' then%}
                  {% for index, sub in ipairs(menu.list) do%}
                  <tr cate-id='{*sub.id*}' fid='{*menu.id*}'>
                    <td style="text-align: center" >{*sub.id*}</td>
                    <td style="text-align: center" ><i class="layui-icon">{*sub.icon*}</i></td>
                    <td>
                      |------->
                      {% if type(sub.list) == 'table' then %}
                        <i class="layui-icon x-show" status='true' style="color:#009688">&#xe623;</i>
                      {% end %}
                      {{locale[sub.name] or sub.name}}
                    </td>
                    <td style="text-align: center" >{{ sub.url or '-' }}</td>
                    <td class="td-manage">
                      <button class="layui-btn layui-btn-xs"  onclick="xadmin.open('{*locale['dashboard.menu.menu_manage.table.options.add']*}', '{*menu_add_url*}?id={*sub.id*}', 500, 280)" ><i class="iconfont">&#xe6b9;</i>{*locale['dashboard.menu.menu_manage.table.options.add']*}</button>
                      <button class="layui-btn layui-btn-warm layui-btn-xs"  onclick="xadmin.open('{*locale['dashboard.menu.menu_manage.table.options.edit']*}','{*menu_edit_url*}?id={*sub.id*}', 500, 280)"><i class="layui-icon">&#xe642;</i>{*locale['dashboard.menu.menu_manage.table.options.edit']*}</button>
                      <button class="layui-btn layui-btn-danger layui-btn-xs"  onclick="member_del(this, {action: 'delete', token: '{*token*}', id:{*sub.id*}})" ><i class="layui-icon">&#xe640;</i>{*locale['dashboard.menu.menu_manage.table.options.delete']*}</button>
                    </td>
                    </tr>
                    {% if type(sub.list) == 'table' then %}
                      {% for index, it in ipairs(sub.list) do %}
                      <tr cate-id='{*it.id*}' fid='{*sub.id*}'>
                        <td style="text-align: center" >{*it.id*}</td>
                        <td style="text-align: center" ><i class="layui-icon">{*it.icon*}</i></td>
                        <td>
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                          |-------> {{locale[it.name] or it.name}}
                        </td>
                        <td style="text-align: center" >{*it.url*}</td>
                        <td class="td-manage">
                          <button class="layui-btn layui-btn-warm layui-btn-xs"  onclick="xadmin.open('{*locale['dashboard.menu.menu_manage.table.options.edit']*}','{*menu_edit_url*}?id={*it.id*}', 500, 280)"><i class="layui-icon">&#xe642;</i>{*locale['dashboard.menu.menu_manage.table.options.edit']*}</button>
                          <button class="layui-btn layui-btn-danger layui-btn-xs"  onclick="member_del(this, {action: 'delete', token: '{*token*}', id:{*it.id*}})" ><i class="layui-icon">&#xe640;</i>{*locale['dashboard.menu.menu_manage.table.options.delete']*}</button>
                        </td>
                        </tr>
                      {% end %}
                    {% end%}
                  {% end %}
                {% end %}
                {% end %}
              {% end %}
            </tbody>
            </table>
          </div>
        </div>
      </div>
    </body>
    <script>
      layui.use(['jquery', 'form', 'layer'], function() {
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;

      });

       /*用户-删除*/
      function member_del(obj, field){
        layer.confirm("", {title:"", content:"{*locale['dashboard.menu.menu_manage.table.options.confirm']*}"}, function(index){
            $.ajax({
              url: "{*api_url*}", type: "POST", headers: {token:"{*token*}"}, data: field,
              error: function (res) {
                return layer.msg('请求失败', {time:2000});
              },
              success: function (res) {
                if (res.code != 0) {
                  return layer.msg(res.msg, {time:2000});
                }
                return layer.msg(res.msg, {time:1000}, function () {
                  return window.location.reload();
                });
              },
            })
        });
      }

      // 分类展开收起的分类的逻辑
      $(function(){
        $("tbody.x-cate tr[fid!='0']").hide();
        // 栏目多级显示效果
        $('.x-show').click(function () {
            if($(this).attr('status')=='true'){
                $(this).html('&#xe625;');
                $(this).attr('status','false');
                cateId = $(this).parents('tr').attr('cate-id');
                $("tbody tr[fid="+cateId+"]").show();
           }else{
                cateIds = [];
                $(this).html('&#xe623;');
                $(this).attr('status','true');
                cateId = $(this).parents('tr').attr('cate-id');
                getCateId(cateId);
                for (var i in cateIds) {
                    $("tbody tr[cate-id="+cateIds[i]+"]").hide().find('.x-show').html('&#xe623;').attr('status','true');
                }
           }
        })
      })

      var cateIds = [];
      function getCateId(cateId) {
          $("tbody tr[fid="+cateId+"]").each(function(index, el) {
              id = $(el).attr('cate-id');
              cateIds.push(id);
              getCateId(id);
          });
      }

    </script>
</html>
