/**
 * 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();
    // 本月网络新单量走势 图
    monthNewOrderNumber();
    // 本月转化率 （ 毛客 / 有效获取 ） 走势 图
    monthCusOrderRateNumber();
    // 本月转化率 （ 新单 / 有效获取 ） 走势 图
    monthOrderRateNumber();

    // half = setInterval(function(){
    //     baseData();
    // },30000);
    // one = setInterval(function(){
    //     dayChangeRate();
    //     monthChangeRate();
    //     // 四个排行榜
    //     rankData();
    // },60000);
    // two = setInterval(function(){
    //     monthCustomerNumber();
    //     monthNewOrderNumber();
    //     monthCusOrderRateNumber();
    //     monthOrderRateNumber();
    // },120000);
    /* ---------------------------------------------  页面开始的时候加载的数据 end  --------------------------------------------- */
    // 数据展示底部轮播
    var index=0;
    var half;
    var one;
    var two;
    var tabLunbo=function(){
        // clearInterval(half);
        // clearInterval(one);
        // 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');
        // alert(bid);
        // return false;
        // 页面基础数据
        baseData(bid);
        // 四个排行榜
        rankData(bid);
        // if(bid == 'JJ001'){
        if(bid == 'JJ001' || bid == "JJET003" ){
            dayGroupStaffData(bid);
            $(".first-ul").hide();
            $(".second-ul").show();
        }else{
            dayChangeRate(bid);
            monthChangeRate(bid);
            $(".first-ul").show();
            $(".second-ul").hide();
        }
        monthCustomerNumber(bid);
        //monthIntoNumber(bid);
        monthCusOrderRateNumber(bid);
        monthNewOrderNumber(bid);
        monthOrderRateNumber(bid);
        // half = setInterval(function(){
        //     baseData(bid);
        // },30000);
        // one = setInterval(function(){
        //     dayChangeRate(bid);
        //     monthChangeRate(bid);
        //     // 四个排行榜
        //     rankData(bid);
        // },60000);
        // two = setInterval(function(){
        //     monthCustomerNumber(bid);
        //     //monthIntoNumber(bid);
        //     monthNewOrderNumber(bid);
        //     monthOrderRateNumber(bid);
        // },120000);
    };
    var timer=setInterval(tabLunbo,60000);
    // var timer=setInterval(tabLunbo,6000000);

    $(".top-tab li").click(function(){
        clearInterval(timer);
        var ind=$(this).index();
        $(".top-tab li").eq(ind).addClass("active").siblings().removeClass("active");
        index=ind-1;
        if( $(this).attr("bid")=="JJ001" || $(this).attr("bid")=="JJET003"){
            $(".first-ul").hide();
            $(".second-ul").show();
            $("#mkz").html('小组订单排名');
            $("#yx").html('小组业绩排名');
            $("#xd").html('员工订单排名');
            $("#yj").html('员工业绩排名');
        }else{
            $(".first-ul").show();
            $(".second-ul").hide();
            $("#mkz").html('毛客资日排名');
            $("#yx").html('网销有效日排名');
            $("#xd").html('网销新单日排名');
            $("#yj").html('网销业绩日排名');
        }
        tabLunbo();
        timer=setInterval(tabLunbo,600000);
        // timer=setInterval(tabLunbo,60000000);
    })
});
// 页面基础数据
function baseData (brandclass_id) {
    $.ajax({
        type: 'POST',
        data: {brandclass_id:brandclass_id},
        url : '/crm/Jujiao/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;
    $.ajax({
        type: 'POST',
        data: {brandclass_id:brandclass_id},
        url : '/crm/Jujiao/rankData',
        success: function(res){
            if (res) {
                // 毛客资
                var brandDayNew  = res.brandDayNew;
                var ret1 = '<table cellpadding="0" cellspacing="0">';
                var j1=0;
                for(var i = 0; i < brandDayNew.length; i++){
                    j1=i+1;
                    ret1 += '<tr><td>'+(j1)+'</td><td>'+brandDayNew[i]['shop_name']+'</td><td>'+brandDayNew[i]['dayNum']+'/<small>'+brandDayNew[i]['monthNum']+'</small></td><td></td></tr>'
                }
                ret1 +='</table>';
                $('#brandDayNew').html(ret1);

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

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

                // 深挖新单
                var shopChannelOrder= res.shopChannelOrder;
                var ret5 = '<table cellpadding="0" cellspacing="0">';
                var j5=0;
                for(var i = 0; i < shopChannelOrder.length; i++){
                    j5=i+1;
                    // ret5 += '<tr><td>'+(j5)+'</td><td>'+shopChannelOrder[i]['shop_name']+'</td><td>'+shopChannelOrder[i]['dayNum']+'</td><td></td></tr>';
                    ret5 += '<tr><td>'+(j5)+'</td><td>'+shopChannelOrder[i]['shop_name']+'</td><td>'+shopChannelOrder[i]['dayNum']+'/<small>'+shopChannelOrder[i]['monthNum']+'</small></td><td></td></tr>'
                }
                ret4 +='</table>';
                $('#brandDayDeepChannel').html(ret5);
            };
        }
    })
}
//小组中人员信息
function dayGroupStaffData(bid){
    $.ajax({
        type: 'POST',
        data: {shop_code:bid},
        url : '/crm/Jujiao/dayGroupStaffData',
        success: function(res){
            $.each(res,function(index,dom){
                var tem=$("#template").clone();
                tem.attr("id","");
                tem.find("caption").html(dom.title);
                var temStr="<tr>";
                $.each(dom.data,function(ind,dom1){
                    //console.log(dom1)
                    if(ind>=3){
                        return false;
                    }
                    temStr+="<td>"+dom1['staff_name']+"</td><td>"+dom1['jr']+"</td><td>"+dom1['valid']+"</td><td>"+dom1['rate']+"</td></tr>"
                });
                tem.find("tbody").html(temStr);
                tem.show();
                $(".left-table-wrap").append(tem);
            });
            //console.log(res);
        }
    })
}
// 转化漏斗 （日） 图
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: ['毛客资量','有效客资','订单'],
            // 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/Jujiao/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: ['毛客资量','有效客资','订单'],
            // 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/Jujiao/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:'10%',
            x2:'5%',
            y2:"20.5%",
            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/Jujiao/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 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.5%",
            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/Jujiao/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 monthCusOrderRateNumber (brandclass_id){
    // 基于准备好的dom，初始化echarts实例
    var monthOrderRateNumber = echarts.init(document.getElementById('monthIntoNumber'));
    monthOrderRateNumber.clear();

    monthOrderRateNumber.setOption({
        color: ['#ffae95','#ffaf74'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'15%',
            y:'10%',
            x2:'6%',
            y2:"20.5%",
            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/Jujiao/monthCusOrderRateNumber',
        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 monthOrderRateNumber (brandclass_id){
    // 基于准备好的dom，初始化echarts实例
    var monthOrderRateNumber = echarts.init(document.getElementById('monthOrderRateNumber'));
    monthOrderRateNumber.clear();

    monthOrderRateNumber.setOption({
        color: ['#ffae95','#ffaf74'],
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            x:'15%',
            y:'10%',
            x2:'6%',
            y2:"20.5%",
            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/Jujiao/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
            });
        }
    })
}
