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

<!--
    微件-项目资金流动情况
   
-->
<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>-->
        <style>
            html,body{
            width:240px;
            height:552px;
            margin: 0;
            padding: 0;
            color:#000;
            }
            .widget_prj_funds_flow{
            box-sizing:border-box;
            width:240px;
            height:552px;
            background-color:#fff;
            position:relative;
            border:1px solid #F0F0F3;
            cursor:default;
            }
            .widget_prj_funds_flow .widget_label{
            position:absolute;
            width:40px;
            height:4px;
            top:0;
            left:16px;
            background-color: #FFD95B;
            }
            .widget_prj_funds_flow .icon{
            height:16px;
            margin-right:8px;
                position: relative;
                top: 4px;
            }
            .widget_prj_funds_flow .row1{
            /*width:100%;*/

            padding:15px 0 14px 16px;
            /*border-bottom:1px solid #F0F0F3;*/
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: rgba(75,80,90,0.85);
            }
            .widget_prj_funds_flow .row2{
            box-sizing:border-box;
            width:90%;
                margin-left: 5%;
            /*height:133px;*/
            /*padding:0 32px 0 32px;*/
            border-bottom:1px solid #F0F0F3;
            }
            .widget_prj_funds_flow .row2 .title{
            position:relative;
            margin:8px 0 16px 0;
            height:17px;
            line-height:17px;
            font-family: PingFangSC-Medium;
            font-size: 12px;
            color: #535D7F;
            }
            .widget_prj_funds_flow .row2 .title .icon{
            position:relative;
            top:4px;
            }
            .widget_prj_funds_flow .list{
            /*height:20px;*/
            margin-bottom:8px;
            }
            .widget_prj_funds_flow .list div{
                /*height:20px;*/
                /*margin-bottom:8px;*/
                width: 8px;
                height: 8px;
                border-radius: 50%;

                display: inline-block;
                margin-right: 10px;
            }
            .widget_prj_funds_flow .list:first-child{
                /*height:20px;*/
                /*margin-bottom:8px;*/
                margin-top: 26px;
            }
            .widget_prj_funds_flow .list:last-child{
                /*height:20px;*/
                /*margin-bottom:8px;*/
                margin-bottom: 22px;
            }
            .widget_prj_funds_flow .list .left{
            display:inline-block;
            width:68px;

            border-right:1px solid #ccc;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: rgba(0,0,0,0.65);
            }
            .widget_prj_funds_flow .list .right{
            display:inline-block;

            margin-left:30px;
            line-height:20px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: rgba(0,0,0,0.65);
            }
            .widget_prj_funds_flow .row3{
            box-sizing:border-box;
            width:90%;
                margin-left: 5%;
            /*height:112px;*/
            /*padding:0px 32px 0 32px;*/
            /*border-bottom:1px solid #F0F0F3;*/
            }
            .widget_prj_funds_flow .row3 #leaf_overdue_per{
            /*background: rgba(255,217,91,0.20);*/
            border-radius: 2px;
            /*padding: 0 10px;*/
            font-family: PingFangSC-Regular;
            font-size: 12px;
            /*color: #CC8134;*/
            }
            .widget_prj_funds_flow .row4{
            box-sizing:border-box;
            width:100%;
            height:156px;
            padding:0 0 0 32px;
            }
            .widget_prj_funds_flow .row4 .left{
            box-sizing:border-box;
            height:100%;
            float:left;
            padding-top:32px;
            }
            .widget_prj_funds_flow .row4 .left p{
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: rgba(0,0,0,0.65);
            line-height: 20px;
            margin:0;
            }
            .widget_prj_funds_flow .row4 .left p:nth-child(2){
            margin-bottom:8px;
            }
            .widget_prj_funds_flow .row4 .right{
            box-sizing:border-box;
            height:100%;
            float:left;
            width:164px;
            height:156px;
            text-align:center;
            }
            .widget_prj_funds_flow .row4 .clearFloat{
            clear:both;
            height:0;
            line-height:0;
            font-size:0
            }
            .widget_prj_funds_flow .row5{

            }
            .widget_prj_funds_flow .row5 .row5-child{
                display: inline-block;
                text-align: center;
                width: 98px;
                height: 23px;
                line-height: 23px;
                border: solid 1px #eeeeee;
                cursor: pointer;
            }
            .widget_prj_funds_flow .row5 .row5-child:first-child{
                margin-left: 12px;
                border-right: 0px;
            }
            /*.widget_prj_funds_flow .row5 .row5-child:last-child{*/
                /*!*margin-left: 12px;*!*/
                /*border-left: 0px;*/
            /*}*/
            .widget_prj_funds_flow .row6 .row5-pie-desc{
                width: 90%;
                margin-left: 5%;
                padding-bottom: 14px;
            }
            .widget_prj_funds_flow .row6 .row5-pie-desc:last-child{
                border-bottom: 1px solid #ccc;
                padding-bottom: 19px;
            }
            .widget_prj_funds_flow .row6 .row5-pie-desc p{
                display: inline-block;
                padding: 0px;
                margin: 0px;
            }
            .widget_prj_funds_flow .row6 .row5-pie-desc div:first-child{
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: #85a8e0;
                display: inline-block;
                margin-right: 10px;
            }
        </style>
        <script><![CDATA[

        function leaf_cont_cf_cny_loader(ds){
            var record=ds.data[0],
                leaf_contract_count=record.data["contract_count"],
                leaf_contract_amount=record.data["contract_amount"],
                leaf_overdue_amount=record.data["overdue_amount"],
                leaf_pay_amount=record.data["pay_amount"],
                leaf_rec_amount=record.data["rec_amount"];
            leaf_overdue_amount=1000;
            var leaf_overdue_per = leaf_contract_amount == 0 ? '0.00%' : Math.round(leaf_overdue_amount/leaf_contract_amount*10000)/100+'%';
            var leaf_pay_per = leaf_pay_amount == 0 ? '0.00%' : Math.round(leaf_pay_amount/(leaf_pay_amount+leaf_rec_amount)*10000)/100+'%';
            jQuery(".widget_prj_funds_flow #leaf_contract_count").text(leaf_contract_count);
            jQuery(".widget_prj_funds_flow #leaf_contract_amount").text(leaf_contract_amount);
            jQuery(".widget_prj_funds_flow #leaf_overdue_amount").text(leaf_overdue_amount);
            jQuery(".widget_prj_funds_flow #leaf_overdue_per").text(leaf_overdue_per);
            jQuery(".widget_prj_funds_flow #leaf_pay_amount").text("¥"+leaf_pay_amount);
            jQuery(".widget_prj_funds_flow #leaf_rec_amount").text("¥"+leaf_rec_amount);
            // 关闭 G2 的体验改进计划打点请求
            G2.track(false);
            var chart = new G2.Chart({
              container: 'leaf_pay_rec_cny_pic',
              width:164,
              height:156,
              animate: false,
              padding:10
            });
            chart.source([{
                item:'投放金额',
                amount:leaf_pay_amount
            },{
                item:'回笼金额',
                amount:leaf_rec_amount
            }]);
            chart.coord('theta', {
              radius: 0.75,
              innerRadius: 0.72
            });
            chart.tooltip({
              showTitle: false,
              itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
            });
            chart.guide().html({
              position: ['50%', '50%'],
              html: '<div style="font-family: Baskerville;font-size: 14px;color: rgba(75,80,90,0.85);text-align:center;width: 10em;">' + leaf_pay_per + '</div>',
              alignX: 'middle',
              alignY: 'middle'
            });
              chart.legend(false);
            var interval = chart.intervalStack()
            .position('amount')
            .color('item',['#85a8e0','#f8cc64'])
            .tooltip('item*amount', function(item, amount) {
              return {
                name: item,
                value: amount
              };
            }).style({
              lineWidth: 1,
              stroke: '#fff'
            });
            chart.render();
        }
        function leaf_cont_cf_usd_loader(ds){

            var record=ds.data[0],
                leaf_contract_count=record.data["contract_count"],
                leaf_contract_amount=record.data["contract_amount"],
                leaf_overdue_amount=record.data["overdue_amount"],
                leaf_pay_amount=record.data["pay_amount"],
                leaf_rec_amount=record.data["rec_amount"];
            overdue_amount=1000;
            var overdue_per = leaf_contract_amount == 0 ? '0.00%' : Math.round(leaf_overdue_amount/leaf_contract_amount*10000)/100+'%';
            var rec_pay_per = leaf_pay_amount == 0 ? '0.00%' : Math.round(leaf_rec_amount/leaf_pay_amount*10000)/100+'%';
            jQuery(".widget_prj_funds_flow #leaf_usd_contract_count").text(leaf_contract_count);
            jQuery(".widget_prj_funds_flow #leaf_usd_contract_amount").text(leaf_contract_amount);
            jQuery(".widget_prj_funds_flow #leaf_usd_overdue_amount").text(leaf_overdue_amount);
            jQuery(".widget_prj_funds_flow #leaf_usd_overdue_per").text(overdue_per);
            jQuery(".widget_prj_funds_flow #leaf_usd_pay_amount").text("$"+leaf_pay_amount);
            jQuery(".widget_prj_funds_flow #leaf_usd_rec_amount").text("$"+leaf_rec_amount);
            // 关闭 G2 的体验改进计划打点请求
            G2.track(false);
            var chart = new G2.Chart({
                container: 'leaf_pay_rec_usd_pic',
                width:164,
                height:156,
                animate: false,
                padding:10
            });
            chart.source([{
                item:'投放金额',
                amount:leaf_pay_amount
            },{
                item:'回笼金额',
                amount:leaf_rec_amount
            }]);
            chart.coord('theta', {
                radius: 0.75,
                innerRadius: 0.72
            });
            chart.tooltip({
                showTitle: false,
                itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
            });
            chart.guide().html({
                position: ['50%', '50%'],
                html: '<div style="font-family: Baskerville;font-size: 14px;color: rgba(75,80,90,0.85);text-align:center;width: 10em;">' + rec_pay_per + '</div>',
                alignX: 'middle',
                alignY: 'middle'
            });
            chart.legend(false);
            var interval = chart.intervalStack()
                .position('amount')
                .color('item',['#85a8e0','#F0F2F5'])
                .tooltip('item*amount', function(item, amount) {
                    return {
                        name: item,
                        value: amount
                    };
                }).style({
                    lineWidth: 1,
                    stroke: '#fff'
                });
            chart.render();
        }
        function leaf_cny(){
            document.getElementById('leaf-show-cny').style.display='block'
            document.getElementById('leaf-show-usd').style.display='none'
            document.getElementById("leaf_cny_img").src='${/request/@context_path}/leafresource/images/widget/choose-cny@2x.png'
            document.getElementById("leaf_usd_img").src='${/request/@context_path}/leafresource/images/widget/usd@2x.png'
            jQuery(".leaf-cny").css("color","#657efe")
            jQuery(".leaf-usd").css("color","#999999")
        };
        function leaf_usd(){

            document.getElementById('leaf-show-cny').style.display='none'
            document.getElementById('leaf-show-usd').style.display='block'
            document.getElementById("leaf_cny_img").src='${/request/@context_path}/leafresource/images/widget/cny@2x.png'
            document.getElementById("leaf_usd_img").src='${/request/@context_path}/leafresource/images/widget/choose-usd@2x.png'
            jQuery(".leaf-cny").css("color","#999999")
            jQuery(".leaf-usd").css("color","#657efe")
        };
            ]]></script>
        <a:dataSets>
            <a:dataSet id="leaf_funds_flow_ds" autoQuery="true" pageSize="5" model="cont.CON1003.cont_cf_cny" >
                <a:fields>
                    <a:field name="contract_count"/>
                    <a:field name="contract_amount"/>
                    <a:field name="overdue_amount"/>
                    <a:field name="pay_amount"/>
                    <a:field name="rec_amount"/>
                </a:fields>
                <a:events>
                    <a:event name="load" handler="leaf_cont_cf_cny_loader"/>
                </a:events>
            </a:dataSet>
            <a:dataSet id="leaf_funds_cf_usd_ds" autoQuery="true" pageSize="5" model="cont.CON1003.cont_cf_usd" >
                <a:fields>
                    <a:field name="contract_count"/>
                    <a:field name="contract_amount"/>
                    <a:field name="overdue_amount"/>
                    <a:field name="pay_amount"/>
                    <a:field name="rec_amount"/>
                </a:fields>
                <a:events>
                    <a:event name="load" handler="leaf_cont_cf_usd_loader"/>
                </a:events>
            </a:dataSet>
        </a:dataSets>
        <div class="widget_prj_funds_flow">
            <!--<span class="widget_label"> </span>-->
            <div class="row1">项目资金流动情况</div>
            <div class="row5">
                <div class="row5-child" onclick="leaf_cny()">
                    <img id="leaf_cny_img" src="${/request/@context_path}/leafresource/images/widget/choose-cny@2x.png" class="icon"/>
                    <span style="color: #657efe" class="leaf-cny">人民币(¥)</span>
                </div>
                <div style="display: inline-block;position: relative;width: 2px;height: 14px;background: #333333;top: 4px;"></div>
                <div class="row5-child" onclick="leaf_usd()" style="border-left: 0px">
                    <img id="leaf_usd_img" src="${/request/@context_path}/leafresource/images/widget/usd@2x.png" class="icon"/>
                    <span style="color: #999999" class="leaf-usd">美元($)</span>
                </div>
            </div>
            <div id="leaf-show-cny">
            <div class="row6">
                <div class="right" id="leaf_pay_rec_cny_pic">

                </div>
                <div class="row5-pie-desc">
                    <div></div>
                    <p style="margin-right: 30px;">投放金额</p>
                    <p id="leaf_pay_amount"></p>
                </div>
                <div class="row5-pie-desc">
                    <div style="background: #f8cc64"></div>
                    <p style="margin-right: 30px;">回笼金额</p>
                    <p id="leaf_rec_amount"></p>
                </div>
            </div>
            <div class="row2">
                <div class="list">
                    <div style="background: #7d7d7d"></div>
                    <span class="left">项目总数</span>
                    <span class="right" id="leaf_contract_count"> </span>
                </div>
                <div class="list">
                    <div></div>
                    <span class="left">双名单</span>
                    <span class="right" > </span>
                </div>
                <div class="list">
                    <div></div>
                    <span class="left">转化率</span>
                    <span class="right" > </span>
                </div>
            </div>
            <div class="row3">
                <div class="list">
                    <div style="background: #7d7d7d"></div>
                    <span class="left">未收金额</span>
                    <span class="right" id="leaf_contract_amount"> </span>
                </div>
                <div class="list">
                    <div></div>
                    <span class="left">逾期金额</span>
                    <span class="right" id="leaf_overdue_amount"> </span>
                </div>
                <div class="list">
                    <div></div>
                    <span class="left">逾期比例</span>
                    <span class="right" id="leaf_overdue_per"> </span>
                </div>
            </div>
            </div>
            <div id="leaf-show-usd" style="display: none">
                <div class="row6">
                    <div class="right" id="leaf_pay_rec_usd_pic">

                    </div>
                    <div class="row5-pie-desc">
                        <div></div>
                        <p style="margin-right: 30px;">投放金额</p>
                        <p id="leaf_usd_pay_amount"></p>
                    </div>
                    <div class="row5-pie-desc">
                        <div style="background: #f8cc64"></div>
                        <p style="margin-right: 30px;">回笼金额</p>
                        <p id="leaf_usd_rec_amount"></p>
                    </div>
                </div>
                <div class="row2">
                    <div class="list">
                        <div style="background: #7d7d7d"></div>
                        <span class="left">项目总数</span>
                        <span class="right" id="leaf_usd_contract_count"> </span>
                    </div>
                    <div class="list">
                        <div></div>
                        <span class="left">双名单</span>
                        <span class="right" > </span>
                    </div>
                    <div class="list">
                        <div></div>
                        <span class="left">转化率</span>
                        <span class="right" > </span>
                    </div>
                </div>
                <div class="row3">
                    <div class="list">
                        <div style="background: #7d7d7d"></div>
                        <span class="left">未收金额</span>
                        <span class="right" id="leaf_usd_contract_amount"> </span>
                    </div>
                    <div class="list">
                        <div></div>
                        <span class="left">逾期金额</span>
                        <span class="right" id="leaf_usd_overdue_amount"> </span>
                    </div>
                    <div class="list">
                        <div></div>
                        <span class="left">逾期比例</span>
                        <span class="right" id="leaf_usd_overdue_per"> </span>
                    </div>
                </div>
            </div>
        </div>
        <a:screenBody style="display:none"> </a:screenBody>
    </a:view>
</a:screen>