<link rel="stylesheet" href="/plugins/addons/group_buy/template/js/layui/css/layui.css" media="all">
<style>
    .layui-form-item{
        display: flex;
        align-items: stretch;
    }
    .layui-form-label{
        flex: 0 0 auto;
    }
    .layui-input-block{
        flex: 1 1 auto;
        margin-left: 0!important;
    }
    .pagination {
        display: flex;
        justify-content: center;
        padding-left: 0;
        margin: 20px 0;
        border-radius: 4px;

    }
    .pagination > li {
        display: inline;
    }
    .pagination > li > a, .pagination > li > span {
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.42857143;
        color: #337ab7;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid #ddd;
    }
    .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
        z-index: 2;
        color: #fff;
        cursor: default;
        background-color: #337ab7;
        border-color: #337ab7;
    }
</style>
<section class="admin-main">
    <div class="container-fluid">
        <div class="page-container">
            <div class="card">
                <div class="card-body">
                    <!-- class="col-lg-1 col-md-12 col-sm-12" -->
                    <div class="card-title row">
                        <div class="pl-4 pr-4">{$Title}</div>
                        <div class="col-lg-8 col-md-12 col-sm-12">
                            {foreach $PluginsAdminMenu as $v}
                                {if $v['custom']}
                                    <span  class="ml-2"><a  class="h5" href="{$v.url}" target="_blank">{$v.name}</a></span>
                                {else/}
                                    <span  class="ml-2"> <a  class="h5" href="{$v.url}">{$v.name}</a></span>
                                {/if}
                            {/foreach}
                        </div>
                    </div>

                    <div class="tab-content mt-4">

                        <div class="table-body auto-login-content" style="margin-top: 10px;">


                            <table id="productTable" lay-filter="productTable"></table>
                            <div class="myPagination"></div>
                        </div>
                        <div class="table-body">文档说明：<a href="https://html5code.org/type/zjmf.html" target="_blank">https://html5code.org/type/zjmf.html</a> </div>
                        <div class="table-body" id="renewMsg" style="color: #ff0000;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<script src="/plugins/addons/group_buy/template/js/layui/layui.js"></script>
