/**
 * Created by sff on 2018/4/2.
 */
$(function() {
    //门店进客比重
    $.ajax({
        type: 'POST',
        // data: {brandclass_id:brandclass_id},
        url: '/crm/juzi/md_jd',
        success: function (res) {
            if (res) {
                $('.jd_mh_today').html(res.jd_mh_today);
                $('.jd_ja_today').html(res.jd_ja_today);
                $('.jd_xh_today').html(res.jd_xh_today);
                $('.jd_mh_month').html(res.jd_mh_month);
                $('.jd_ja_month').html(res.jd_ja_month);
                $('.jd_xh_month').html(res.jd_xh_month);
                $('.jd_total_today').html(res.jd_total_today);
                $('.jd_total_month').html(res.jd_total_month);
                var jkChart = echarts.init(document.getElementById('jkChart'));
                // 指定图表的配置项和数据
                var option = {
                    color: ['#ffd85c', '#55d1ff', '#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, '37%'],
                        label: {
                            normal: {
                                position: 'inner',
                                formatter: '{b}\n{c}\n{d}% ',
                                color: '#104078',
                                fontSize: '13'
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            { value: res.jd_mh_month, name: '闵行店' },
                            { value: res.jd_ja_month, name: '静安店' },
                            { value: res.jd_xh_month, name: '徐汇店' }
                        ]
                    },
                        {
                            name: '本月累计',
                            type: 'pie',
                            radius: ['43%', '52%'],
                            label: {
                                normal: {
                                    formatter: '{b|{b}}\n{hr|}\n {b|{c}}\n {per|{d}%}  ',
                                    backgroundColor: 'rgba(255,255,255,.2)',
                                    borderColor: 'transparent',
                                    color: '#fff',
                                    borderRadius: 4,
                                    padding: [3, 0, 5],
                                    rich: {
                                        a: {
                                            color: '#999',
                                            align: 'center',
                                            lineHeight: 22
                                        },
                                        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: 20
                                        }
                                    }
                                }
                            },
                            data: [
                                { value: res.jd_mh_month, name: '闵行店' },
                                { value: res.jd_ja_month, name: '静安店' },
                                { value: res.jd_xh_month, name: '徐汇店' }
                            ]
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                jkChart.setOption(option);
            }
        }
    })


    $.ajax({
        type: 'POST',
        // data: {brandclass_id:brandclass_id},
        url: '/crm/juzi/md_order',
        success: function (res) {
            if (res) {
                $('.jd_order_mh_today').html(res.jd_order_mh_today);
                $('.jd_order_ja_today').html(res.jd_order_ja_today);
                $('.jd_order_xh_today').html(res.jd_order_xh_today);
                $('.jd_order_mh_month').html(res.jd_order_mh_month);
                $('.jd_order_ja_month').html(res.jd_order_ja_month);
                $('.jd_order_xh_month').html(res.jd_order_xh_month);
                $('.jd_order_online_today').html(res.jd_order_online_today);
                $('.jd_order_online_month').html(res.jd_order_online_month);
                $('.jd_order_total_today').html(res.jd_order_total_today);
                $('.jd_order_total_month').html(res.jd_order_total_month);
                // 【 门店 — 单量比重 】— 本日数据
                var dlChart1 = echarts.init(document.getElementById('dlChart1'));
                // 指定图表的配置项和数据
                var dlOption1 = {
                    color: ['#ffe168'],
                    legend: {
                        data: ['本日数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        right: '10',
                        itemWidth: 20,
                        itemHeight: 12,

                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['闵行店', '静安店', '徐汇店', '线上订单'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }

                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    series: [{
                        name: '本日数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.jd_order_mh_today.toString(),',',''),replace_all(res.jd_order_ja_today.toString(),',',''),replace_all(res.jd_order_xh_today.toString(),',',''),replace_all(res.jd_order_online_today.toString(),',','')]

                    }]
                };

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


                // 【 门店 — 单量比重 】 — 本月数据
                var dlChart2 = echarts.init(document.getElementById('dlChart2'));
                // 指定图表的配置项和数据
                var dlOption2 = {
                    color: ['#57e9ff'],
                    legend: {
                        data: ['本月数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        left: '10',
                        itemWidth: 20,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '10%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['闵行店', '静安店', '徐汇店', '线上订单'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    series: [{
                        name: '本月数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.jd_order_mh_month.toString(),',',''),replace_all(res.jd_order_ja_month.toString(),',',''),replace_all(res.jd_order_xh_month.toString(),',',''),replace_all(res.jd_order_online_month.toString(),',','')]
                    }]
                };

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

    //转介绍单量
    $.ajax({
        type: 'POST',
        // data: {brandclass_id:brandclass_id},
        url: '/crm/juzi/md_zjs_order',
        success: function (res) {
            if (res) {
                $('.jd_zjs_order_mh_today').html(res.jd_zjs_order_mh_today);
                $('.jd_zjs_order_ja_today').html(res.jd_zjs_order_ja_today);
                $('.jd_zjs_order_xh_today').html(res.jd_zjs_order_xh_today);
                $('.jd_zjs_order_mh_month').html(res.jd_zjs_order_mh_month);
                $('.jd_zjs_order_ja_month').html(res.jd_zjs_order_ja_month);
                $('.jd_zjs_order_xh_month').html(res.jd_zjs_order_xh_month);
                $('.jd_zjs_order_total_today').html(res.jd_zjs_order_total_today);
                $('.jd_zjs_order_total_month').html(res.jd_zjs_order_total_month);
                // 【 门店 — 转介绍订单量 】— 本日数据
                var zjsChart1 = echarts.init(document.getElementById('zjsChart1'));
                // 指定图表的配置项和数据
                var zjsOption1 = {
                    color: ['#ffe168'],
                    legend: {
                        data: ['本日数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        right: '10',
                        itemWidth: 20,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['闵行店', '静安店', '徐汇店'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    series: [{
                        name: '本日数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.jd_zjs_order_mh_today.toString(),',',''),replace_all(res.jd_zjs_order_ja_today.toString(),',',''),replace_all(res.jd_zjs_order_xh_today.toString(),',','')]
                    }]
                };

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


                // 【 门店 — 转介绍订单量 】 — 本月数据
                var zjsChart2 = echarts.init(document.getElementById('zjsChart2'));
                // 指定图表的配置项和数据
                var zjsOption2 = {
                    color: ['#57e9ff'],
                    legend: {
                        data: ['本月数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        left: '10',
                        itemWidth: 20,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '10%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['闵行店', '静安店', '徐汇店'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        }
                    }],
                    series: [{
                        name: '本月数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.jd_zjs_order_mh_month.toString(),',',''),replace_all(res.jd_zjs_order_ja_month.toString(),',',''),replace_all(res.jd_zjs_order_xh_month.toString(),',','')]
                    }]
                };

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

//成交率
    $.ajax({
        type: 'POST',
        url: '/crm/juzi/md_order_rate',
        success: function (res) {
            if (res) {
                $('.jd_order_rate_mh_today').html(res.jd_order_rate_mh_today+'%');
                $('.jd_order_rate_ja_today').html(res.jd_order_rate_ja_today+'%');
                $('.jd_order_rate_xh_today').html(res.jd_order_rate_xh_today+'%');
                $('.jd_order_rate_mh_month').html(res.jd_order_rate_mh_month+'%');
                $('.jd_order_rate_ja_month').html(res.jd_order_rate_ja_month+'%');
                $('.jd_order_rate_xh_month').html(res.jd_order_rate_xh_month+'%');
                // 【 门店 — 成交率 】— 本日数据
                var cjlChart1 = echarts.init(document.getElementById('cjlChart1'));
                // 指定图表的配置项和数据
                var cjlOption1 = {
                    color: ['#ffe168'],
                    legend: {
                        data: ['本日数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        right: '10',
                        itemWidth: 20,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['闵行店', '静安店', '徐汇店'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            formatter: '{value}%'
                        }
                    }],
                    series: [{
                        name: '本日数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.jd_order_rate_mh_today.toString(),',',''),replace_all(res.jd_order_rate_ja_today.toString(),',',''),replace_all(res.jd_order_rate_xh_today.toString(),',','')]
                    }]
                };

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


                // 【 门店 — 转介绍订单量 】 — 本月数据
                var cjlChart2 = echarts.init(document.getElementById('cjlChart2'));
                // 指定图表的配置项和数据
                var cjlOption2 = {
                    color: ['#57e9ff'],
                    legend: {
                        data: ['本月数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        left: '10',
                        itemWidth: 20,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '10%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['闵行店', '静安店', '徐汇店'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            formatter: '{value}%'
                        }
                    }],
                    series: [{
                        name: '本月数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.jd_order_rate_mh_month.toString(),',',''),replace_all(res.jd_order_rate_ja_month.toString(),',',''),replace_all(res.jd_order_rate_xh_month.toString(),',','')]
                    }]
                };

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


//门店 — 均价
    $.ajax({
        type: 'POST',
        url: '/crm/juzi/md_yi_avg',
        success: function (res) {
            if (res) {
                $('.md_mh_avg_today').html(res.md_mh_avg_today);
                $('.md_ja_avg_today').html(res.md_ja_avg_today);
                $('.md_xh_avg_today').html(res.md_xh_avg_today);
                $('.md_mh_avg_month').html(res.md_mh_avg_month);
                $('.md_ja_avg_month').html(res.md_ja_avg_month);
                $('.md_xh_avg_month').html(res.md_xh_avg_month);
                $('.md_online_avg_today').html(res.md_online_avg_today);
                $('.md_online_avg_month').html(res.md_online_avg_month);
                // 【 门店 — 均价 】— 本日数据
                var jjChart1 = echarts.init(document.getElementById('jjChart1'));
                // 指定图表的配置项和数据
                var jjOption1 = {
                    color: ['#ffe168'],
                    legend: {
                        data: ['本日数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        right: '10',
                        itemWidth: 20,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '3%',
                        right: '10%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['闵行店', '静安店', '徐汇店', '线上订单'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            formatter: '{value}w'
                        }
                    }],
                    series: [{
                        name: '本日数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.md_mh_avg_today.toString(),',',''),replace_all(res.md_ja_avg_today.toString(),',',''),replace_all(res.md_xh_avg_today.toString(),',',''),replace_all(res.md_online_avg_today.toString(),',','')]
                    }]
                };

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


                // 【 门店 — 均价 】 — 本月数据
                var jjChart2 = echarts.init(document.getElementById('jjChart2'));
                // 指定图表的配置项和数据
                var jjOption2 = {
                    color: ['#57e9ff'],
                    legend: {
                        data: ['本月数据'],
                        textStyle: {
                            fontSize: 12,
                            color: '#fff'
                        },
                        left: '10',
                        itemWidth: 20,
                        itemHeight: 12,
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        top: '20%',
                        left: '10%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['闵行店', '静安店', '徐汇店', '线上订单'],
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45
                        }
                    }],
                    yAxis: [{
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#fff',
                                width: 1
                            }
                        },
                        axisLabel: {
                            formatter: '{value}w'
                        }
                    }],
                    series: [{
                        name: '本月数据',
                        type: 'bar',
                        barWidth: '37%',
                        data: [replace_all(res.md_mh_avg_month.toString(),',',''),replace_all(res.md_ja_avg_month.toString(),',',''),replace_all(res.md_xh_avg_month.toString(),',',''),replace_all(res.md_online_avg_month.toString(),',','')]
                    }]
                };

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


})
function replace_all(str,tag,rep){
    var re = new RegExp(tag,"g"); //定义正则表达式
//第一个参数是要替换掉的内容，第二个参数"g"表示替换全部（global）。
    var Newstr = str.replace(re,rep);
    return Newstr;
}