$(function(){ 

    // 
    $(".tit-span").click(function(){
        $(".tit-span").removeClass("active");
        $(this).addClass("active");
        var lab = $(this).attr("data-lab");
        brandStatisticsDataDS(lab);
        brandStatisticsDataWx(lab);
    });
    // 电商 网销 实时数据
    brandStatisticsDataDS('today');
    brandStatisticsDataWx('today');
	// 页面基础数据
    baseData();
    brandValidRate();
    brandUnvalidData();
    brandChannelDay();
    brandChannelMonth();
});
// 电商数据
function brandStatisticsDataDS (day) {
    $.ajax({
        type: 'POST',
        url : '/crm/Bigscreen/brandStatisticsDataDS',
        data: {day:day},
        success: function(res){
            if (res) {
                // var content = '';
                // for (var i = res.length - 1; i >= 0; i--) {
                //     content += '<div class="date_con"><div class="data-tit">'+res[i]["shop_name"]+'</div><div class="data-row"><span class="lab-name">总花费：</span><span class="lab-num">'+res[i]["cost"]+'</span></div><div class="data-row"><span class="lab-name">总获取：</span><span class="lab-num">'+res[i]["customerNum"]+'</span></div><div class="data-row"><span class="lab-name">总有效获取：</span><span class="lab-num">'+res[i]["validNum"]+'</span></div><div class="data-row"><span class="lab-name">总获取手机：</span><span class="lab-num">'+res[i]["telNum"]+'</span></div><div class="data-row"><span class="lab-name">总进店：</span><span class="lab-num">'+res[i]["intoNum"]+'</span></div><div class="data-row"><span class="lab-name">总订单：</span><span class="lab-num">'+res[i]["orderNum"]+'</span></div><div class="data-row"><span class="lab-name">成交金额：</span><span class="lab-num">'+res[i]["orderMoney"]+'</span></div><div class="data-row"><span class="lab-name">成交平均：</span><span class="lab-num">'+res[i]["costAvg"]+'</span></div><div class="data-row"><span class="lab-name">获取成本：</span><span class="lab-num">'+res[i]["cusCost"]+'</span></div><div class="data-row"><span class="lab-name">成交成本：</span><span class="lab-num">'+res[i]["orderCost"]+'</span></div><div class="data-row" style="width: 100%"><span class="lab-name">获取到成交率：</span><span class="lab-num">'+res[i]["validRate"]+'</span></div><div class="data-row" style="width: 100%"><span class="lab-name">毛客资到成交转换率：</span><span class="lab-num">'+res[i]["cusRate"]+'</span></div></div>';
                // };
                // $('#ds').html(content);
                $("#cost").html(res.ds.cost);
                $("#customerNum").html(res.ds.customerNum);
                $("#validNum").html(res.ds.validNum);
                $("#telNum").html(res.ds.telNum);
                $("#intoNum").html(res.ds.intoNum);
                $("#orderNum").html(res.ds.orderNum);
                $("#orderNewNum").html(res.ds.orderNewNum);
                $("#money").html(res.ds.money);
                $("#avePrice").html(res.ds.avePrice);
                $("#cusCost").html(res.ds.cusCost);
                $("#validCost").html(res.ds.validCost);
                $("#intoCost").html(res.ds.intoCost);
                $("#orderCost").html(res.ds.orderCost);
                $("#roi").html(res.ds.roi);
                $("#validRate").html(res.ds.validRate);
                $("#intoRate").html(res.ds.intoRate);
                $("#orderRate").html(res.ds.orderRate);
                $("#valTOrderRate").html(res.ds.valTOrderRate);
                $("#cusTOrder").html(res.ds.cusTOrder);
                $("#valTNewOrderRate").html(res.ds.valTNewOrderRate);
                $("#cusTNewOrder").html(res.ds.cusTNewOrder);
            };
        },
    })
}
// 网销数据
function brandStatisticsDataWx (day) {
    $.ajax({
        type: 'POST',
        url : '/crm/Bigscreen/brandStatisticsDataWx',
        data: {day:day},
        success: function(res){
            if (res) {
                // var content = '';
                // for (var i = res.length - 1; i >= 0; i--) {
                //     content += '<div class="date_con"><div class="data-tit">'+res[i]["wx"]["shop_name"]+'</div><div class="data-row"><span class="lab-name">网络进店：</span><span class="lab-num">'+res[i]["wx"]["tjd"]+' / '+res[i]["wx"]["mjd"]+'</span></div><div class="data-row"><span class="lab-name">线上支付：</span><span class="lab-num">'+res[i]["wx"]["toxd"]+' / '+res[i]["wx"]["moxd"]+'</span></div><div class="data-row" ><span class="lab-name">网络成交率：</span><span class="lab-num">'+res[i]["wx"]["tOrderRate"]+' / '+res[i]["wx"]["tOrderRate"]+'</span></div><div class="data-row"><span class="lab-name">网络新单：</span><span class="lab-num">'+res[i]["wx"]["txd"]+' / '+res[i]["wx"]["mxd"]+'</span></div><div class="data-row"><span class="lab-name">新单成本：</span><span class="lab-num">'+res[i]["wx"]["tOrderCost"]+' / '+res[i]["wx"]["mOrderCost"]+'</span></div><div class="data-row" style="width: 100%"><span class="lab-name">全月进店目标：</span><span class="lab-num">'+res[i]["wx"]["jdTarget"]+' / '+res[i]["wx"]["jdTargetRate"]+'</span></div><div class="data-row" style="width: 100%"><span class="lab-name">全月新单目标：</span><span class="lab-num">'+res[i]["wx"]["xdTarget"]+' / '+res[i]["wx"]["xdTargetRate"]+'</span></div></div><div class="date_con"><div class="data-tit">'+res[i]["qd"]["shop_name"]+'</div><div class="data-row"><span class="lab-name">渠道进店：</span><span class="lab-num">'+res[i]["qd"]["tjd"]+' / '+res[i]["qd"]["mjd"]+'</span></div><div class="data-row"><span class="lab-name">线上成交：</span><span class="lab-num">'+res[i]["qd"]["toxd"]+' / '+res[i]["qd"]["moxd"]+'</span></div><div class="data-row"><span class="lab-name">渠道成交率：</span><span class="lab-num">'+res[i]["qd"]["tOrderRate"]+' / '+res[i]["qd"]["tOrderRate"]+'</span></div><div class="data-row"><span class="lab-name">渠道新单：</span><span class="lab-num">'+res[i]["qd"]["txd"]+' / '+res[i]["qd"]["mxd"]+'</span></div><div class="data-row" style="width: 100%"><span class="lab-name">全月进店目标：</span><span class="lab-num">'+res[i]["qd"]["jdTarget"]+' / '+res[i]["qd"]["jdTargetRate"]+'</span></div><div class="data-row" style="width: 100%"><span class="lab-name">全月新单目标：</span><span class="lab-num">'+res[i]["qd"]["xdTarget"]+' / '+res[i]["qd"]["xdTargetRate"]+'</span></div></div><div class="date_con"><div class="data-tit">'+res[i]["all"]["shop_name"]+'</div><div class="data-row"><span class="lab-name">总进店：</span><span class="lab-num">'+res[i]["all"]["tjd"]+' / '+res[i]["all"]["mjd"]+'</span></div><div class="data-row"><span class="lab-name">线上支付：</span><span class="lab-num">'+res[i]["all"]["toxd"]+' / '+res[i]["all"]["moxd"]+'</span></div><div class="data-row"><span class="lab-name">总成交率：</span><span class="lab-num">'+res[i]["all"]["tOrderRate"]+' / '+res[i]["all"]["tOrderRate"]+'</span></div><div class="data-row"><span class="lab-name">总新单：</span><span class="lab-num">'+res[i]["all"]["txd"]+' / '+res[i]["all"]["mxd"]+'</span></div><div class="data-row" style="width: 100%"><span class="lab-name">总邀约目标/进度：</span><span class="lab-num">'+res[i]["all"]["jdTarget"]+' / '+res[i]["all"]["jdTargetRate"]+'</span></div><div class="data-row" style="width: 100%"><span class="lab-name">总新单目标/进度：</span><span class="lab-num">'+res[i]["all"]["xdTarget"]+' / '+res[i]["all"]["xdTargetRate"]+'</span></div></div>';
                // };
                // $('#wx').html(content);
                // 网销
                $("#wxIntoNum").html(res.wx.wxIntoNum);
                $("#wxNewOrder").html(res.wx.wxNewOrder);
                $("#wxValidOrder").html(res.wx.wxValidOrder);
                $("#wxRefundOrder").html(res.wx.wxRefundOrder);
                $("#wxOrderRate").html(res.wx.wxOrderRate);
                // 渠道
                $("#qdInto").html(res.qd.qdInto);
                $("#qdValidOrder").html(res.qd.qdValidOrder);
                $("#qdOrderRate").html(res.qd.qdOrderRate);
            };
        },
    })
}
// 页面基础数据
function baseData () {
    $.ajax({
        type: 'POST',
        url : '/crm/Bigscreen/brandBaseData',
        success: function(res){
            if (res) {
                $("#validCustomerT").html(res.validCustomerT);
                $("#validCustomerM").html(res.validCustomerM);
                $("#noReceiveCustomer").html(res.noReceiveCustomer);
                $("#onlineStaffs").html(res.onlineStaffs);
            };
        },
    })
}
// 有效比例 饼状图
function brandValidRate () {
    var chart1 = echarts.init(document.getElementById('chart1'));
    chart1.clear();

    chart1.setOption({
        color:['#ffd85c','#37a2da','#fd7b5f','#00ffd5'],
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c}<br/> ({d}%)"
        },
        legend: {
            orient: 'horizontal',
            data:['今日有效','今日无效','本月有效','本月无效'],
            textStyle: {
                fontSize: 12,
                color: '#fff'
            }
        },
        series: [
            {
                name:'',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],
                label: {
                    normal: {
                        //position: 'inner',
                        formatter: '{b|{b}}\n{hr|}\n {c} {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 12,
                                lineHeight: 22,
                                align: 'center'
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2,
                                lineHeight: 22,
                            }
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: true
                    }
                },
                data:[
                    // {value:679, name:'今日有效', selected:true},
                    // {value:333, name:'今日无效'}
                ]
            },
            {
                name:'',
                type:'pie',
                radius: ['40%', '55%'],
                label: {
                    normal: {
                        formatter: '{b|{b}}\n{hr|}\n {c} {per|{d}%}  ',
                        backgroundColor: '#eee',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        borderRadius: 4,
                        rich: {
                            a: {
                                color: '#999',
                                lineHeight: 22,
                                align: 'center'
                            },
                            hr: {
                                borderColor: '#aaa',
                                width: '100%',
                                borderWidth: 0.5,
                                height: 0
                            },
                            b: {
                                fontSize: 12,
                                lineHeight: 22,
                                align: 'center'
                            },
                            per: {
                                color: '#eee',
                                backgroundColor: '#334455',
                                padding: [2, 4],
                                borderRadius: 2,
                                lineHeight: 30
                            }
                        }
                    }
                },
                data:[
                    // {value:335, name:'本月有效'},
                    // {value:110, name:'本月无效'}
                ]
            }
        ]
    });

    $.ajax({
        type: 'POST',
        url : '/crm/Bigscreen/brandValidRate',
        success: function(res){
            console.log(res);

            chart1.setOption({
                series: [
                    {
                        data:[
                            {value:res.validCustomerT, name:'今日有效', selected:true},
                            {value:res.unvalidCustomerT, name:'今日无效'}
                        ],
                    },
                    {
                        data:[
                            {value:res.validCustomerM, name:'本月有效'},
                            {value:res.unvalidCustomerM, name:'本月无效'}
                        ],
                    }
                ]
            });
        }
    })
}