<script src="/plugins/addons/group_buy/template/js/xm-select/dist/xm-select.js"></script>
<script src="/plugins/addons/group_buy/template/js/pagination.js"></script>
<script>
    let queryToJson=function (hash){
        let str=hash?window.location.hash:window.location.search
        if( !str ) return { };
        if(str) str=str.substr(1);
        if( !str ) return { };
        let arr = str.split('&');
        let data={ };
        $.each( arr, function (k,v) {

            if(v.indexOf("=")>-1){
                let d=v.indexOf("=");
                data[ decodeURIComponent(v.substr(0,d)) ]=decodeURIComponent(v.substr(d+1));

            }

        } );
        return data;
    }
    let jsonToQuery=function (json){
        return  Object.keys(json).map(function (key) {
            return json[key]? (key + "=" + encodeURIComponent(json[key])):"";
        }).join("&");
    }
    let GzhxLoading=function(str){



        return layer.msg(str, {
            time: 0,
            icon:16

            ,shade: 0.3,zIndex: layer.zIndex

            ,success:function (layero) {

                layer.setTop(layero);

            }

        });

    }
    let ajax=function (option){
        let index=GzhxLoading(option.load||"加载中……")
        $.ajax({
                dataType: "json",
                type: option.type||"post",

                headers: {
                    "X-Requested-With": "XMLHttpRequest",

                },
                url: option.url||"",
                data:option.data,
                async:true,
                success: function (t) {

                    layer.close(index);

                    if( t.status==1 ){
                        if(option.success)  option.success(t.info);
                    }else{
                        if(option.error){
                            option.error(t.info);
                        }else{
                            layer.msg(t.info);
                        }
                    }
                },

                error: function (request, status, errorThrown) {
                    layer.close(index);
                    if(option.error){
                        option.error("网络错误，请重试");
                    }else{
                        layer.msg("网络错误，请重试");
                    }
                }
            }
        );
    }

    layui.use(['layer','form','table','laydate'],function(){
        let parm=queryToJson();
            let toolbar='';
            toolbar +='<div class="layui-form-item" style="margin-bottom: 0;">';
            toolbar +='<div class="layui-inline lay-video" style="margin-bottom: 0;">';
            toolbar +='<div class="layui-input-inline" style="width: unset;margin-right: 3px;display: flex;">';
            toolbar +='' +
               '<input type="text" name="keyword_username" required  lay-verify="required" value="'+(parm && parm.username ? parm.username : '' )+'" placeholder="团长搜索" autocomplete="off" class="layui-input" style="min-width: 100px;max-width: 150px;">' +
                '<button class="layui-btn lay-search">筛选</button>';

            toolbar +='</div></div>';
            toolbar +='</div>';

        let productTable= layui.table.render({
                elem: '#productTable'
                ,id:"productTable"
                ,toolbar:toolbar
                ,cols: [[
                        {field: 'e_id', title: 'ID', width:80}
                    ,{field: 'username', title: '用户',templet: function(d){
                    return '<a href="./#/customer-view/abstract?id='+d.e_uid+'" class="layui-btn layui-btn-primary layui-btn-xs" target="_bank">'+d.username+'</a>';
                    }}
                    ,{field: 'group_name', title: '分组'}
                    ,{field: 'name', title: '产品'}
                    ,{field: 'e_type', title: '参与类型',templet: function(d){
                    return d.e_type=="two"?"2人团":(d.e_type=="three"?"3人团":"5人团");
                    }}
                    ,{field: 'e_num', title: '已拼团人数'}
                    ,{field: 'pay_type', title: '支付方式',templet: function(d){
                    return d.pay_type=="monthly"?"月付":"年付";
                    }}
            ,{field: 'e_add_time', title: '开团时间'}
            ,{field: 'e_end_time', title: '到期时间'}
        ,{field: 'e_status', title: '状态',templet: function(d){
        let html='<a href="javascript::" class="layui-btn layui-btn-normal layui-btn-xs">拼团中</a>';
        switch(parseInt(d.e_status)){
        case 2:html='<a href="javascript::" class="layui-btn layui-btn-xs">拼团成功</a>';break;
    case 3:html='<a href="javascript::" class="layui-btn layui-btn-danger layui-btn-xs">拼团失败</a>';break;
    }
    return html;
    }

    }
            ,{field: 'op', title: '成员',templet: function(d){
        return '<a href="javascript:;" class="layui-btn layui-btn-xs" lay-event="edit">查看</a>';
        }

    }
    ]]
    ,data:[]
    ,done:function(data){
        $('.lay-search').off('click').on('click',function () {
            let parm=queryToJson();
            let thatx=$(this),_username=$('.layui-table-tool input[name="keyword_username"]').val();
            parm.page=1;

            if(_username){
                parm.username=_username;
            }else{
                delete parm.username;
            }
            window.location.href="./addons?"+jsonToQuery(parm)

        });
    }
    });

    let _get=function (callback){

        ajax({
            data:{
                action:'get',
                p:''
            },
            success:function (res){

                if(callback){
                    callback(res);

                }
            }
        })
    }
    _get(function (res){
        productTable.reload({
            data:res.data
        })
        console.log(res);
        $(".myPagination").Pagination({
            page:parseInt(res.page),
            count:parseInt(res.count),
            groups: 10,
            prev:'上一页',
            next:'下一页',
            first:'首页',
            last:'末页',
            limit:20,
            onPageChange:function (page) {
                if(parseInt(res.page)!=parseInt(page)){
                    let query=queryToJson();
                    query.page=page;
                    top.location.href="./addons?"+jsonToQuery(query)
                }

            }
        });
    });
    layui.table.on('tool(productTable)', function(obj){

        switch (obj.event) {
            case 'edit':{
                let html='<li><strong>团长：</strong><a href="./#/customer-view/abstract?id='+obj.data.e_uid+'" target="_bank">'+obj.data.username+'</a></li>';
                html +='<li><strong>开团时间：</strong>'+obj.data.e_add_time+'</li>';
                html +='<li><strong>到期时间：</strong>'+obj.data.e_end_time+'</li>';
                html +='<li><strong>产品组：</strong>'+obj.data.group_name+'</li>';
                html +='<li><strong>产品：</strong>'+obj.data.name+'</li>';
                html +='<li><strong>付款方式：</strong>'+(obj.data.pay_type=="monthly"?"月付":"年付")+'</li>';
                html +='<li><strong>参团类型：</strong>'+(obj.data.e_type=="two"?"2人团":(obj.data.e_type=="three"?"3人团":"5人团"))+'</li>';
                html +='<li><strong>成员数量：</strong>'+obj.data.e_num+'</li>';
                html +='<li style="display: flex;justify-content: flex-start;align-items: center;flex-wrap: wrap;"><strong>成员：</strong>';
                $.each(obj.data.user_list,function(k,v){
                    html +='<a href="./#/customer-view/abstract?id='+v.uid+'" class="layui-btn layui-btn-xs" target="_bank">'+v.username+'</a>';
                })
                html +='</li>';
                layer.open({
                    type:1,
                    title:"团长："+obj.data.username,
                    area:'500px',
                    content:'<div style="padding: 20px;box-sizing: border-box;"><ul>'+html+'</ul></div>',
                    btn:['关闭']
                })
                break;
            }


            default:

                break;

        }

    });

    })
</script>
