{layout name="layout2" /}
<style>
    .layui-form-label{
        width: 120px;
    }
    .layui-card .layui-tab{
        margin-left: 7px;
    }
    .layui-form-label{
        margin-left: 20px;
        width: 98px;
    }
    .layui-input-inline{
        width:160px;
    }
    .layui-table-cell {
         height: auto;
     }

</style>
<div class="layui-form" lay-filter="layuiadmin-form-user_group" id="layuiadmin-form-user_group" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item div-flex">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>基础信息</legend>
        </fieldset>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">微信昵称：</label>
        <div class="layui-input-inline">
            <label class="layui-form-mid">{$detail.nickname}</label>
        </div>
        <label class="layui-form-label">客户姓名：</label>
        <div class="layui-input-inline">
            <label class="layui-form-mid">{$detail.contact}</label>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">会员头像：</label>
        <div class="layui-input-inline">
            <label class="layui-form-mid">
                <img class="image-show" src="{$detail.abs_avatar}" width="80px" height="80px">
            </label>
        </div>
        <label class="layui-form-label">手机号码：</label>
        <div class="layui-input-inline">
            <label class="layui-form-mid">{$detail.telephone}</label>
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">性别：</label>
        <div class="layui-input-inline">
            <label class="layui-form-mid">{$detail.sex}</label>
        </div>
        <div class="layui-input-item">
            <label class="layui-form-label">生日：</label>
            <div class="layui-input-inline">
                <label class="layui-form-mid">{$detail.birthday}</label>
            </div>
        </div>
    </div>
    <div class="layui-form-item div-flex">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>消费能力</legend>
        </fieldset>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label" style="margin-left: 72px;">本月消费金额：</label>
        <div class="layui-input-inline" style="width: 100px;">
            <label class="layui-form-mid">{$detail.month_amount}</label>
        </div>
        <label class="layui-form-label">本月订单笔数：</label>
        <div class="layui-input-inline" style="width: 100px;">
            <label class="layui-form-mid">{$detail.month_num}</label>
        </div>
        <label class="layui-form-label">累积消费金额：</label>
        <div class="layui-input-inline" style="width: 100px;">
            <label class="layui-form-mid">{$detail.total_order_amount}</label>
        </div>
        <label class="layui-form-label">累积订单笔数：</label>
        <div class="layui-input-inline" style="width: 100px;">
            <label class="layui-form-mid">{$detail.total_num}</label>
        </div>
        <label class="layui-form-label">平均消费单价：</label>
        <div class="layui-input-inline" style="width: 100px;">
            <label class="layui-form-mid">{$detail.avg_amount}</label>
        </div>
    </div>
    <div class="layui-form-item div-flex">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>消费明细</legend>
        </fieldset>
    </div>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-tab layui-tab-card" lay-filter="tab-all">
                <ul class="layui-tab-title">
                    <li class="layui-this">下单明细</li>
                    <li >投诉建议</li>
                    <li >跟进记录</li>
                </ul>
            </div>
            <script type="text/html" id="referrer">
                <img src="{{d.avatar}}" style="height:80px;width: 80px;margin-right: 10px;" class="image-show">
                <div class="layui-input-inline">
                    <label>编号：{{d.sn}}</label>
                    <br/>
                    <label>手机号码：{{d.mobile}}</label>
                    <br/>
                    <label>昵称：{{d.nickname}}</label>
                    <br/>
                    <label>注册时间：{{d.create_time}}</label>
                </div>
            </script>
            <script type="text/html" id="account">
                <div class="layui-input-inline">
                    <label>余额：{{d.user_money}}</label>
                    <br/>
                    <label>积分：{{d.user_integral}}</label>
                </div>
            </script>
            <script type="text/html" id="address">
                <div class="layui-input-inline">
                    <label>联系人：{{d.consignee}}</label>
                    <br/>
                    <label>联系手机：{{d.mobile}}</label>
                    <br/>
                    <label>用户档案：{{d.address}}</label>
                    <br/>
                </div>
            </script>

            <div class="layui-card-body">
                <table id="lists" lay-filter="lists"></table>
            </div>
        </div>

    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="user_group-submit" id="user_group-submit" value="确认">
    </div>
</div>
<script>
    layui.config({
        version:"{$front_version}",
        base: '/static/plug/layui-admin/dist/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','table','like','element'], function(){
        var $ = layui.$
            ,form = layui.form
            ,table = layui.table
            ,like = layui.like
            ,element = layui.element
            ,id ="{$detail.id}";
        element.on('tab(tab-all)', function (data) {
            var index = data.index;
            getList(index);
        })
        $(document).on('click', '.image-show', function () {
            var src = $(this).attr('src');
            like.showImg(src,600);
        });
        getList(0)
        function getList(index){
            switch (index) {
                case 0:
                    var cols = [
                        {field: 'order_sn', title: '订单编号',width: 180}
                        ,{field: 'delivery_address', title: '房屋地址',width: 320,toolbar: '#address'}
                        ,{field: 'total_nums', title: '商品数量',align: 'center',width: 100}
                        ,{field: 'total_amount', title: '订单总额',width: 120, templet: function(d){
                               return '￥'+ d.total_amount +'</span>'
                            }
                        }
                        ,{field: 'discount_amount', title: '优惠金额',width: 120,templet: function(d){
                                return '￥'+ d.discount_amount +'</span>'
                            }
                        }
                        ,{field: 'order_amount', title: '实付金额',width: 160,templet: function(d){
                                return '￥'+ d.order_amount +'</span>'
                            }
                        }
                        ,{field: 'number',title:'总次数' ,width: 160}
                         ,{field: 'code',title:'剩余次数' ,width: 160}
                          ,{field: 'code_number',title:'待服务' ,width: 160}
                        ,{field: 'create_time',title:'下单时间'}

                    ];
                    break;
                case 1:
                    var cols = [
                        {field: 'source_type', title: 'id',}
                        ,{field: 'change_amount', title: '投诉订单编号',}
                        ,{field: 'left_amount', title: '服务人员',}
                        ,{field: 'remark', title: '投诉内容',}
                        ,{field: 'create_time', title: '投诉时间',}
                    ];
                    break;
                case 2:
                     var cols = [
                        {field: 'source_type', title: '跟进人员',}
                        ,{field: 'change_amount', title: '跟进记录',}
                        ,{field: 'remark', title: '跟进时间',}
                    ];
                    break;

            }
            table.render({
                id:'lists'
                ,elem: '#lists'
                ,url: '{:url("custom/customlist")}?type='+index+'&user_id='+id //模拟接口
                ,cols: [cols]
                ,page:true
                ,text: {none: '暂无数据！'}
                ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code":res.code,
                        "msg":res.msg,
                        "count": res.data.count, //解析数据长度
                        "data": res.data.lists, //解析数据列表
                    };
                }
            });

        }

    })
</script>