@extends('admin.layouts.base')
@section('add_css')

@endsection
@section('content')


        <div class="layui-card">

            <div class="layui-card-body">
                <div style="padding-bottom: 10px;">
                    <button class="layui-btn layuiadmin-btn-tophandel" data-type="batchdel">删除</button>
                    <button class="layui-btn layuiadmin-btn-tophandel" data-type="add">添加</button>
                </div>
                <div class="layui-tab layui-tab-card"  lay-filter="test1">
                    <ul class="layui-tab-title">

                        @if(count($type)>0)
                            @foreach ($type as $k=>$v)
                                <li lay-id="{{ $k }}" data-type="{{ $k }}" class="{{ $k==1?'layui-this':'' }}">{{ $v }}</li>
                            @endforeach
                        @endif


                    </ul>
                    <div class="layui-tab-content">
                        <table id="LAY-list-table" lay-filter="LAY-list-table"></table>
                    </div>


            </div>
        </div>
    </div>





@endsection
@section('add_js')

    @include('admin.layouts.layui_tpl')
    @include('admin.layouts.commonscript')
    <script>


        layui.use(['index', 'table','listable'], function () {
            var $ = layui.$
                , form = layui.form
                ,listable=layui.listable
                , table = layui.table;
            var element = layui.element;
            //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
            var layid = location.hash.replace(/^#type=/, '');
            console.log(layid);
            element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项
            //监听Tab切换，以改变地址hash值
            element.on('tab(test1)', function(){
                location.hash = 'type='+ this.getAttribute('lay-id');
                type=this.getAttribute('lay-id');
                 var field={
                    'type':type
                }
                table.reload('LAY-list-table', {
                    where: field
                });

            });

            cols= [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', width: 80, title: 'ID', sort: true}
                , {field: 'sort', width: 80, title: '排序', sort: true,edit:1}
                , {field: 'name', title: '名称'}
                , {field: 'url', title: 'URL'}
                , {field: 'thumb', title: '图片',templet: '#imgTpl'}
                , {field: 'color', title: '颜色', templet: '#true-false-table-color'}
                , {field: 'type', title: '类型'}
                , {title: '操作', width: 150, align: 'center', fixed: 'right', toolbar: '#table-useradmin-admin'}
            ]];
            listable.list(listable_url,cols,{
                where:{
                    'type':layid
                }
            });
            //监听表操作
            listable.handle();
            listable.top_handle();

        });
    </script>
@endsection