<?xml version="1.0" encoding="UTF-8"?>

<!--
    $Date: 2018/9/4
    微件-客户数量统计
    WIDGET-BP-COUNT
-->
<a:screen xmlns:a="http://www.leaf-framework.org/application">
    <a:init-procedure/>
    <a:view template="default" package="leaf.ui.std">
        <!--单独微件测试用-->
        <!--<script src="${/request/@context_path}/leafresource/js/attach/g2.min.js"></script>-->
        <style>
            html,body{
            background-color:#eee;
            width:264px;
            height:264px;
            margin: 0;
            padding: 0;
            }
            .widget_bp_count{
            box-sizing:border-box;
            width:264px;
            height:264px;
            background-color:#fff;
            position:relative;
            border:1px solid #F0F0F3;
            cursor:default;
            }
            .widget_bp_count .widget_label{
            position:absolute;
            width:40px;
            height:4px;
            top:0;
            left:16px;
            background-color: #FFD95B;
            }
            .widget_bp_count .row1{
            position:relative;
            height:22px;
            padding:16px 13px 8px 16px;
            border-bottom:1px solid #F0F0F3;
            }
            .widget_bp_count .row1 .left{
            line-height:22px;
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: rgba(75,80,90,0.85);
            }
            .widget_bp_count .row1 .right{
            position:absolute;
            right:13px;
            bottom:8px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: rgba(75,80,90,0.75);
            }
            .widget_bp_count .row1 .right #this_month_new{
            margin-left:5px;
            font-family: Baskerville-SemiBoldItalic;
            font-size: 12px;
            color: #4866CC;
            }
            .widget_bp_count .row2{
            height:20px;
            margin:8px auto;
            text-align:center;
            font-family: PingFangSC-Regular;
            font-size: 14px;
            color: rgba(75,80,90,0.75);
            }
            .widget_bp_count .row2 #total_bp_amount{
            font-family: Baskerville-SemiBoldItalic;
            font-size: 14px;
            color: #FFC200;
            margin-left:5px;
            }
            .widget_bp_count .row3 .g-guide .center_label{
            text-align:center;
            width:10em;
            }
            .widget_bp_count .row3 .g-guide .center_label .type{
            font-family: PingFangSC-Regular;
            font-size: 13.87px;
            color: rgba(75,80,90,0.85);
            line-height: 21.67px;
            margin:0;
            }
            .widget_bp_count .row3 .g-guide .center_label .count{
            font-family: PingFangSC-Regular;
            font-size: 16.25px;
            color: #4B505A;
            line-height: 17.31px;
            margin:0;
            }
        </style>
        <script><![CDATA[
        function on_bp_type_count_ds_load(ds){
            var records=ds.data;
            var chartData=[];
            if(records!==null && records.length>0){
                records.forEach(function(i){
                    chartData.push(i.data);
                });
            }
            // 关闭 G2 的体验改进计划打点请求
            G2.track(false);
            var bp_type_count_chart = new G2.Chart({
                container: 'bp_type_count_chart',
                width: 262,
                height: 180,
                animate: false,
                padding: 5
            });
            bp_type_count_chart.source(chartData);
            bp_type_count_chart.coord('theta', {
                radius: 0.75,
                innerRadius: 0.74
            });
            bp_type_count_chart.tooltip({
                showTitle: false,
                itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
            });
            bp_type_count_chart.guide().html({
                position: ['50%', '50%'],
                html: '<div class="center_label"><p class="type">' + chartData[0].type + '</p><p class="count">' + chartData[0].count + '</p></div>'
            });
            bp_type_count_chart.legend(false);
            var interval = bp_type_count_chart.intervalStack()
                .position('count')
                .color('type', ['#00D093', '#5A7FFF','#A5BAFF',' #AFB6BC',' #5B637B','#FFC200'])
                .tooltip('type*count', function (type, count) {
                    return {
                        name: type,
                        value: count
                    };
                }).style({
                    lineWidth: 1,
                    stroke: '#fff'
                });
            bp_type_count_chart.render();
            interval.setSelected(chartData[0]);
            bp_type_count_chart.on('interval:click', function(ev){
                var curData = ev.data._origin;
                jQuery(".widget_bp_count .center_label .type").text(curData.type);
                jQuery(".widget_bp_count .center_label .count").text(curData.count);
            });
        };
        function on_bp_total_count_ds_load(ds){
            var this_month_total = ds.data[0].data["this_month_total"] || 0;
            jQuery(".widget_bp_count #this_month_new").text(this_month_total);

            var total_bp_amount = ds.data[0].data["total"] || 0;
            jQuery(".widget_bp_count #total_bp_amount").text(total_bp_amount);
        }
            ]]></script>
        <a:dataSets>
            <a:dataSet id="bp_category_count_ds" autoQuery="true" fetchAll="true" model="bp.bp_type_count">
                <a:fields>
                    <a:field name="type"/>
                    <a:field name="count"/>
                </a:fields>
                <a:events>
                    <a:event name="load" handler="on_bp_type_count_ds_load"/>
                </a:events>
            </a:dataSet>
            <a:dataSet id="bp_total_count_ds" autoQuery="true" fetchAll="true" model="bp.bp_total_count">
                <a:fields>
                    <a:field name="total"/>
                    <a:field name="this_month_total"/>
                </a:fields>
                <a:events>
                    <a:event name="load" handler="on_bp_total_count_ds_load"/>
                </a:events>
            </a:dataSet>
        </a:dataSets>
        <div class="widget_bp_count">
            <span class="widget_label"> </span>
            <div class="row1">
                <span class="left">客户数量统计</span>
                <span class="right">
                    <span>本月新增客户:</span>
                    <span id="this_month_new"></span>
                </span>
            </div>
            <div class="row2">
                <span>客户总数:</span>
                <span id="total_bp_amount"></span>
            </div>
            <div class="row3" id="bp_type_count_chart"> </div>
        </div>
        <a:screenBody style="display:none"> </a:screenBody>
    </a:view>
</a:screen>