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

<!--
    $Author:
    $Date: 2018/8/2
    $Revision: 1.0
    4.PRJ统计
-->
<a:screen xmlns:a="http://www.leaf-framework.org/application">
    <a:init-procedure/>
    <a:view template="default" package="leaf.ui.std">
        <!--Beyond styles-->
        <link href="${/request/@context_path}/leafresource/hls/beyondChart/assets/css/beyond.min.css" rel="stylesheet" />
        <link href="${/request/@context_path}/leafresource/hls/beyondChart/assets/css/demo.min.css" rel="stylesheet" />
        <link href="${/request/@context_path}/leafresource/hls/beyondChart/assets/css/typicons.min.css" rel="stylesheet" />
        <link href="${/request/@context_path}/leafresource/hls/beyondChart/assets/css/animate.min.css" rel="stylesheet" />

        <!--Basic Scripts-->
        <script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/skins.min.js"></script>
        <script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/bootstrap.min.js"></script>
        <script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/slimscroll/jquery.slimscroll.min.js"></script>
        <!--Beyond Scripts-->
        <script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/beyond.min.js"></script>

        <!--Page Related Scripts-->
        <script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/charts/morris/raphael-2.0.2.min.js"></script>
        <script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/charts/morris/morris.js"></script>
        <script src="${/request/@context_path}/leafresource/hls/beyondChart/assets/js/charts/morris/morris-init.js"></script>

        <style>
            html,body{
            background-color:#eee;
            width:870px;
            height:280px;
            margin: 0;
            padding: 0;
            color:#758697;
            }
            .widget_cont_count{
            width:870px;
            height:280px;
            background-color:#fff;
            position:relative;
            }
            .widget_cont_count .clearFloat{
            clear:both;
            height:0;
            line-height:0;
            font-size:0
            }
            .widget_cont_count i{
            display:inline-block;
            width:12px;
            height: 12px;
            margin-right:6px;
            border-radius: 100%;
            }
            .widget_cont_count .row1{
            width:870px;
            height:70px;
            }
            .widget_cont_count .row1-l{
            width:72px;
            height:70px;
            margin:0 40px 0 20px;
            float:left;
            text-align:center;
            font-size:18px;
            color:#2b425b;
            font-family:'Open Sans','Segoe UI';
            }
            .widget_cont_count .row1-r{
            width:680px;
            height:50px;
            margin-top:20px;
            float:left;
            }
            .widget_cont_count .progress-title{
            height:18px;
            line-height:18px;
            }
            .widget_cont_count .progress{
            background-color:#FA800A;
            }
            .widget_cont_count .progress:before{
            width:0;
            }
            .widget_cont_count .progress-bar{
            background-color:#FA800A;
            width:2em;
            min-width: 2em;
            background-color: rgb(46, 195, 232);
            font-size:10px;
            height:100%;
            color:#fff;
            text-align:center;
            background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
            background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
            background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
            -webkit-background-size:40px 40px;
            background-size:40px 40px;
            transition:width .6s ease;
            animation:progress-bar-stripes 2s linear infinite;
            -o-animation:progress-bar-stripes 2s linear infinite;
            -webkit-animation:progress-bar-stripes 2s linear infinite;
            }
            .widget_cont_count .progress-bar-label{
            position:absolute;
            display: none;
            z-index:1000;
            padding:6px 10px;
            color:#fff;
            background: rgb(0,0,0);
            border-radius: 3px;
            }
            .widget_cont_count .progress-bar-label p{
            margin:0;
            }
            @-webkit-keyframes progress-bar-stripes {
            from  { background-position: 40px 0; }
            to    { background-position: 0 0; }
            }
            @keyframes progress-bar-stripes {
            from  { background-position: 40px 0; }
            to    { background-position: 0 0; }
            }
            .widget_cont_count .row2{
            width:870px;
            height:200px;
            }
            .widget_cont_count #row2Donut{
            width:270px;
            height:200px;
            margin-left:30px;
            float:left;
            }
            .widget_cont_count .row2-r{
            width:400px;
            max-height:200px;
            margin-left:30px;
            float:left;
            }
            .widget_cont_count #row2Table{
            width:400px;
            border-collapse: collapse;
            }
            .widget_cont_count #row2Table tr{
            height:25px;
            border-bottom:1px solid #ccc;
            }
            .widget_cont_count #row2Table td{
            border:none;
            }
            .widget_cont_count #row2Table tr:hover{
            background-color:#e8e8e8;
            }
        </style>
        <script><![CDATA[
        jQuery(document).on('mouseover mouseout mousemove', '.progress-bar', function (event) {
            if(window.$pop){
                $pop=window.$pop;
            }else{
                window.$pop=jQuery("<div>", {
                    "class": "progress-bar-label"
                });
                $pop=window.$pop;
                $pop.html(jQuery("<p>本月新增合同</p><p>"+jQuery(".progress-bar")[0].innerText+"</p>"));
            }
            if (event.type === 'mouseover') {
                $pop.appendTo(".widget_cont_count");
                $pop.show().css({
                    left: (event.pageX + 10) + 'px',
                    top: (event.pageY + 10) + 'px'
                });
            }
            if (event.type === 'mouseout') {
                $pop.hide();
            }
            if (event.type === 'mousemove') {
                if ($pop.is(":visible")) {
                    $pop.css({
                        left: (event.pageX + 10) + 'px',
                        top: (event.pageY + 10) + 'px'
                    })
                }
            }
            event.preventDefault();
        });

        function progressBarLoader(ds){
            var per=ds.data[0].data['cont_month_per'];
            jQuery(".progress-bar").text(per);
            jQuery(".progress-bar").css("width",per);
        }

        function statusCountLoader(ds){
            var records=ds.data;
            var donutData=[];
            var colors=[];
            $row2Table=jQuery("#row2Table");
            var statusInfo = [
                {
                    statusValue: "新建",
                    status: "NEW",
                    color:"#2EC3E8"
                },
                { statusValue: "签约",
                    status: "SIGN",
                    color:"#14A9CC"
                },
                {
                    statusValue: "起租",
                    status: "INCEPT",
                    color:"#A0D469"
                },
                {
                    statusValue: "正常结清",
                    status: "TERMINATE",
                    color:"#31B995"
                },
                {
                    statusValue: "提前结清",
                    status: "ET",
                    color:"#FFCD55"
                },
                {
                    statusValue: "回购",
                    status: "REPUR",
                    color:"#E75B8D"
                },
                {
                    statusValue: "取消",
                    status: "CANCEL",
                    color:"#FA6A4D"
                }
            ];
            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'];
                            j.overdue=i.data['cont_overdue_count'];
                        }
                    });
                });
            }
            var html="<tbody><tr style='color:#000;'><td><span></span></td><td><span>项目状态</span></td><td><span>占比</span></td><td><span>数量</span></td><td><span>逾期</span></td></tr>";
            statusInfo.forEach(function(i){
                if(i.value==undefined){
                    i.value=0;
                }
                if(i.per==undefined){
                    i.per='0.00%';
                }
                if(i.overdue==undefined){
                    i.overdue=0;
                }
                donutData.push({
                    label:i.statusValue,
                    value:i.value
                });
                colors.push(i.color);

                html+="<tr><td><i style='background-color:"+i.color+";'></i></td>";
                html+="<td>"+i.statusValue+"</td>";
                html+="<td>"+i.per+"</td>";
                html+="<td>"+i.value+"</td>";
                html+="<td>"+i.overdue+"</td></tr>";
            });
            $row2Table.html("</tbody>"+html);
            Morris.Donut({
              element: 'row2Donut',
              data:donutData,
              colors:colors
            });
        }
            ]]></script>
        <a:dataSets>
            <a:dataSet id="cont_status_count_ds" autoQuery="true" model="cont.CON1003.cont_status_count">
                <a:fields>
                    <a:field name="cont_status"/>
                    <a:field name="cont_status_count"/>
                    <a:field name="cont_status_per"/>
                    <a:field name="cont_overdue_count"/>
                </a:fields>
                <a:events>
                    <a:event name="load" handler="statusCountLoader"/>
                </a:events>
            </a:dataSet>
            <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_month_per"/>
                </a:fields>
                <a:events>
                    <a:event name="load" handler="progressBarLoader"/>
                </a:events>
            </a:dataSet>
        </a:dataSets>
        <div class="widget_cont_count">
            <div class="row1">
                <div class="row1-l">
                    <a:label className="cont_count_num" bindTarget="cont_count_ds" name="cont_count" style="width:70px;margin:10px 0;font-size:22px;color:#000;"/>
                    <div>合同总数</div>
                </div>
                <div class="row1-r">
                    <div class="progress-title">
                        <i style="background-color:#2EC3E8;"> </i><span style="font-size:13px">本月新增合同</span>
                    </div>
                    <div class="progress">
                        <div data-description="本月新增项目" class="progress-bar">0%</div>
                    </div>
                </div>
                <div class="clearFloat"> </div>
            </div>
            <div class="row2">
                <div class="row2-l" id="row2Donut"></div>
                <div class="row2-r">
                    <table id="row2Table" cellspacing="0"></table>
                </div>
                <div class="clearFloat"></div>
            </div>
        </div>
        <a:screenBody style="display:none"> </a:screenBody>
    </a:view>
</a:screen>