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

<!--
    微件-项目资金流动情况-美元
    widget_cont_cf_usd
-->
<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:264px;
            height:456px;
            margin: 0;
            padding: 0;
            color:#000;
            }
            .widget_cont_cf_usd{
            box-sizing:border-box;
            width:264px;
            height:456px;
            background-color:#fff;
            position:relative;
            border:1px solid #F0F0F3;
            cursor:default;
            }
            .widget_cont_cf_usd .widget_label{
            position:absolute;
            width:40px;
            height:4px;
            top:0;
            left:16px;
            background-color:#5A7FFF;
            }
            .widget_cont_cf_usd .icon{
            height:16px;
            margin-right:8px;
            }
            .widget_cont_cf_usd .row1{
            width:100%;
            height:20px;
            line-height:20px;
            padding:16px 0 8px 16px;
            border-bottom:1px solid #F0F0F3;
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: rgba(75,80,90,0.85);
            }
            .widget_cont_cf_usd .row2{
            box-sizing:border-box;
            width:100%;
            height:133px;
            padding:0 32px 0 32px;
            border-bottom:1px solid #F0F0F3;
            }
            .widget_cont_cf_usd .row2 .title{
            position:relative;
            margin:8px 0 16px 0;
            height:17px;
            line-height:17px;
            font-family: PingFangSC-Medium;
            font-size: 12px;
            color: #535D7F;
            }
            .widget_cont_cf_usd .row2 .title .icon{
            position:relative;
            top:4px;
            }
            .widget_cont_cf_usd .list{
            height:20px;
            margin-bottom:8px;
            }
            .widget_cont_cf_usd .list .left{
            display:inline-block;
            width:68px;
            height:20px;
            line-height:20px;
            border-right:1px solid #F0F0F3;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: rgba(0,0,0,0.65);
            }
            .widget_cont_cf_usd .list .right{
            display:inline-block;
            height:20px;
            margin-left:30px;
            line-height:20px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: rgba(0,0,0,0.65);
            }
            .widget_cont_cf_usd .row3{
            box-sizing:border-box;
            width:100%;
            height:112px;
            padding:16px 32px 0 32px;
            border-bottom:1px solid #F0F0F3;
            }
            .widget_cont_cf_usd .row3 #overdue_per{
            background: rgba(90,127,255,0.20);
            border-radius: 2px;
            padding: 0 10px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color:#5A7FFF;
            }
            .widget_cont_cf_usd .row4{
            box-sizing:border-box;
            width:100%;
            height:156px;
            padding:0 0 0 32px;
            }
            .widget_cont_cf_usd .row4 .left{
            box-sizing:border-box;
            height:100%;
            float:left;
            padding-top:32px;
            }
            .widget_cont_cf_usd .row4 .left p{
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: rgba(0,0,0,0.65);
            line-height: 20px;
            margin:0;
            }
            .widget_cont_cf_usd .row4 .left p:nth-child(2){
            margin-bottom:8px;
            }
            .widget_cont_cf_usd .row4 .right{
            box-sizing:border-box;
            height:100%;
            float:left;
            width:164px;
            height:156px;
            text-align:center;
            }
            .widget_cont_cf_usd .row4 .clearFloat{
            clear:both;
            height:0;
            line-height:0;
            font-size:0
            }
        </style>
        <script><![CDATA[
        function cont_cf_usd_loader(ds){
            var record=ds.data[0],
                contract_count=record.data["contract_count"],
                contract_amount=record.data["contract_amount"],
                overdue_amount=record.data["overdue_amount"],
                pay_amount=record.data["pay_amount"],
                rec_amount=record.data["rec_amount"];
            overdue_amount=1000;
            var overdue_per = contract_amount == 0 ? '0.00%' : Math.round(overdue_amount/contract_amount*10000)/100+'%';
            var rec_pay_per = pay_amount == 0 ? '0.00%' : Math.round(rec_amount/pay_amount*10000)/100+'%';
            jQuery(".widget_cont_cf_usd #contract_count").text(contract_count);
            jQuery(".widget_cont_cf_usd #contract_amount").text(contract_amount);
            jQuery(".widget_cont_cf_usd #overdue_amount").text(overdue_amount);
            jQuery(".widget_cont_cf_usd #overdue_per").text(overdue_per);
            jQuery(".widget_cont_cf_usd #pay_amount").text(pay_amount);
            jQuery(".widget_cont_cf_usd #rec_amount").text(rec_amount);
            // 关闭 G2 的体验改进计划打点请求
            G2.track(false);
            var chart = new G2.Chart({
              container: 'pay_rec_pie',
              width:164,
              height:156,
              animate: false,
              padding:10
            });
            chart.source([{
                item:'投放金额',
                amount:pay_amount
            },{
                item:'回笼金额',
                amount: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',['#5A7FFF','#F0F2F5'])
            .tooltip('item*amount', function(item, amount) {
              return {
                name: item,
                value: amount
              };
            }).style({
              lineWidth: 1,
              stroke: '#fff'
            });
            chart.render();
        }
            ]]></script>
        <a:dataSets>
            <a:dataSet id="cont_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="cont_cf_usd_loader"/>
                </a:events>
            </a:dataSet>
        </a:dataSets>
        <div class="widget_cont_cf_usd">
            <span class="widget_label"> </span>
            <div class="row1">项目资金流动情况</div>
            <div class="row2">
                <div class="title">
                    <img src="${/request/@context_path}/leafresource/images/widget/usd.png" class="icon"/>
                    <span>美元($)</span>
                </div>
                <div class="list">
                    <span class="left">项目总数</span>
                    <span class="right" id="contract_count"> </span>
                </div>
                <div class="list">
                    <span class="left">双名单</span>
                    <span class="right" > </span>
                </div>
                <div class="list">
                    <span class="left">转化率</span>
                    <span class="right" > </span>
                </div>
            </div>
            <div class="row3">
                <div class="list">
                    <span class="left">未收金额</span>
                    <span class="right" id="contract_amount"> </span>
                </div>
                <div class="list">
                    <span class="left">逾期金额</span>
                    <span class="right" id="overdue_amount"> </span>
                </div>
                <div class="list">
                    <span class="left">逾期比例</span>
                    <span class="right" id="overdue_per"> </span>
                </div>
            </div>
            <div class="row4">
                <div class="left">
                    <p>投放金额</p>
                    <p id="pay_amount"></p>
                    <p>回笼金额</p>
                    <p id="rec_amount"></p>
                </div>
                <div class="right" id="pay_rec_pie">

                </div>
                <div class="clearFloat"> </div>
            </div>
        </div>
        <a:screenBody style="display:none"> </a:screenBody>
    </a:view>
</a:screen>