// 无效客资柱状图
function brandUnvalidData () {
    var chart2 = echarts.init(document.getElementById('chart2'));
    chart2.clear();

    chart2.setOption({
        color: ['#fcdd80'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '10%',
            bottom: '3%',
            top:'0',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            position:"top",
            boundaryGap: [0, 0.01],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            type: 'category',
            inverse:'true',
            data: [],
            axisLine:{
                lineStyle:{
                    color:'#fff'
                }
            },
            axisLabel:{
                interval:'0',//横轴信息全部显示
                textStyle:{
                   lineHeight:30,
                   fontSize: 16,
                },
                formatter:function(c){
                    for(i in c){
                        return c.substring(0,7)+'...';
                        // return c.replace(c.substring(0,10),c.substring(0,10)+'\n');
                    }
                }
            }
        },
        series: [
            {
                name: '',
                type: 'bar',
                data: []
            }
        ]
    });

    $.ajax({
        type: 'POST',
        url : '/crm/Bigscreen/brandUnvalidData',
        success: function(res){
            // console.log(res);
            chart2.setOption({
                yAxis:{
                    data:res.names
                },
                series: [{
                    data:res.data
                }]
            });
        }
    })
}

// 渠道客资量 （日）
function brandChannelDay () {
    // 基于准备好的dom，初始化echarts实例
    var chart3 = echarts.init(document.getElementById('chart3'));
    chart3.clear();

    chart3.setOption({
        color: ['#00ffd5'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '10%',
            bottom: '3%',
            top:'0',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            position:"top",
            boundaryGap: [0, 0.01],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            type: 'category',
            inverse:'true',
            data: [],
            axisLine:{
                lineStyle:{
                    color:'#fff'
                }
            },
            axisLabel:{
                interval:'0',//横轴信息全部显示
                textStyle:{
                   lineHeight:30,
                   fontSize: 16,
                }
            }
        },
        series: [
            {
                name: '',
                type: 'bar',
                data: []
            }
        ]
    });

    $.ajax({
        type: 'POST',
        url : '/crm/Bigscreen/brandChannelDay',
        success: function(res){
            chart3.setOption({
                yAxis:{
                    data:res.names
                },
                series: [{
                    data:res.data
                }]
            });
        }
    })
}

// 渠道客资量 （月）
function brandChannelMonth () {
    // 基于准备好的dom，初始化echarts实例
    var chart4 = echarts.init(document.getElementById('chart4'));
    chart4.clear();

    chart4.setOption({
        color: ['#66e0ff'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '10%',
            bottom: '3%',
            top:'0',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            position:"top",
            boundaryGap: [0, 0.01],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            type: 'category',
            inverse:'true',
            data: [],
            axisLine:{
                lineStyle:{
                    color:'#fff'
                }
            },
            axisLabel:{
                interval:'0',//横轴信息全部显示
                textStyle:{
                   lineHeight:30,
                   fontSize: 16,
                }
            }
        },
        series: [
            {
                name: '',
                type: 'bar',
                data: []
            }
        ]
    });

    $.ajax({
        type: 'POST',
        url : '/crm/Bigscreen/brandChannelMonth',
        success: function(res){
            chart4.setOption({
                yAxis:{
                    data:res.names
                },
                series: [{
                    data:res.data
                }]
            });
        }
    })
}