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

<!--
    $Author:
    $Date: 2018/8/2
    $Revision: 1.0
    4.CONT统计
-->
<a:screen xmlns:a="http://www.leaf-framework.org/application">
    <a:init-procedure/>
    <a:view template="default" package="leaf.ui.std">
        <style>
            html,body{
            width:264px;
            height:456px;
            margin: 0;
            padding: 0;
            color:#000;
            }
            .widget_cont_count{
            width:264px;
            height:456px;
            background-color:#fff;
            position:relative;
            border:1px solid #F0F0F3;
            cursor:default;
            }
            .widget_cont_count .clearFloat{
            clear:both;
            height:0;
            line-height:0;
            font-size:0
            }
            .widget_cont_count .header{
            position:relative;
            width:100%;
            height:47px;
            border-bottom:1px solid #F0F0F3;
            }
            .widget_cont_count .header .widget_label{
            position:absolute;
            width:40px;
            height:4px;
            top:0;
            left:16px;
            background-color:#5A7FFF;
            }
            .widget_cont_count .header .title{
            position:absolute;
            top:16px;
            left:16px;
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: rgba(93,97,103,0.85);
            line-height: 22px;
            }
            .widget_cont_count .body{
            width:100%;
            height:406px;
            text-align:center;
            }
            .widget_cont_count .body .row1{
            margin-top:16px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: rgba(75,80,90,0.75);
            letter-spacing: 0;
            }
            .widget_cont_count .body .row1 #contMonthCount{
            font-family: Baskerville-SemiBoldItalic;
            font-size: 12px;
            color: #4866CC;
            letter-spacing: 0;
            text-align: left;
            font-style:italic;
            }
            .widget_cont_count .body #contPie{
            width:100%;
            height:150px;
            margin:10px auto 0 auto;
            text-align:center;
            }
            .widget_cont_count .body .row3{
            margin-top:20px;
            }
            .widget_cont_count .body .row3 .contInfoRow{
            margin-bottom:9px;
            }
            .widget_cont_count .body .row3 .contInfoRow i{
            line-height: 16px;
            position:relative;
            top:-2px;
            }
            .widget_cont_count .body .row3 .contInfoRow .item{
            display:inline-block;
            width:78px;
            text-align:left;
            font-family: PingFangSC-Regular;
            font-size: 13px;
            color: rgba(0,0,0,0.65);
            line-height: 16px;
            margin:0 16px 0 7px;
            }
            .widget_cont_count .body .row3 .contInfoRow .item+span{
            color:#D9D9D9;
            }
            .widget_cont_count .body .row3 .contInfoRow .per{
            display:inline-block;
            width:35px;
            text-align:right;
            font-family: HelveticaNeue;
            font-size: 12px;
            color: rgba(0,0,0,0.45);
            line-height: 16px;
            margin:0 9px 0 0px;
            }
            .widget_cont_count .body .row3 .contInfoRow .count{
            font-family: HelveticaNeue;
            font-size: 12px;
            color: rgba(0,0,0,0.65);
            line-height: 16px;
            }
            .widget_cont_count i{
            display:inline-block;
            width:6px;
            height: 6px;
            margin-right:3px;
            border-radius: 100%;
            }
        </style>
        <script><![CDATA[
        function contCountLoader(ds){
            var records=ds.data;
            var chartData=[];
            var colors=[];
            var cont_count=ds.data[0].data['cont_count'];
            var cont_month_count=ds.data[0].data['cont_month_count'];
            jQuery("#contMonthCount").text(cont_month_count);
            var statusInfo = [
                {
                    statusValue: "新建",
                    status: "NEW",
                    color:"#7386FF"
                },
                { statusValue: "签约",
                    status: "SIGN",
                    color:"#5A7FFF"
                },
                {
                    statusValue: "起租",
                    status: "INCEPT",
                    color:"#A5BAFF"
                },
                {
                    statusValue: "正常结清",
                    status: "TERMINATE",
                    color:"#4866CC"
                },
                {
                    statusValue: "提前结清",
                    status: "ET",
                    color:"#FFDA9A"
                },
                {
                    statusValue: "回购",
                    status: "REPUR",
                    color:"#535D7F"
                },
                {
                    statusValue: "取消",
                    status: "CANCEL",
                    color:"#FF8665"
                }
            ];
            if(records!==null && records.length>0){
                records.forEach(function(i){
                    statusInfo.forEach(function(j){
                        if(i.data['cont_status']==j.status){
                            j.value=i.data['cont_status_count'];
                            j.per=i.data['cont_status_per'];
                        }
                    });
                });
            }
            var html='';
            statusInfo.forEach(function(i){
                if(i.value==undefined){
                    i.value=0;
                }
                if(i.per==undefined){
                    i.per='0%';
                }
                chartData.push({
                    item:i.statusValue,
                    count:i.value,
                });
                colors.push(i.color);
                html+='<li class="contInfoRow"><i style="background-color:'+i.color+'"></i>';
                html+='<span class="item">'+i.statusValue+'合同</span>';
                html+='<span>|</span><span class="per">'+i.per+'</span>';
                html+='<span class="count">'+i.value+'</span></li>';
            });
            jQuery("#contTable").html(html);
            // 关闭 G2 的体验改进计划打点请求
            G2.track(false);
            var chart = new G2.Chart({
                container: 'contPie',
                animate: false,
                forceFit: true,
                width:264,
                height:160,
                padding:10
            });
            chart.source(chartData);
            chart.coord('theta', {
                innerRadius: 0.75
            });
            chart.tooltip({
                showTitle: false,
                itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
            });
            chart.legend(false);
            <!--// 辅助文本-->
            chart.guide().html({
                position: ['50%', '50%'],
                html: '<div style="color:#262626;font-size: 11.73px;text-align: center;width: 10em;line-height:14px;margin-bottom:5px;">合同总数<br><span style="color:rgba(0,0,0,0.85);font-size:17px;font-family:font-family: HelveticaNeue;line-height:20px;display:inline-block;margin-top:5px;">'+records[0].data['cont_count']+'</span></div>',
                alignX: 'middle',
                alignY: 'middle'
            });
            var interval=chart.intervalStack()
              .position('count')
              .color('item',colors)
              .style({
              lineWidth: 2,
              stroke: '#fff'
            });
            chart.render();
        }
            ]]></script>
        <a:dataSets>
            <a:dataSet id="cont_count_ds" autoQuery="true" model="cont.CON1003.cont_count">
                <a:fields>
                    <a:field name="cont_count"/>
                    <a:field name="cont_month_count"/>
                    <a:field name="cont_status"/>
                    <a:field name="cont_status_count"/>
                    <a:field name="cont_status_per"/>
                </a:fields>
                <a:events>
                    <a:event name="load" handler="contCountLoader"/>
                </a:events>
            </a:dataSet>
        </a:dataSets>
        <div class="widget_cont_count">
            <div class="header">
                <span class="widget_label"> </span>
                <span class="title">合同类别占比</span>
            </div>
            <div class="body">
                <div class="row1">
                    <span>本月新增合同:</span>
                    <span id="contMonthCount"> </span>
                </div>
                <div class="row2" id="contPie"> </div>
                <ul class="row3" id="contTable">
                </ul>
            </div>
        </div>
        <a:screenBody style="display:none"> </a:screenBody>
    </a:view>
</a:screen>