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

<!--
    $Author:
    $Date: 2018/8/2
    $Revision: 1.0
    微件-资产统计-租赁性质
-->
<a:screen xmlns:a="http://www.leaf-framework.org/application">
    <a:init-procedure/>
    <a:view template="default" package="leaf.ui.std">
        <!--<meta name="_csrf" content="${/session/@_csrf.token}"/>-->
        <!--<meta name="_csrf_header" content="X-CSRF-TOKEN" />-->
        <!--单独微件测试用-->
        <!--<script src="${/request/@context_path}/leafresource/js/attach/g2.min.js"></script>-->
        <!--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>
        <!--Beyond Scripts-->

        <!--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 {
            width: 673px;
            height: 553px;
            margin: 0;
            padding: 0;
            background-color: #fff;
            }

            .widget_leaf_asset_count {
            box-sizing: border-box;
            width: 673px;
            height: 553px;
            padding: 0;
            background-color: #fff;
            position: relative;
            cursor: default;
            /*margin-left:35px;*/
            /*margin-top:24px;*/
            }

            .widget_leaf_asset_count .asset_count_head{
            /*width:100%;*/
            height:38px;
                padding: 40px 0 0 46px;
            }

            .widget_leaf_asset_count .asset_count_head .asset_count_img{
            width:20px;
            height:22px;
            float:left;
            }

            .widget_leaf_asset_count .widget_label {
            position: absolute;
            width: 40px;
            height: 4px;
            top: 66px;
            left: 84px;
            background-color: #5A7FFF;
            }

            .widget_leaf_asset_count .title_font {
            float:left;
            margin-left:18px;
            margin-top:1px;
            font-family: NotoSansHans-Bold;
            font-size: 17px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 2px;
            color: #333333;
            }

            <!-- 进度条css -->
            .widget_leaf_asset_count .asset_count_progress_bar{
            float:right;
            width: 135px;
            height: 46px;
                margin-right: 52px;
            }
            .widget_leaf_asset_count .asset_count_progress_bar .progress-description{
            text-align:right;
            margin-top:6px;
            margin-right:2px;
            }
            .widget_leaf_asset_count .asset_count_progress_bar .description_font{
            font-family: NotoSansHans-Bold;
            font-size: 14px;
            font-weight: normal;
            font-style: italic;
            font-stretch: normal;
            letter-spacing: 1px;
            color: #333333;
            text-align:right;
            margin-right:0px;
            }

            .widget_leaf_asset_count .progress-title{
            font-family: NotoSansHans-Thin;
            font-size: 12px;
            font-weight: normal;
            font-style: italic;
            font-stretch: normal;
            letter-spacing: 1px;
            color: #333333;
            margin-top:5px;
            }

            .widget_leaf_asset_count .progress{
            width: 134px;
            height: 8px;
            background-color: #eeeeee;
            border-radius: 4px;
            margin-top:5px;
            }
            .widget_leaf_asset_count .progress:before{
            width:0;
            }
            .widget_leaf_asset_count .progress-bar{
            width: 19px;
            height: 8px;
            background-color: #535353;
            border-radius: 4px;
            font-size:10px;
            height:100%;
            color:#535353;
            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_leaf_asset_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_leaf_asset_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_leaf_asset_count .row2{
            width:100%;
            height:318px;
            }
            .widget_leaf_asset_count #row2Donut{
            width:189px;
            height:187px;
            float:left;
            }
            .widget_leaf_asset_count #widget-leaf-asset-row2Donut{
            width:189px;
            height:187px;
            margin-left:189px;
            float:left;
            }
            .widget_leaf_asset_count .row2-r{
            width:100%;
            max-height:190px;
            margin-left:30px;
            margin-top:51px;
            float:left;
            }
            .widget_leaf_asset_count #row2Table{
            width:554px;
            border-collapse: collapse;
            }
            .widget_leaf_asset_count #widget-leaf-asset-row2Table{
            width:554px;
            border-collapse: collapse;
            }
            .widget_leaf_asset_count #widget-leaf-asset-row2Table tr{
            height:35px;
            border-bottom:2px solid rgba(153,153,153,0.1);
            font-family: NotoSansHans-Light;
            font-size: 12px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 1px;
            color: #666666;
            }
            .widget_leaf_asset_count #widget-leaf-asset-row2Table tr:first-child{
            height:35px;
            border-bottom: 6px solid rgba(153,153,153,.1);
            font-family: NotoSansHans-Regular;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 1px;
            color: #333333 !important;
            }
            .widget_leaf_asset_count #widget-leaf-asset-row2Table tr:last-child{
            height:35px;
            border: none;
            }
            .widget_leaf_asset_count #widget-leaf-asset-row2Table td{
            border:none;
            text-align:center;
            }
            .widget_leaf_asset_count #widget-leaf-asset-row2Table tr:hover{
                background-color: #eeeeee;
                opacity: 0.32;
            }
            .widget_leaf_asset_count #row2Table tr{
            height:25px;
            border-bottom:1px solid #ccc;
            }
            .widget_leaf_asset_count #row2Table tr:first-child{
            height:25px;
            border-bottom: 4px solid rgba(153,153,153,.1);
            }
            .widget_leaf_asset_count #row2Table tr:last-child{
            height:25px;
            border: none;
            }
            .widget_leaf_asset_count #row2Table td{
            border:none;
            }
            .widget_leaf_asset_count #row2Table tr:hover{
            background-color:#e8e8e8;
            }
            .widget_leaf_asset_count i{
            display:inline-block;
            width: 10px;
            height: 10px;
            margin-right:6px;
            border-radius: 100%;
            }
        </style>
        <script><![CDATA[
        //数据初始化
        jQuery(document).ready(function () {
            //金额千分位展示
            jQuery(".description_font").html(String(jQuery(".description_font").html().split('.')[0]).replace(/(\d)(?=(\d{3})+$)/g, "$1,")+'.'+jQuery(".description_font").html().split('.')[1]);

            conStatusCountLoader();
        });

        //初始化合同数据
        function conStatusCountLoader(){
            //var records=ds.data;
            console.log(records);
            var donutData=[];
            var colors=[];
            $row2Table=jQuery("#widget-leaf-asset-row2Table");
            var records = [
                {
                    leaseType: "融资租赁",
                    percent: "99.90%",
                    currencyType:"人民币",
                    restAsset:"1983977357.64"
                },
                {
                    leaseType: "经营租赁",
                    percent: "0.10%",
                    currencyType:"人民币",
                    restAsset:"1982115.11"
                }
                ];
            var assetInfo = [
                {
                    leaseType: "融资租赁",
                    color:"#2ec3e8",
                    currencyType:"人民币",
                },
                {
                    leaseType: "经营租赁",
                    color:"yellow",
                    currencyType:"人民币",
                }
            ];
            if(records!==null && records.length>0){
                records.forEach(function(record){
                    assetInfo.forEach(function(assetInfo){
                        if(record.leaseType==assetInfo.leaseType){
                            assetInfo.value=record.restAsset;
                            assetInfo.per=record.percent;
                        }
                    });
                });
            }
            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>";
            assetInfo.forEach(function(i){
                if(i.value==undefined){
                    i.value=0;
                }
                if(i.per==undefined){
                    i.per='0.00%';
                }
                donutData.push({
                    label:i.leaseType,
                    value:i.value,
                    color:i.color
                });
                colors.push(i.color);

                html+="<tr><td><i style='background-color:"+i.color+";'></i></td>";
                html+="<td>"+i.leaseType+"</td>";
                html+="<td>"+i.per+"</td>";
                html+="<td>"+i.currencyType+"</td>";
                html+="<td>"+String(i.value.split('.')[0]).replace(/(\d)(?=(\d{3})+$)/g, "$1,")+"."+i.value.split('.')[1]+"</td></tr>";
            });
            $row2Table.html("</tbody>"+html);
            Morris.Donut({
                element: 'widget-leaf-asset-row2Donut',
                data:donutData,
                colors:colors
            });
        }
        ]]></script>
        <div class="widget_leaf_asset_count">
            <div class="asset_count_head">
                <img class="asset_count_img" src="${/request/@context_path}/leafresource/images/widget/task-list.png"></img>
                <div class="title_font">资产统计</div>
                <span class="widget_label"> </span>
            </div>
            <div class="asset_count_progress_bar">
                <div class="progress-description">
                    <span class="description_font">1985959472.75</span>
                </div>
                <div class="progress">
                <div data-description="本月新增项目" class="progress-bar" width="300px;"></div>
                </div>
                <div class="progress-title">
                    <span style="float:right;margin-right:3px;">资产余额</span>
                </div>
            </div>

            <div class="row2" style="margin-top: 76px;">
                <div class="row2-l" id="widget-leaf-asset-row2Donut"></div>
                <div class="row2-r">
                    <table id="widget-leaf-asset-row2Table" cellspacing="0"></table>
                </div>
                <div class="clearFloat"></div>
            </div>
        </div>
        <a:screenBody style="display:none"></a:screenBody>
    </a:view>
</a:screen>