@extends('layouts.admin.app')
@section('styles')
<style type="text/css">
    .team-list {
        width: 100%;
        list-style-type: none;
        -webkit-padding-start: 0;
    }

    .team-list li::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .team-list li {
        width: 100%;
        line-height: 40px;
        border: 1px solid #EEEEEE;
        border-top: 0;
        overflow: auto;
    }

    .team-list li.team-list-first {
        border-top-left-radius: 6px;
        background: #F2F2F2;
        border-top-right-radius: 6px;
        border-top: 1px solid #EEEEEE;
    }

    .team-list li:last-child {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    .team-list li div {
        /*width: 12.5%;*/
        height: 41px;
        padding: 0 8px;
        float: left;
        overflow: hidden;
        border-left: 1px solid #EEEEEE;
        box-sizing: border-box;
    }

    .team-list li div.team-list-line {
        border-left: 0;
    }

    .team-list .team-list li {
        border-left: 0;
    }
</style>
@endsection
@section('crumbs')
    <ol class="breadcrumb crumbs">
        <li><a href="{{ route('admin.index') }}#">后台导航</a></li>
        <li><a href="{{ route('admin.member.index') }}">后台会员首页</a></li>
        <li class="active">会员图</li>
    </ol>
@endsection
@section('content')
    <div class="row wrapper wrapper-content animated fadeInRight" id="app">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="row ibox-title">
                    <div class="form-group row">
                        <div class="col-md-3">
                            <input class="form-control" id="username" value="{{$member->mobile}}" placeholder="会员账号搜索" type="text" name="username">
                        </div>
                        <div class="col-md-2">
                            <button type="button" id="auth-button" class="btn btn-primary">查询</button>
                        </div>
                        <div class="col-md-7">

                        </div>
                    </div>

                </div>
                <hr>
                <div class="ibox-title">
                    <h5>团队基本信息</h5>
                    <div class="ibox-tools">

                    </div>
                </div>
                <!--新订单列表 商品信息-->
                <div class="panel panel-default">

                    <div class="panel-body">
                        <ul class="team-list" id="team_list">

                            <li class="team-list-first li_x">
                                <div style="width: 20%;" class="team-list-line">层级</div>
                                <div style="width: 20%;">用户账号</div>
                                <div style="width: 9%;">用户昵称</div>
                                <div style="width: 9%;">会员级别</div>
                                {{--<div style="width: 9%;">团队合约在持业绩</div>--}}
                                <div style="width: 6%;">所在层数</div>
                            </li>
                            <div id="show-tx">

                            </div>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script>
        var is_ajax = false;
        var _depth = 0;
        $("#team_list").delegate(".li_x", "click", function (event) {
            if (is_ajax == true) {
                return false;
            }
            is_ajax = true;
            var obj = $(this);
            var is_show = obj.attr('is_show');
            var parent_num = obj.attr('parent_num');
            var m_id = obj.attr('m_id');
            var is_get_child = obj.attr('is_get_child');
            console.log(is_show);
            if (is_show == 2 && is_get_child == 2) {
                getChildList(m_id, parent_num, obj)
            } else if (is_show == 2) {
                obj.attr('is_show', 1);
                $('.child' + m_id).show();
                is_ajax = false;
//            obj.find('.bj').html('-');
                obj.children('div').eq(0).children('span').eq(0).html('-');
            } else {
                obj.attr('is_show', 2);
                $('.child' + m_id).hide();
                is_ajax = false;
                //console.log(obj.find('.bj'));
//            console.log(obj.find('.bj').text());
                obj.children('div').eq(0).children('span').eq(0).html('+');
            }
        });


        function getChildList(m_id, parent_num, obj) {
            $.ajax({
                type: 'post',
                url: '{{ route('admin.memberClan.view.next.phone') }}/'+m_id,
                data: {m_id: m_id, parent_num: parent_num, depth:_depth},
                dataType: 'json',
                success: function(data){
                    is_ajax = false;
                    if (data.code == 1) {
                        console.log(data);
                        obj.after(data.data.html);
                        obj.attr('is_show', 1);
                        obj.attr('is_get_child', 1);
                        obj.children('div').eq(0).children('span').eq(0).html('-');
                    }
                }
            });

        }

        $(document).on('click', '#auth-button', function () {
            var _username = $('#username').val();
            if( !_username ){
                layer.msg("搜索账号为空");
                return false;
            }

            $.ajax({
                type: 'post',
                url: '{{ route('admin.memberClan.view.phone') }}/'+_username,
                data: {m_id: _username},
                dataType: 'json',
                success: function(data){
                    is_ajax = false;
                    if (data.code == 1) {
                        $('#show-tx').empty();
                        $('#show-tx').html(data.data.html);
                        _depth = data.data.depth;
                    }else{
                        layer.msg(data.msg);
                    }
                }
            });
        });



        $(function () {
            $('#auth-button').trigger('click');

            $(document).delegate('a.view-sc','click', function (event) {
                var e = event || window.event;
                var _th = $(e.target);
                _th.closest('li').addClass('li_x');
                $.ajax({
                    type: 'get',
                    url: "{{ route('admin.memberClan.order.jh') }}/"+_th.data('id'),
                    data: {},
                    dataType: 'json',
                    success: function (data) {
                        if( data.code <= 0 ){
                            var _xs = _th.closest('div');
                            _xs.closest('div').empty();
                            _xs.closest('div').html(data.count);
                        }
                    }
                });
                window.event? e.cancelBubble = true : e.stopPropagation();
                return false;   // 阻止冒泡
            });

            //控制点击input以外的区域会触发input的blur事件
            $(document).mousedown(function (e) {
                var con = $("a.view-sc");   // 设置目标区域
                if (!(!con.is(e.target) && con.has(e.target).length === 0)) {
                    // 取消指定属性
                    $(e.target).closest('li').removeClass('li_x');
                }
            });
        });
    </script>
@endsection