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

<!--
    $Date: 2018/9/7
    CSH 投放金额/回笼金额
    WIDGET-LEAF-CSH-COUNT-LINE
-->
<a:screen xmlns:a="http://www.leaf-framework.org/application">
    <a:init-procedure/>
    <a:view template="default" package="leaf.ui.std">
        <!--单独微件测试用-->
        <!--<script src="${/request/@context_path}/leafresource/js/attach/g2.min.js"></script>-->
        <style>
            html,body{
            width:928px;
            height:553px;
            margin: 0;
            padding: 0;
            }
            .widget_leaf_csh_count_line{
            box-sizing:border-box;
            width:928px;
            height:553px;
            background-color:#fff;
            position:relative;
            user-select:none;
            cursor:default;
            }
            .widget_leaf_csh_count_line .chart-img{
                width: 39px;
                padding: 59px 0 0 56px;
                display: inline-block;

            }
            .widget_leaf_csh_count_line .year-pay-loan-money{
                font-family: NotoSansHans-Medium;
                font-size: 18px;
                font-weight: normal;
                font-stretch: normal;
                letter-spacing: 2px;
                color: #333333;
                display: inline-block;
                position: absolute;
                /* position: relative; */
                top: 70px;
                margin-left: 19px;
            }
            .widget_leaf_csh_count_line .title{
            display:inline-block;
            position:relative;
            height:22px;
            margin:37px 0 0 56px;
            font-family: NotoSansHans-Thin;
            letter-spacing: 2px;
            cursor:pointer;
            }
            .widget_leaf_csh_count_line .title .tab_btn{
            display:inline-block;
            height:14px;
            font-size: 16px;
            line-height:14px;
            }
            .widget_leaf_csh_count_line .title input{
            display:none;
            }
            .widget_leaf_csh_count_line .title #widget_leaf_csh_count_line_payment{
            color: #333333;
            padding-right:15px;
            border-right:2px solid #e7e7e7;
                font-family: NotoSansHans-Medium;
            }
            .widget_leaf_csh_count_line .title #widget_leaf_csh_count_line_receipt{
            color:#ccc;
            padding-left:15px;
            }
            .widget_leaf_csh_count_line .title .widget_border{
            position:absolute;
            left:0;
            bottom:0;
            width:30px;
            height:4px;
            background-color: #657efe;
            transition:0.2s ease;
            }
            .widget_leaf_csh_count_line .title input:checked~#widget_leaf_csh_count_line_payment {
            color:#ccc;
            }
            .widget_leaf_csh_count_line .title input:checked~#widget_leaf_csh_count_line_receipt{
            color: #333333;
                font-family: NotoSansHans-Medium;

            }
            .widget_leaf_csh_count_line .title input:checked~.widget_border {
            left:105px;
            }
            .widget_leaf_csh_count_line .row2{
            position:relative;
            box-sizing:border-box;
            margin:45px 0px 0px 56px;
            height:194px;
            }
            .widget_leaf_csh_count_line .row2 .g2-tooltip{
            height:65px;
            min-width:124px;
            }
            .widget_leaf_csh_count_line .row2 .g2-tooltip div{
            height:17px;
            line-height:17px;
            letter-spacing: 0;
            }
        </style>
        <script><![CDATA[
        function cshCountLoader(ds){
            var records=ds.data,
                recArr=[],
                payArr=[],
                recData=[],
                payData=[],
                curDate=new Date(),
                curYear=curDate.getFullYear(),
                curMonth=curDate.getMonth()+1;

            if(records!==null && records.length>0){
                records.forEach(function(r){
                    if(r.data["transaction_type"].toLowerCase()=='receipt'){
                        recArr[r.data["month"]]=new Array();
                        if(r.data["currency_code"]=='cny'){
                            recArr[r.data["month"]][0]=r.data["amount"];
                        }else if(r.data["currency_code"]=='usd'){
                            recArr[r.data["month"]][1]=r.data["amount"];
                        }
                    }else{
                        payArr[r.data["month"]]=new Array();
                        if(r.data["currency_code"]=='cny'){
                            payArr[r.data["month"]][0]=r.data["amount"];
                        }else if(r.data["currency_code"]=='usd'){
                            payArr[r.data["month"]][1]=r.data["amount"];
                        }
                    }
                });
            }

            //去年月份
            for(var i=curMonth+1;i<=12;i++){
                if(recArr[i]){
                    if(recArr[i][0]){
                        recData.push({
                            year:curYear-1,
                            month:i,
                            amount:recArr[i][0],
                            currency:'人民币',
                            time:curYear-1+'年'+i+'月'
                        });
                    }else{
                        recData.push({
                            year:curYear-1,
                            month:i,
                            amount:0,
                            currency:'人民币',
                            time:curYear-1+'年'+i+'月'
                        });
                    }
                    if(recArr[i][1]){
                        recData.push({
                            year:curYear-1,
                            month:i,
                            amount:recArr[i][1],
                            currency:'美元',
                            time:curYear-1+'年'+i+'月'
                        });
                    }else{
                        recData.push({
                            year:curYear-1,
                            month:i,
                            amount:0,
                            currency:'美元',
                            time:curYear-1+'年'+i+'月'
                        });
                    }
                }else{
                    recData.push({
                        year:curYear-1,
                        month:i,
                        amount:0,
                        currency:'人民币',
                            time:curYear-1+'年'+i+'月'
                    });
                    recData.push({
                        year:curYear-1,
                        month:i,
                        amount:0,
                        currency:'美元',
                            time:curYear-1+'年'+i+'月'
                    });
                };
                if(payArr[i]){
                    if(payArr[i][0]){
                        payData.push({
                            year:curYear-1,
                            month:i,
                            amount:payArr[i][0],
                            currency:'人民币',
                            time:curYear-1+'年'+i+'月'
                        });
                    }else{
                        payData.push({
                            year:curYear-1,
                            month:i,
                            amount:0,
                            currency:'人民币',
                            time:curYear-1+'年'+i+'月'
                        });
                    }
                    if(payArr[i][1]){
                        payData.push({
                            year:curYear-1,
                            month:i,
                            amount:payArr[i][1],
                            currency:'美元',
                            time:curYear-1+'年'+i+'月'
                        });
                    }else{
                        payData.push({
                            year:curYear-1,
                            month:i,
                            amount:0,
                            currency:'美元',
                            time:curYear-1+'年'+i+'月'
                        });
                    }
                }else{
                    payData.push({
                        year:curYear-1,
                        month:i,
                        amount:0,
                        currency:'人民币',
                            time:curYear-1+'年'+i+'月'
                    });
                    payData.push({
                        year:curYear-1,
                        month:i,
                        amount:0,
                        currency:'美元',
                            time:curYear-1+'年'+i+'月'
                    });
                };
            }

            //今年月份
            for(var i=1;i<=curMonth;i++){
                if(recArr[i]){
                    if(recArr[i][0]){
                        recData.push({
                            year:curYear,
                            month:i,
                            amount:recArr[i][0],
                            currency:'人民币',
                            time:curYear+'年'+i+'月'
                        });
                    }else{
                        recData.push({
                            year:curYear,
                            month:i,
                            amount:0,
                            currency:'人民币',
                            time:curYear+'年'+i+'月'
                        });
                    }
                    if(recArr[i][1]){
                        recData.push({
                            year:curYear,
                            month:i,
                            amount:recArr[i][1],
                            currency:'美元',
                            time:curYear+'年'+i+'月'
                        });
                    }else{
                        recData.push({
                            year:curYear,
                            month:i,
                            amount:0,
                            currency:'美元',
                            time:curYear+'年'+i+'月'
                        });
                    }
                }else{
                    recData.push({
                        year:curYear,
                        month:i,
                        amount:0,
                        currency:'人民币',
                        time:curYear+'年'+i+'月'
                    });
                    recData.push({
                        year:curYear,
                        month:i,
                        amount:0,
                        currency:'美元',
                        time:curYear+'年'+i+'月'
                    });
                };
                if(payArr[i]){
                    if(payArr[i][0]){
                        payData.push({
                            year:curYear,
                            month:i,
                            amount:payArr[i][0],
                            currency:'人民币',
                            time:curYear+'年'+i+'月'
                        });
                    }else{
                        payData.push({
                            year:curYear,
                            month:i,
                            amount:0,
                            currency:'人民币',
                            time:curYear+'年'+i+'月'
                        });
                    }
                    if(payArr[i][1]){
                        payData.push({
                            year:curYear,
                            month:i,
                            amount:payArr[i][1],
                            currency:'美元',
                            time:curYear+'年'+i+'月'
                        });
                    }else{
                        payData.push({
                            year:curYear,
                            month:i,
                            amount:0,
                            currency:'美元',
                            time:curYear+'年'+i+'月'
                        });
                    }
                }else{
                    payData.push({
                        year:curYear,
                        month:i,
                        amount:0,
                        currency:'人民币',
                        time:curYear+'年'+i+'月'
                    });
                    payData.push({
                        year:curYear,
                        month:i,
                        amount:0,
                        currency:'美元',
                        time:curYear+'年'+i+'月'
                    });
                };
            }

            jQuery(".widget_leaf_csh_count_line #widget_leaf_csh_count_line_tab").on('change',function(e){
                //checked==true 对应 receipt
                //checked==false 对应 payment
                if(e.target.checked==true){
                    widget_leaf_csh_count_line_chart.changeData(payData);
                }else{
                    widget_leaf_csh_count_line_chart.changeData(recData);
                }
            });

            // 关闭 G2 的体验改进计划打点请求
            G2.track(false);
            var widget_leaf_csh_count_line_chart = new G2.Chart({
              container: 'widget_leaf_csh_count_line_chart',
              forceFit: false,
              width:810,
              height: 303,
              padding:'auto'
            });
            widget_leaf_csh_count_line_chart.tooltip({
                showTitle: true,
                crosshairs: {
                    type: 'line'
                }
                ,
                itemTpl: '<li data-index={index}>'
                    + '<span style="color:{color}">{name} :{value}</span>'
                    + '</li>'
            });
            widget_leaf_csh_count_line_chart.axis('amount', {
                label: {
                    formatter: function formatter(val) {
                        return $L.formatMoney(val,2);
                    }
                }
            });
            widget_leaf_csh_count_line_chart.axis('time',{
                label:{
                    formatter:function(text,item,index){
                        return text.substring(text.indexOf("年")+1);
                    }
                }
            });
            widget_leaf_csh_count_line_chart.legend('currency',{
                itemGap:50
            });
            widget_leaf_csh_count_line_chart.source(recData);
            widget_leaf_csh_count_line_chart.line()
                .position(['time','amount'])
                .color('currency',['#79c6fa','#ffc53b'])
                .size(2)
                .style({
                    shadowColor:'rgba(0, 0, 0, 0.15)',
                    shadowBlur:7,
                    shadowOffsetX:0,
                    shadowOffsetY:6
                })
                .tooltip('month*amount*year*currency',function(month,amount,year,currency){
                    amount=$L.formatMoney(amount,2);
                    return {
                        title:year+'年'+month+'月',
                        name:currency,
                        value:amount
                    }
                });
            widget_leaf_csh_count_line_chart.point()
                .position(['time','amount'])
                .color('currency',['#79c6fa','#ffc53b'])
                .shape('circle')
                .style({
                    stroke: '#fff',
                    lineWidth: 1
                })
                .tooltip('month*amount*year*currency',function(month,amount,year,currency){
                    amount=$L.formatMoney(amount,2);
                    return {
                        title:year+'年'+month+'月',
                        name:currency,
                        value:amount
                    }
                });
            widget_leaf_csh_count_line_chart.render();
        }
            ]]></script>
        <a:dataSets>
            <a:dataSet id="leaf_csh_count_line_ds" autoQuery="true" model="csh.CSH911.csh_count">
                <a:fields>
                    <a:field name="year"/>
                    <a:field name="month"/>
                    <a:field name="transaction_type"/>
                    <a:field name="currency_code"/>
                    <a:field name="amount"/>
                </a:fields>
                <a:events>
                    <a:event name="load" handler="cshCountLoader"/>
                </a:events>
            </a:dataSet>
        </a:dataSets>
        <div class="widget_leaf_csh_count_line">
            <div>
            <img class="chart-img" src="${/request/@context_path}/leafresource/images/widget/leaf-csh-count-chart.png"/>
            <div class="year-pay-loan-money">本年投放回笼金额</div>
            </div>
            <label class="title" for="widget_leaf_csh_count_line_tab">
                <!--用:check伪类做toggle tab的状态类转换,checked对应payment-->
                <input type="checkbox" id="widget_leaf_csh_count_line_tab"/>
                <span id="widget_leaf_csh_count_line_payment" class="tab_btn">投放金额</span>
                <span id="widget_leaf_csh_count_line_receipt" class="tab_btn">回笼金额</span>
                <span class="widget_border"> </span>
            </label>
            <div class="row2" id="widget_leaf_csh_count_line_chart"> </div>
        </div>
        <a:screenBody style="display:none"> </a:screenBody>
    </a:view>
</a:screen>