<php>function _get_system_widget($name){</php>
<switch name="name">
    <case value="MainContributors">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">技术支持</h3>
            </div>
            <div class="panel-body home-info">
                <ul class="list-inline">
                    <li>银河百荣科技</li>
                </ul>
            </div>
        </div>
    </case>
</switch>
<php>}</php>


<include file="public@header"/>
<style>
    .home-info li em {
        float: left;
        width: 120px;
        font-style: normal;
        font-weight: bold;
    }

    .home-info ul {
        padding: 0;
        margin: 0;
    }

    .panel {
        margin-bottom: 0;
    }

    .grid-sizer {
        width: 10%;
    }

    .grid-item {
        margin-bottom: 5px;
        padding: 5px;
    }

    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 5px;
        padding-right: 5px;
        float: none;
    }

</style>
<hook name="admin_before_head_end"/>
</head>
<body>
<div class="wrap">

    <if condition="!extension_loaded('fileinfo')">
        <div class="grid-item col-md-12">
            <div class="alert alert-danger alert-dismissible fade in" role="alert" style="margin-bottom: 0;">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <strong>提示!</strong> php_fileinfo扩展没有开启,无法正常上传文件!
            </div>
        </div>
    </if>

    <div class="home-grid">
        <!-- width of .grid-sizer used for columnWidth -->
        <div class="grid-sizer"></div>
        <foreach name="dashboard_widgets" item="vo">
            <if condition="$vo.is_system">
                <div class="grid-item col-md-12" data-system="1" data-widget="{$vo.name}">
                    <div class="dashboard-box">{:_get_system_widget($vo.name)}</div>
                </div>
                <else/>
                <present name="dashboard_widget_plugins[$vo['name']]">
                    <div class="grid-item col-md-{$dashboard_widget_plugins[$vo['name']]['width']}" data-system="0"
                         data-widget="{$vo.name}">
                        <div class="dashboard-box">{$dashboard_widget_plugins[$vo.name]['view']}</div>
                    </div>
                </present>

            </if>

        </foreach>
    </div>
</div>
<script src="__STATIC__/js/admin.js"></script>
<php>
    $lang_set=defined('LANG_SET')?LANG_SET:'';
    $BRONET_VERSION=defined('BRONET_VERSION')?BRONET_VERSION:'';
</php>
<script>

    Wind.css('dragula');
    Wind.use('masonry', 'imagesloaded', 'dragula', function () {
        var $homeGrid = $('.home-grid').masonry({
            // set itemSelector so .grid-sizer is not used in layout
            itemSelector: '.grid-item',
            // use element for option
            columnWidth: '.grid-sizer',
            percentPosition: true,
            horizontalOrder: false,
            transitionDuration: 0
        });

        $homeGrid.masonry('on', 'layoutComplete', function (event, laidOutItems) {
        });


        $homeGrid.masonry();

        var containers = [];
        $('.home-grid .grid-item').each(function () {
            containers.push(this);
        });
        dragula(containers, {
            isContainer: function (el) {
                return false; // only elements in drake.containers will be taken into account
            },
            moves: function (el, source, handle, sibling) {
                return true; // elements are always draggable by default
            },
            accepts: function (el, target, source, sibling) {
                return true; // elements can be dropped in any of the `containers` by default
            },
            invalid: function (el, handle) {
                return false; // don't prevent any drags from initiating by default
            },
            direction: 'vertical',             // Y axis is considered when determining where an element would be dropped
            copy: false,                       // elements are moved by default, not copied
            copySortSource: false,             // elements in copy-source containers can be reordered
            revertOnSpill: false,              // spilling will put the element back where it was dragged from, if this is true
            removeOnSpill: false,              // spilling will `.remove` the element, if this is true
            mirrorContainer: document.body,    // set the element that gets mirror elements appended
            ignoreInputTextSelection: true     // allows users to select input text, see details below
        }).on('drop', function (el, target, source, sibling) {
            var $target          = $(target);
            var targetClasses    = $target.attr('class');
            var targetDataWidget = $target.data('widget');
            var targetDataSystem = $target.data('system');
            var $source          = $(source);
            var sourceClasses    = $source.attr('class');
            var sourceDataWidget = $source.data('widget');
            var sourceDataSystem = $source.data('system');
            $(source).append($(target).find('.dashboard-box').not('.gu-transit'));
            $(target).append(el);
            $target.attr('class', sourceClasses);
            $target.data('widget', sourceDataWidget);
            $target.data('system', sourceDataSystem);

            $source.attr('class', targetClasses);
            $source.data('widget', targetDataWidget);
            $source.data('system', targetDataSystem);
            $homeGrid.masonry();

            _widgetSort();
        }).on('shadow', function (el, container, source) {
            $homeGrid.masonry();
        });


    });

    function _widgetSort() {

        var widgets = [];
        $('.home-grid .grid-item').each(function () {
            var $this = $(this);

            widgets.push({
                name: $this.data('widget'),
                is_system: $this.data('system')
            });
        });

        $.ajax({
            url: "{:url('main/dashboardWidget')}",
            type: 'post',
            dataType: 'json',
            data: {widgets: widgets},
            success: function (data) {

            },
            error: function () {

            },
            complete: function () {

            }
        });
    }
