/**
 * Created by sff on 2018/1/3.
 */

$(function(){
    //设置尺寸
    function setRem ()// 绑定到窗口的这个事件中
    {
        var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
        var wH = window.innerHeight;// 当前窗口的高度
        var wW = window.innerWidth<=1920?1920:window.innerWidth;// 当前窗口的宽度
        var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
        $('html').css('font-size', rem + "px");
    }
    setRem ();
    $(window).resize(function(){
        setRem ();
        window.location.reload();
    });
   // 右上角时间显示
    $("#Timer").text(new Date().toLocaleString());
    setInterval(function(){
        $("#Timer").text(new Date().toLocaleString());
    },1000);
    /* ---------------------------------------------  页面开始的时候加载的数据 start  --------------------------------------------- */
    // 页面基础数据
    baseData();
    // 四个排行榜
    rankData();
    // 转化漏斗 （日） 图
    dayChangeRate();
    // 转化漏斗 （月） 图
    monthChangeRate();
    // 本月毛客资量走势 图
    monthCustomerNumber();
    // 本月网销邀约 （进店） 量走势 图
    monthIntoNumber();
    // 本月网络新单量走势 图
    monthNewOrderNumber();
    // 本月转化率 （ 新单 / 有效获取 ） 走势 图
    monthOrderRateNumber();

    two = setInterval(function(){
        baseData();
        dayChangeRate();
        monthChangeRate();
        rankData();
        monthCustomerNumber();
        monthIntoNumber();
        monthNewOrderNumber();
        monthOrderRateNumber();
    },120000);
    /* ---------------------------------------------  页面开始的时候加载的数据 end  --------------------------------------------- */
    // 数据展示底部轮播
    var index=0;
    var two;
    var tabLunbo=function(){
        clearInterval(two);
        index++;
        if(index==$(".top-tab li").length){
            index=0;
        }
        $(".top-tab li").eq(index).addClass("active").siblings().removeClass("active");
        var bid = $(".top-tab li").eq(index).attr('bid');
        // 页面基础数据
        baseData(bid);
        // 四个排行榜
        rankData(bid);
        dayChangeRate(bid);
        monthChangeRate(bid);
        monthCustomerNumber(bid);
        monthIntoNumber(bid);
        monthNewOrderNumber(bid);
        monthOrderRateNumber(bid);
    };
    var timer=setInterval(tabLunbo,120000);
    $(".top-tab li").click(function(){
        clearInterval(timer);
        index=$(this).index()-1;
        tabLunbo();
        timer=setInterval(tabLunbo,120000);
    });
});
// 页面基础数据
function baseData (brandclass_id) {
    $.ajax({
        type: 'POST',
        data: {brandclass_id:brandclass_id},
        url : '/crm/Tcdj/baseData',
        success: function(res){
            if (res) {
                $("#cost").html(res.cost);
                // $("#another").html(res.another);
                // $("#total_cost").html(res.total_cost);
                $("#allCus").html(res.allCus);
                $("#validCustomer").html(res.validCustomer);
                $("#validObtail").html(res.validObtail);
                $("#intoCustomer").html(res.intoCustomer);
                $("#orderCustomer").html(res.orderCustomer);
                $("#money").html(res.money);
                $("#succRate").html(res.succRate);
                $("#allCusRate").html(res.allCusRate);
                $("#total_cus").html(res.total_cus);
                $("#total_order").html(res.total_order);
                $("#dayChangeRateData").html('日转化率：'+res.dayChangeRate);
                $("#monthChangeRateData").html('月转化率：'+res.monthChangeRate);
            };
        },
        // error:function(){
        //     baseData(brandclass_id);
        // }
    })
}
// 四个排行榜
function rankData (brandclass_id) {
    var brandclass_id = brandclass_id;
    // console.log(brandclass_id);
    if (brandclass_id) {
        $(".bs-right").show();
        $(".bs-right-jt").hide();
        $.ajax({
            type: 'POST',
            data: {brandclass_id:brandclass_id},
            url : '/crm/Tcdj/rankData',
            success: function(res){
                if (res) {
                    // 营收
                    var shopMoney  = res.shopMoney;
                    var ret1 = '<table cellpadding="0" cellspacing="0">';
                    var j1=0;
                    for(var i = 0; i < shopMoney.length; i++){
                        j1=i+1;
                        ret1 += '<tr><td>'+(j1)+'</td><td>'+shopMoney[i]['shop_name']+'</td><td>'+shopMoney[i]['dayNum']+'/<small>'+shopMoney[i]['monthNum']+'</small></td><td></td></tr>'
                    }
                    ret1 +='</table>';
                    $('#shopMoney').html(ret1);

                    // 订单
                    var shopOrder= res.shopOrder;
                    var ret2 = '<table cellpadding="0" cellspacing="0">';
                    var j2=0;
                    for(var i = 0; i < shopOrder.length; i++){
                        j2=i+1;
                        ret2 += '<tr><td>'+(j2)+'</td><td>'+shopOrder[i]['shop_name']+'</td><td>'+shopOrder[i]['dayNum']+'/<small>'+shopOrder[i]['monthNum']+'</small></td><td></td></tr>'
                    }
                    ret2 +='</table>';
                    $('#shopOrder').html(ret2);

                    // 拍照
                    var shopPhoto = res.shopPhoto;
                    var ret3 = '<table cellpadding="0" cellspacing="0">';
                    var j3=0;
                    for(var i = 0; i < shopPhoto.length; i++){
                        j3=i+1;
                        ret3 += '<tr><td>'+(j3)+'</td><td>'+shopPhoto[i]['shop_name']+'</td><td>'+shopPhoto[i]['dayNum']+'/<small>'+shopPhoto[i]['monthNum']+'</small></td><td></td></tr>'
                    }
                    ret3 +='</table>';
                    $('#shopPhoto').html(ret3);

                    // 选片
                    var shopSp= res.shopSp;
                    var ret4 = '<table cellpadding="0" cellspacing="0">';
                    var j4=0;
                    for(var i = 0; i < shopSp.length; i++){
                        j4=i+1;
                        ret4 += '<tr><td>'+(j4)+'</td><td>'+shopSp[i]['shop_name']+'</td><td>'+shopSp[i]['dayNum']+'/<small>'+shopSp[i]['monthNum']+'</small></td><td></td></tr>'
                    }
                    ret4 +='</table>';
                    $('#shopSp').html(ret4);
                };
            }
        })
    }else{
        $(".bs-right").hide();
        $(".bs-right-jt").show();
        // 集团右侧数据
        jtRankDataHs();
        jtRankDataEt();
        // 婚纱营收走势图
        hsYsPic();
        // 优优营收走势图
        etYsPic();
    }
}
// 婚纱数据
function jtRankDataHs () {
    $.ajax({
        type: 'POST',
        url : '/crm/Tcdj/jtRankDataHs',
        success: function(res){
            if (res) {
                $("#hsys").html(res.hsys);
                $("#hsdd").html(res.hsdd);
                $("#hsyx").html(res.hsyx);
                $("#hsyj").html(res.hsyj);
                $("#hsxp").html(res.hsxp);
                $("#hsex").html(res.hsex);
                $("#hsej").html(res.hsej);
                $("#hslf").html(res.hslf);
                $("#hssp").html(res.hssp);
                $("#hspz").html(res.hspz);
            };
        }
    })
}
// 优优数据
function jtRankDataEt () {
    $.ajax({
        type: 'POST',
        url : '/crm/Tcdj/jtRankDataEt',
        success: function(res){
            if (res) {
                $("#etys").html(res.etys);
                $("#etdd").html(res.etdd);
                $("#etyx").html(res.etyx);
                $("#etyj").html(res.etyj);
                $("#etxp").html(res.etxp);
                $("#etex").html(res.etex);
                $("#etej").html(res.etej);
                $("#etlf").html(res.etlf);
                $("#etsp").html(res.etsp);
                $("#etpz").html(res.etpz);
            };
        }
    })
}
// 转化漏斗 （日） 图
function dayChangeRate (brandclass_id) {
    // 基于准备好的dom，初始化echarts实例
    var dayChangeRate = echarts.init(document.getElementById('dayChangeRate'));
    dayChangeRate.clear();

    dayChangeRate.setOption({
        title: {
            // text: '转化漏斗（日）',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        color:['#ffaf74','#65fbe3','#85e6ff','#fcdd7f'],  //手动设置每个图例的颜色
        legend: {
            data: ['毛客资量','有效客资','进店','订单'],
            itemWidth: 15,
            itemHeight: 10,
            itemGap: 5,
            textStyle: {
                fontSize: 12,
                color: '#fff'
            }
        },
        grid: {
            x:'10%',
            y:'20%',
            x2:'5%',
            y2:"15%",
            borderWidth:1
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            show:false,
            type: 'category'
        },
        series: [],
    });
    var arr=[];
    var labelOption = {
        normal: {
            show: true,
            position: 'right',
            // distance: '15',
            // align: 'left',
            // verticalAlign: 'middle',
            // rotate: 90,
            // formatter: '{c} {a}',
            formatter: '{c}',
            fontSize: 12,
            textStyle: {
                color: '#FFF',
            }
            // formatter: '{c}  {name|{a}}',
            // rich: {
            //     name: {
            //         textBorderColor: '#fff'
            //     }
            // }
        }
    };
    $.ajax({
        type: 'POST',
        data: {brandclass_id:brandclass_id},
        url : '/crm/Tcdj/dayChangeRate',
        success: function(res){
            for(var i=0;i<res.length;i++){
                arr.push({
                    name: res[i].name,
                    data: [res[i].data],
                    type: 'bar',
                    label: labelOption,
                })
            }
            dayChangeRate.setOption({
                series: arr
            });
        }
    })
}
// 转化漏斗 （月） 图
function monthChangeRate (brandclass_id) {
    // 基于准备好的dom，初始化echarts实例
    var monthChangeRate = echarts.init(document.getElementById('monthChangeRate'));
    monthChangeRate.clear();

    monthChangeRate.setOption({
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        color:['#ffaf74','#65fbe3','#85e6ff','#fcdd7f'],  //手动设置每个图例的颜色
        legend: {
            data: ['毛客资量','有效客资','进店','订单'],
            itemWidth: 15,
            itemHeight: 10,
            itemGap: 5,
            textStyle: {
                fontSize: 12,
                color: '#fff'
            }
        },
        grid: {
            x:'5%',
            y:'20%',
            x2:'10%',
            y2:"15%",
            borderWidth:1
        },
        xAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            show:false,
            type: 'category'
        },
        series: [],
    });
    var arr=[];
    var labelOption = {
        normal: {
            show: true,
            position: 'right',
            // distance: '15',
            // align: 'left',
            // verticalAlign: 'middle',
            // rotate: 90,
            formatter: '{c}',
            fontSize: 12,
            textStyle: {
                color: '#FFF',
            }
            // formatter: '{c}  {name|{a}}',
            // rich: {
            //     name: {
            //         textBorderColor: '#fff'
            //     }
            // }
        }
    };
    $.ajax({
        type: 'POST',
        data: {brandclass_id:brandclass_id},
        url : '/crm/Tcdj/monthChangeRate',
        success: function(res){
            for(var i=0;i<res.length;i++){
                arr.push({
                    name: res[i].name,
                    data: [res[i].data],
                    type: 'bar',
                    label: labelOption,
                })
            }
            monthChangeRate.setOption({
                series: arr
            });
        }
    })
}
// 本月毛客资量走势 图
function monthCustomerNumber (brandclass_id) {
    // 基于准备好的dom，初始化echarts实例
    var monthCustomerNumber = echarts.init(document.getElementById('monthCustomerNumber'));
    monthCustomerNumber.clear();

    monthCustomerNumber.setOption({
        tooltip: {
            trigger: 'axis'
        },
        color: ['#66e0ff'],
        grid: {
            x:'10%',
            y:'12%',
            x2:'5%',
            y2:"20%",
            borderWidth:1
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            },
            data: [],
        },
        yAxis: {
                type: 'value',
                // max:800,
                // min:0,
                axisLine:{
                    lineStyle:{
                        color:'#fff',
                        width:1
                    }
                }
        },
        series: [],
    });
    var arr=[];
    var labelOption = {
        normal: {
            show: true,
            position: 'top',
        }
    };
    $.ajax({
        type: 'POST',
        data: {brandclass_id:brandclass_id},
        url : '/crm/Tcdj/monthCustomerNumber',
        success: function(res){
            arr.push({
                name:res.data[0].name,
                data:res.data[0].data,
                type: 'bar',
                // label: labelOption,
            })
            monthCustomerNumber.setOption({
                xAxis: {
                    data: res.timezone
                },
                series: arr
            });
        }
    })
}
// 本月网销邀约 （进店） 量走势 图
function monthIntoNumber (brandclass_id) {
    // 基于准备好的dom，初始化echarts实例
    var monthIntoNumber = echarts.init(document.getElementById('monthIntoNumber'));
    monthIntoNumber.clear();

    monthIntoNumber.setOption({
        color: ['#fcdd7f'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'13%',
            y:'12%',
            x2:'6%',
            y2:"20%",
            borderWidth:1
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            type: 'value',
            // max:800,
            // min:0,
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        series: [],
    });
    var arr=[];
    var labelOption = {
        normal: {
            show: true,
            position: 'top',
        }
    };
    $.ajax({
        type: 'POST',
        data: {brandclass_id:brandclass_id},
        url : '/crm/Tcdj/monthIntoNumber',
        success: function(res){
            arr.push({
                name:res.data[0].name,
                data:res.data[0].data,
                type: 'bar',
                // label: labelOption,
            })
            monthIntoNumber.setOption({
                xAxis: {
                    data: res.timezone
                },
                series: arr
            });
        }
    })
}
// 本月网络新单量走势 图
function monthNewOrderNumber (brandclass_id) {
    // 基于准备好的dom，初始化echarts实例
    var monthNewOrderNumber = echarts.init(document.getElementById('monthNewOrderNumber'));
    monthNewOrderNumber.clear();

    monthNewOrderNumber.setOption({
        color: ['#00ffd6'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'10%',
            y:'10%',
            x2:'5%',
            y2:"20%",
            borderWidth:1
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            type: 'value',
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        series: [],
    });
    var arr=[];
    var labelOption = {
        normal: {
            show: true,
            position: 'top',
        }
    };
    $.ajax({
        type: 'POST',
        data: {brandclass_id:brandclass_id},
        url : '/crm/Tcdj/monthNewOrderNumber',
        success: function(res){
            arr.push({
                name:res.data[0].name,
                data:res.data[0].data,
                type: 'bar',
                // label: labelOption,
            })
            monthNewOrderNumber.setOption({
                xAxis: {
                    data: res.timezone
                },
                series: arr
            });
        }
    })
}
// 本月转化率 （ 新单 / 有效获取 ） 走势 图
function monthOrderRateNumber (brandclass_id){
    // 基于准备好的dom，初始化echarts实例
    var monthOrderRateNumber = echarts.init(document.getElementById('monthOrderRateNumber'));
    monthOrderRateNumber.clear();

    monthOrderRateNumber.setOption({
        color: ['#ffae95','#ffaf74'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'13%',
            y:'10%',
            x2:'6%',
            y2:"20%",
            borderWidth:1
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            // type: 'value',
            interval: 25,
            axisLabel: {
                formatter: '{value} %'
            },
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        series: [],
    });
    var arr=[];
    var labelOption = {
        normal: {
            show: true,
            position: 'top',
        }
    };
    $.ajax({
        type: 'POST',
        data: {brandclass_id:brandclass_id},
        url : '/crm/Tcdj/monthOrderRateNumber',
        success: function(res){
            for(var i=0;i<res.data.length;i++){
                arr.push({
                    name:res.data[i].name,
                    data:res.data[i].data,
                    type: 'line',
                    // label: labelOption,
                })
            }
            monthOrderRateNumber.setOption({
                xAxis: {
                    data: res.timezone
                },
                series: arr
            });
        }
    })
}
// 婚纱营收走势图
function hsYsPic () {
    // 基于准备好的dom，初始化echarts实例
    var hsYsPic = echarts.init(document.getElementById('hsYsPic'));
    hsYsPic.clear();
    hsYsPic.setOption({
        color: ['#ffae95','#ffaf74'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'2%',
            y:'10%',
            x2:'5%',
            y2:"15%",
            borderWidth:1
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            // type: 'value',
            interval: 25,
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        series: [],
    });
    var arr=[];
    var labelOption = {
        normal: {
            show: true,
            position: 'top',
        }
    };
    $.ajax({
        type: 'POST',
        url : '/crm/Tcdj/hsYsPic',
        success: function(res){
            for(var i=0;i<res.data.length;i++){
                arr.push({
                    name:res.data[i].name,
                    data:res.data[i].data,
                    type: 'bar',
                    // label: labelOption,
                })
            }
            hsYsPic.setOption({
                xAxis: {
                    data: res.timezone
                },
                series: arr
            });
        }
    })
}
// 优优营收走势图
function etYsPic () {
    // 基于准备好的dom，初始化echarts实例
    var etYsPic = echarts.init(document.getElementById('etYsPic'));
    etYsPic.clear();
    etYsPic.setOption({
        color: ['#ffae95','#ffaf74'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'8%',
            y:'10%',
            x2:'5%',
            y2:"15%",
            borderWidth:1
        },
        xAxis:  {
            type: 'category',
            boundaryGap: false,
            data: [],
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        yAxis: {
            // type: 'value',
            interval: 25,
            axisLabel: {
                formatter: '{value}'
            },
            axisLine:{
                lineStyle:{
                    color:'#fff',
                    width:1
                }
            }
        },
        series: [],
    });
    var arr=[];
    var labelOption = {
        normal: {
            show: true,
            position: 'top',
        }
    };
    $.ajax({
        type: 'POST',
        url : '/crm/Tcdj/etYsPic',
        success: function(res){
            for(var i=0;i<res.data.length;i++){
                arr.push({
                    name:res.data[i].name,
                    data:res.data[i].data,
                    type: 'bar',
                    // label: labelOption,
                })
            }
            etYsPic.setOption({
                xAxis: {
                    data: res.timezone
                },
                series: arr
            });
        }
    })
}