{extend name='../../admin/view/main'}

{block name='button'}
<!-- 表格工具栏 -->
<div class="layui-btn-container">
    <button class='layui-btn layui-btn-sm layui-btn-primary' data-modal='{:url("add")}' data-width="800px" data-height="600px">添加会员</button>
</div>
{/block}

{block name='content'}
<div class="think-box-shadow">
    <form class="layui-form layui-form-pane form-search" action="">
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">搜索</label>
            <div class="layui-input-inline">
                <input name="keyword" value="{$get.keyword|default=''}" placeholder="请输入邮箱/订单号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <select name="status">
                    <option value=''>-- 全部 --</option>
                    <option value='1'>正常</option>
                    <option value='0'>禁用</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-inline">
            <button class="layui-btn layui-btn-primary" lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i> 搜 索</button>
        </div>
    </form>

    <table id="TableList" lay-filter="TableList"></table>
</div>
{/block}

{block name='script'}
<script type="text/html" id="toolbar">
    <a class="layui-btn layui-btn-sm" data-modal='{:url("edit")}?id={{d.id}}' data-width="800px" data-height="600px">编辑</a>

    <a class="layui-btn layui-btn-sm layui-btn-danger" data-confirm="确定要删除此会员吗？" data-action='{:url("remove")}' data-value="id#{{d.id}}">删除</a>
</script>

<script>
layui.use(['table','form'], function(){
    var table = layui.table;
    var form = layui.form;
    
    // 表格渲染
    table.render({
        elem: '#TableList'
        ,url: '{:sysuri()}?output=layui.table'
        ,page: true
        ,cellMinWidth: 200
        ,cols: [[
            {field: 'id', title: 'ID', width: 70, align: 'center'},
            {field: 'email', title: '邮箱', minWidth: 80},
            {field: 'order_id', title: '闲鱼订单号', minWidth: 100},
            {field: 'expire_time', title: '有效期', minWidth: 100},
            {field: 'usage_limit', title: '可用次数', width: 70, align: 'center'},
            {field: 'used_count', title: '已用次数', width: 70, align: 'center'},
            {field: 'last_login_time', title: '最后登录时间', minWidth: 100},
            {field: 'status', title: '状态', width: 100, align: 'center', templet: function(d){
                return '<input type="checkbox" name="status" value="'+d.id+'" lay-skin="switch" lay-text="正常|禁用" lay-filter="statusSwitch" '+(d.status == 1 ? 'checked' : '')+'>';
            }},
            {field: 'create_time', title: '创建时间', minWidth: 180},
            {title: '操作', toolbar: '#toolbar', width: 250, align: 'center', fixed: 'right'}
        ]]
    });
    
    // 搜索提交
    form.on('submit(search)', function(data){
        table.reload('TableList', {where: data.field});
        return false;
    });

    // 监听状态切换
    form.on('switch(statusSwitch)', function(obj){
        let id = this.value;
        let status = obj.elem.checked ? 1 : 0;
        $.post('{:url("state")}', {id: id, status: status}, function(res){
            if (res.code != 1) {
                obj.elem.checked = !obj.elem.checked;
                form.render('checkbox');
                layer.msg(res.info, {icon: 2});
            }
        }, 'json');
    });
});
</script>
{/block}