{extend name="Public/base" /}
{block name="js"}
<script>
    var ON_SELECT_COLOR = "{$on_select_color}" ? "#{$on_select_color}" : '#ffd7dc';

    var colModel = {if $colModel} {$colModel}{else}[]{/if};
    var colNames = {if $colNames} {$colNames}{else}[]{/if};
    var R_menu_all = [];

    {volist name="right_menu_list" id="vo"}
    R_menu_all.push("{$vo}");
    {/volist}
</script>
<script src="__PUBLIC__/js/public.js?v={$Think.const.APP_VERSION}"></script>
<script src="__PUBLIC__/js/echarts.min.js"></script>
{/block}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/font/fonts/iconfont.css?v={$Think.const.APP_VERSION}">

<style type="text/css">
    .bd3{
        width: 100% ;
        height: auto;
        max-width: 1750px;
        min-width: 1550px;
        overflow: hidden;
        padding: 12px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
    }
    .sb1{
        max-width: 560px;
        min-width: 470px;
        width: 32.5%;
        height: 350px;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        margin-right: 12px;
        margin-bottom: 12px;
    }
    .sb1_title{
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #e7e7e7;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 18px;
        color: #333;
        line-height: 60px;
    }
    .sb3{
        width: 100%;
        height: 300px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .sb2{
        width: 50%;
        height: 147px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
    }
    .sb2 image{
        width: 66px;
        height: 66px;
    }
    .m2{
        width: 150px;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding-left: 15px;
    }
    .m2 strong{
        width: 100%;
        height: auto;
        font-size: 26px;
        color: #333;
    }
    .m2 span{
        width: 100%;
        height: auto;
        font-size: 16px;
        color: #666;
    }
    .sb12{
        max-width: 560px;
        min-width: 470px;
        width: 32.5%;
        height: 470px;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        margin-right: 12px;
        margin-bottom: 12px;
    }
    .sb13{
        /*max-width: 1160px;*/
        width: 65.5%;
        height: 470px;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        margin-right: 12px;
        margin-bottom: 12px;
    }
    .schart2{
        height:450px;
        width: 100%;
    }
    .schart1{
        height:400px;
        width: 95%;
    }
</style>
{/block}
{block name="main"}
<div class="if_wrap" style="background-color: #eff3f8;">
    <div class="bd3">
        <div class="sb1">
            <div class="sb1_title">客户数据</div>
            <div class="sb3">
                <div class="sb2">
                    <img src="__PUBLIC__/img/m1.png">
                    <div class="m2">
                        <strong id="all_customer">{$all}</strong>
                        <span>总客户数</span>
                        {:help('H_client_home_allcustomer')}
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m2.png">
                    <div class="m2">
                        <strong id="the_month">{$the_month}</strong>
                        <span>本月新增客户数</span>
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m3.png">
                    <div class="m2">
                        <strong id="all_vip">{$all_vip}</strong>
                        <span>总会员数</span>
                        {:help('H_client_home_allvip')}
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m4.png">
                    <div class="m2">
                        <strong id="the_month_vip">{$the_month_vip}</strong>
                        <span>本月新增会员数</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="sb1">
            <div class="sb1_title">财务数据</div>
            <div class="sb3">
                <div class="sb2">
                    <img src="__PUBLIC__/img/m5.png">
                    <div class="m2">
                        <strong id="month_pay">{$month_pay}</strong>
                        <span>本月实收</span>
                        {:help('H_client_home_monthpay')}
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m6.png">
                    <div class="m2">
                        <strong id="vip_money">{$vip_money}</strong>
                        <span>总会员卡余额</span>
                        {:help('H_client_home_vipmoney')}
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m7.png">
                    <div class="m2">
                        <strong id="month_cz">{$month_cz}</strong>
                        <span>本月新增充值</span>
                        {:help('H_client_home_monthcz')}
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m8.png">
                    <div class="m2">
                        <strong id="month_kx">{$month_kx}</strong>
                        <span>本月卡销</span>
                        {:help('H_client_home_monthkx')}
                    </div>
                </div>
            </div>
        </div>
        <div class="sb1">
            <div class="sb1_title">订单数据</div>
            <div class="sb3">
                <div class="sb2">
                    <img src="__PUBLIC__/img/m9.png">
                    <div class="m2">
                        <strong id="order">{$order}</strong>
                        <span>总订单数</span>
                        {:help('H_client_home_order')}
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m10.png">
                    <div class="m2">
                        <strong id="month_order">{$month_order}</strong>
                        <span>本月新增订单</span>
                        {:help('H_client_home_monthorder')}
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m11.png">
                    <div class="m2">
                        <strong id="not_photo_num">{$not_photo}</strong>
                        <span>待拍套系</span>
                        {:help('H_client_home_notphoto')}
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m12.png">
                    <div class="m2">
                        <strong id="not_photo_money">{$not_photo_money}</strong>
                        <span>待拍套系价值</span>
                        {:help('H_client_home_photomoney')}
                    </div>
                </div>
            </div>
        </div>
        <!-- 第二行显示内容 -->
        <div class="sb12">
            <div class="sb1_title">消费类型分析</div>
            <div class="sb3">
                <div id="container" class="schart2"></div>
            </div>
        </div>
        <div class="sb13">
            <div class="sb1_title">订单分析</div>
            <div class="sb3">
                <div id="psChart1" class="schart1"></div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">
    layui.use(['layer','form'], function () {
        $.ajax({
            type: "POST",
            url: "/crm/Client/getData",
            data: {data:'all_customer,the_month,all_vip,the_month_vip,month_pay,vip_money,month_cz,month_kx,order,month_order,not_photo'},
            dataType: 'json',
            success: function (res) {
                if(res.code == 200){
                    $.each(res.data,function(i,v){
                        $('#'+i).html(v);
                    });
                }
            }
        })
        $.ajax({
            type: "POST",
            url: "/crm/Client/getConsumptionData",
            data: {},
            dataType: 'json',
            success: function (res) {
                if(res.code == 200){
                    var consumptiontype = res.data.consumptiontype;
                    var consumption_type_arr = res.data.consumption_type_arr;
                    var dom = document.getElementById("container");
                    var myChart = echarts.init(dom);
                    var option = {
                        color: ['#5be3c1', '#fb7293', '#ffb69e', '#ffdb5c', '#8e86e2', '#58b1e0'],
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b} : {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            right: '30',
                            top: '60',
                            data: consumptiontype
                        },
                        series: [
                            {
                                name: '消费类型',
                                type: 'pie',
                                radius: [30, 110],
                                center: ['35%', '50%'],
                                roseType: 'area',
                                data: consumption_type_arr
                            }
                        ]
                    };
                    myChart.setOption(option, true);
                    
                }
            }
        })
        $.ajax({
            type: "POST",
            url: "/crm/Client/getYearOrders",
            data: {},
            dataType: 'json',
            success: function (res) {
                if(res.code == 200){
                    var month_order_arr = res.data.month_order_arr
                    var psChart1 = echarts.init(document.getElementById('psChart1'));
                    var option1 = {
                        color: ['#4dcdad', '#c9f0e6'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            top: '50',
                            left: '50',
                            right: 0,
                            bottom: '30',
                            containLabel: true
                        },
                        xAxis: [{
                            type: 'category',
                            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                            axisLine: {
                                lineStyle: {
                                    color: '#333',
                                    width: 1
                                }
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            axisLine: {
                                lineStyle: {
                                    color: '#333',
                                    width: 1
                                }
                            }
                        }],
                        series: [
                            {
                                name: '订单量',
                                type: 'bar',
                                stack: '订单量',
                                barWidth: '30%',
                                data: month_order_arr
                            },


                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    psChart1.setOption(option1);
                }
            }
        })
    })

    // var month_order_obj = JSON.parse('{$month_order_arr}');
    // var month_order_arr = [];
    // $.each(month_order_obj,function(k,v){
    //     month_order_arr.push(v)
    // })

    // console.log(month_order_arr)
    // console.log('示例',[320,914,958,255,356,586,444,336,999,332,222,222]);

        
    // 使用刚指定的配置项和数据显示图表。
    // psChart1.setOption(option1);

    
</script>
{/block}