</script>
<hook name="admin_before_body_end"/>

<script>
    $(document).ready(function() {
        //初始化切换
        $(".animsition").animsition({

            inClass               :   'fade-in-right',
            outClass              :   'fade-out',
            inDuration            :    1500,
            outDuration           :    800,
            linkElement           :   '.animsition-link',
            // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
            loading               :    true,
            loadingParentElement  :   'body', //animsition wrapper element
            loadingClass          :   'animsition-loading',
            unSupportCss          : [ 'animation-duration',
                '-webkit-animation-duration',
                '-o-animation-duration'
            ],
            //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
            //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".

            overlay               :   false,

            overlayClass          :   'animsition-overlay-slide',
            overlayParentElement  :   'body'
        });

        //虚拟数据
        var date = ['2016/11/1','2016/11/2','2016/11/3','2016/11/4','2016/11/5','2016/11/6','2016/11/7','2016/11/8','2016/11/9','2016/11/10',
            '2016/11/11','2016/11/12','2016/11/13','2016/11/14','2016/11/15','2016/11/16','2016/11/17','2016/11/18'
            ,'2016/11/19','2016/11/20','2016/11/21','2016/11/22','2016/11/23','2016/11/24','2016/11/25','2016/11/26','2016/11/27'
            ,'2016/11/28','2016/11/29','2016/11/30'];


        function my_data(){
            var data = [];
            for( var i =0; i<30; i++){
                data.push(Math.round(Math.random() * (500 - 100) + 100));
            };
            return data;
        }
        var num = my_data();
        var bl = '30%';

        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar',
                'echarts/chart/line',
                'echarts/chart/pie'// 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main1'),'macarons');
                var myChart2 = ec.init(document.getElementById('main2'),'macarons');
                var myChart3 = ec.init(document.getElementById('main3'),'macarons');
                var myChart4 = ec.init(document.getElementById('main4'),'macarons');

                var option = {
                    backgroundColor:'white',
                    title:{
                        text : '新老客户分析',
                        y: '15'
                    },
                    tooltip : {
                        trigger: 'axis',
                        formatter : function(data){
                            //console.log(data);
                            var str = data[1].name ;
                            str += '</br>新客户人数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>新客户销售额:' + data[1].value + ' 占比:' + bl;
                            str += '</br>新客户成交笔数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>老客户人数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>老客户销售额:' + data[1].value + ' 占比:' + bl;
                            str += '</br>老客户成交笔数:' + data[1].value + ' 占比:' + bl;

                            return str;
                        }
                    },
                    legend: {
                        selectedMode : false,
                        data:['新客户','老客户'],
                        y:'20'
                    },
                    grid:{
                        y:'100'
                    },
                    toolbox: {
                        show : false,
                        y:'20',
                        feature : {
                            mark : {show: false},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    dataZoom : {
                        show : true,
                        realtime : true,
                        y: 320,
                        height: 20,
                        start : 85,
                        end : 100
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : true,
                            data : date
                        }
                    ],
                    yAxis : [
                        {
                            name : '人数',
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'新客户',
                            type:'bar',
                            //stack: '总量',
                            barMaxWidth : 15,

                            itemStyle:{
                                normal:{
                                    borderWidth : 3
                                }
                            },
                            data:my_data()
                        },
                        {
                            name:'老客户',
                            type:'bar',
                            //stack: '总量',
                            barMaxWidth : 15,

                            itemStyle:{
                                normal:{
                                    borderWidth : 3
                                }
                            },
                            data:my_data()
                        },

                    ]
                };
                var option2 = {
                    title:{
                        text : '普通客户 忠诚客户 骨灰级客户分析',
                        y: '15'
                    },
                    backgroundColor:'white',
                    tooltip : {
                        trigger: 'axis',
                        formatter : function(data){
                            var str = data[1].name ;
                            str += '</br>普通客户人数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>普通客户销售额:' + data[1].value + ' 占比:' + bl;
                            str += '</br>普通客户成交笔数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>忠诚客户人数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>忠诚客户销售额:' + data[1].value + ' 占比:' + bl;
                            str += '</br>忠诚客户成交笔数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>骨灰级客户人数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>骨灰级客户销售额:' + data[1].value + ' 占比:' + bl;
                            str += '</br>骨灰级客户成交笔数:' + data[1].value + ' 占比:' + bl;

                            return str;
                        }
                    },
                    legend: {
                        selectedMode : false,
                        data:['普通客户','忠诚客户','骨灰级客户分析'],
                        y:'20'
                    },
                    grid:{
                        y:'100'
                    },
                    toolbox: {
                        show : false,
                        y:'20',
                        feature : {
                            mark : {show: false},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    dataZoom : {
                        show : true,
                        realtime : true,
                        y: 320,
                        height: 20,
                        start : 70,
                        end : 100
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : true,
                            data : date
                        }
                    ],
                    yAxis : [
                        {
                            name : '人数',
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'普通客户',
                            type:'bar',
                            //stack: '总量',
                            barMaxWidth : 15,
                            itemStyle:{
                                normal:{
                                    borderWidth : 3
                                }
                            },
                            data:my_data()
                        },
                        {
                            name:'忠诚客户',
                            type:'bar',
                            //stack: '总量',
                            barMaxWidth : 15,
                            itemStyle:{
                                normal:{
                                    borderWidth : 3
                                }
                            },
                            data:my_data()
                        },
                        {
                            name:'骨灰级客户分析',
                            type:'bar',
                            //stack: '总量',
                            barMaxWidth : 15,
                            itemStyle:{
                                normal:{
                                    borderWidth : 3
                                }
                            },
                            data:my_data()
                        }

                    ]
                };

                var option3 = {
                    backgroundColor:'white',
                    title:{
                        text : '各级别会员分析',
                        y: '15'
                    },
                    tooltip : {
                        trigger: 'axis',
                        formatter : function(data){
                            var str = data[1].name ;
                            str += '</br>准会员人数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>准会员销售额:' + data[1].value + ' 占比:' + bl;
                            str += '</br>准会员成交笔数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>普通会员人数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>普通会员销售额:' + data[1].value + ' 占比:' + bl;
                            str += '</br>普通会员成交笔数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>高级会员人数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>高级会员销售额:' + data[1].value + ' 占比:' + bl;
                            str += '</br>高级会员成交笔数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>VIP会员人数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>VIP会员销售额:' + data[1].value + ' 占比:' + bl;
                            str += '</br>VIP会员成交笔数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>超级VIP会员人数:' + data[1].value + ' 占比:' + bl;
                            str += '</br>超级VIP会员销售额:' + data[1].value + ' 占比:' + bl;
                            str += '</br>超级VIP会员成交笔数:' + data[1].value + ' 占比:' + bl;
                            return str;
                        }
                    },
                    legend: {
                        selectedMode : false,
                        data:['准会员','普通会员','高级会员','VIP会员','超级VIP会员'],
                        y:'20'
                    },
                    grid:{
                        y:'100'
                    },
                    toolbox: {
                        show : false,
                        y:'20',
                        feature : {
                            mark : {show: false},
                            dataView : {show: true, readOnly: false},
                            magicType : {show: true, type: ['line', 'bar']},
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    dataZoom : {
                        show : true,
                        realtime : true,
                        y: 320,
                        height: 20,
                        start : 70,
                        end : 100
                    },
                    calculable : true,
                    xAxis : [
                        {
                            type : 'category',
                            boundaryGap : true,
                            data : date
                        }
                    ],
                    yAxis : [
                        {
                            name : '人数',
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'准会员',
                            type:'bar',
                            //stack: '总量',
                            barMaxWidth : 15,

                            itemStyle:{
                                normal:{
                                    borderWidth : 3
                                }
                            },
                            data:my_data()
                        },
                        {
                            name:'普通会员',
                            type:'bar',
                            //stack: '总量',
                            barMaxWidth : 15,

                            itemStyle:{
                                normal:{
                                    borderWidth : 3
                                }
                            },
                            data:my_data()
                        },
                        {
                            name:'高级会员',
                            type:'bar',
                            //stack: '总量',
                            barMaxWidth : 15,

                            itemStyle:{
                                normal:{
                                    borderWidth : 3
                                }
                            },
                            data:my_data()
                        },
                        {
                            name:'VIP会员',
                            type:'bar',
                            //stack: '总量',
                            barMaxWidth : 15,

                            itemStyle:{
                                normal:{
                                    borderWidth : 3
                                }
                            },
                            data:my_data()
                        },
                        {
                            name:'超级VIP会员',
                            type:'bar',
                            //stack: '总量',
                            barMaxWidth : 15,

                            itemStyle:{
                                normal:{
                                    borderWidth : 3
                                }
                            },
                            data:my_data()
                        }

                    ]
                };
                var option4 = {
                    title:{
                        text : '昨日订单来源分析',
                        y: '15'
                    },
                    backgroundColor:'white',
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient : 'vertical',
                        x : 'right',
                        y : 'center',
                        data:['PC端','移动端','微信']
                    },
                    toolbox: {
                        show : false,
                        feature : {
                            mark : {show: true},
                            dataView : {show: true, readOnly: false},
                            magicType : {
                                show: true,
                                type: ['pie', 'funnel'],
                                option: {
                                    funnel: {
                                        x: '25%',
                                        width: '50%',
                                        funnelAlign: 'center',
                                        max: 1548
                                    }
                                }
                            },
                            restore : {show: true},
                            saveAsImage : {show: true}
                        }
                    },
                    calculable : false,
                    series : [
                        {
                            name:'客户来源',
                            type:'pie',
                            center:['40%','55%'],
                            radius : ['40%', '52%'],
                            itemStyle : {
                                normal : {
                                    label : {
                                        show : false
                                    },
                                    labelLine : {
                                        show : false
                                    }
                                },
                                emphasis : {
                                    label : {
                                        show : true,
                                        position : 'center',
                                        textStyle : {
                                            fontSize : '30',
                                            fontWeight : 'bold'
                                        }
                                    }
                                }
                            },
                            data:[
                                {value:335, name:'PC端'},
                                {value:310, name:'移动端'},
                                {value:234, name:'微信'}
                            ]
                        }
                    ]
                };


                //var ecConfig = require('echarts/config');


                // 为echarts对象加载数据
                myChart.setOption(option);
                myChart2.setOption(option4);
                myChart3.setOption(option3);
                myChart4.setOption(option2);

                /*myChart3.on(ecConfig.EVENT.LEGEND_SELECTED, function(param){
                    if(param.type == 'legendSelected'){
                        return;
                    }
                });*/

            }
        );

        /*
         // 基于准备好的dom,初始化echarts实例


           var myChart = echarts.init(document.getElementById('main1'),'macarons');
           var myChart2 = echarts.init(document.getElementById('main2'),'macarons');
           var myChart3 = echarts.init(document.getElementById('main3'),'macarons');
           var option = {
               backgroundColor:'white',
                   tooltip : {
                       trigger: 'axis'
                   },
                   legend: {
                       data:['转化人数'],
                       y:'20'
                   },
                  grid:{
                      y:'100'
                  },
                   toolbox: {
                       show : true,
                       y:'20',
                       feature : {
                           mark : {show: true},
                           dataView : {show: true, readOnly: false},
                           magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                           restore : {show: true},
                           saveAsImage : {show: true}
                       }
                   },
                   dataZoom: [{
                       type: 'inside',
                       start: 90,
                       end: 100
                   }, {
                       start: 90,
                       end: 100,
                       handleSize: '80%',
                       handleStyle: {
                           color: '#fff',
                           shadowBlur: 3,
                           shadowColor: 'rgba(0, 0, 0, 0.6)',
                           shadowOffsetX: 2,
                           shadowOffsetY: 2
                       }
                   }],
                   calculable : true,
                   xAxis : [
                       {
                           type : 'category',
                           boundaryGap : false,
                           data : date
                       }
                   ],
                   yAxis : [
                       {
                           type : 'value'
                       }
                   ],
                   series : [
                       {
                           name:'转化人数',
                           type:'line',
                           stack: '总量',
                           barMaxWidth : 30,
                           itemStyle:{
                               normal:{
                                   borderWidth : 5
                               }
                           },
                           data:my_data()
                       },

                   ]
               };

               var option2 = {
               backgroundColor:'white',
                   tooltip : {
                       trigger: 'axis'
                   },
                   legend: {
                       data:['付款总额'],
                       y:'20'
                   },
                  grid:{
                      y:'100'
                  },
                   toolbox: {
                       show : true,
                       y:'20',
                       feature : {
                           mark : {show: true},
                           dataView : {show: true, readOnly: false},
                           magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                           restore : {show: true},
                           saveAsImage : {show: true}
                       }
                   },
                   dataZoom: [{
                       type: 'inside',
                       start: 90,
                       end: 100
                   }, {
                       start: 90,
                       end: 100,
                       handleSize: '80%',
                       handleStyle: {
                           color: '#fff',
                           shadowBlur: 3,
                           shadowColor: 'rgba(0, 0, 0, 0.6)',
                           shadowOffsetX: 2,
                           shadowOffsetY: 2
                       }
                   }],
                   calculable : true,
                   xAxis : [
                       {
                           type : 'category',
                           boundaryGap : false,
                           data : date
                       }
                   ],
                   yAxis : [
                       {
                           type : 'value'
                       }
                   ],
                   series : [
                       {
                           name:'付款总额',
                           type:'line',
                           stack: '总量',
                           barMaxWidth : 30,
                           itemStyle:{
                               normal:{
                                   borderWidth : 5
                               }
                           },
                           data:my_data()
                       },

                   ]
               };

               var option3 = {
               backgroundColor:'white',
                   tooltip : {
                       trigger: 'axis',
                       formatter: '{b}</br>{a}:{c}</br>占比:' + bl
                   },
                   legend: {
                       data:['人数','占比'],
                       y:'20'
                   },
                  grid:{
                      y:'100'
                  },
                   toolbox: {
                       show : true,
                       y:'20',
                       feature : {
                           mark : {show: true},
                           dataView : {show: true, readOnly: false},
                           magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                           restore : {show: true},
                           saveAsImage : {show: true}
                       }
                   },
                   dataZoom: [{
                       type: 'inside',
                       start: 90,
                       end: 100
                   }, {
                       start: 90,
                       end: 100,
                       handleSize: '80%',
                       handleStyle: {
                           color: '#fff',
                           shadowBlur: 3,
                           shadowColor: 'rgba(0, 0, 0, 0.6)',
                           shadowOffsetX: 2,
                           shadowOffsetY: 2
                       }
                   }],
                   calculable : true,
                   xAxis : [
                       {
                           type : 'category',
                           boundaryGap : false,
                           data : date
                       }
                   ],
                   yAxis : [
                       {
                           type : 'value'
                       }
                   ],
                   series : [
                       {
                           name:'人数',
                           type:'line',
                           stack: '总量',
                           barMaxWidth : 30,
                           itemStyle:{
                               normal:{
                                   borderWidth : 5
                               }
                           },
                           data:num
                       },
                       {
                           name:'占比',
                           type:'line',
                           stack: '占比',
                           barMaxWidth : 30,
                           show : false,
                           itemStyle:{
                               normal:{
                                   borderWidth : 5,
                                   //color :'#32dadd'
                               }
                           },
                           data:num
                       },

                   ]
               };
               // 使用刚指定的配置项和数据显示图表。
               myChart.setOption(option);
               myChart2.setOption(option2);
               myChart3.setOption(option3);*/


    });
</script>

</body>
</html>