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

<!--
    $Author:
    $Date: 2018/8/2
    $Revision: 1.0
    CSH 年度回款/放款金额 按统计
-->
<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:840px;
            height:456px;
            margin: 0;
            padding: 0;
            }
            .widget_csh_count_line{
            box-sizing:border-box;
            width:840px;
            height:456px;
            background-color:#fff;
            position:relative;
            border:1px solid #F0F0F3;
            padding:0 88px 0 16px;
            user-select:none;
            cursor:default;
            }
            .widget_csh_count_line .widget_label{
            position:absolute;
            width:40px;
            height:4px;
            top:0;
            left:16px;
            background-color:#5A7FFF;
            }
            .widget_csh_count_line .row1{
            position:relative;
            height:20px;
            margin:16px 0 0 0;
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: rgba(75,80,90,0.85);
            letter-spacing: 0;
            line-height: 20px;
            }
            .widget_csh_count_line .row2{
            display:inline-block;
            position:relative;
            height:24px;
            margin:8px 0 0 0;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #5A7FFF;
            letter-spacing: 0;
            }
            .widget_csh_count_line .row2 span{
            display:inline-block;
            width:64px;
            height:24px;
            line-height:24px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            letter-spacing: 0;
            text-align: center;
            cursor:pointer;
            }
            .widget_csh_count_line .row2 input{
            display:none;
            }
            .widget_csh_count_line .row2 #widget_csh_count_line_payment{
            border-radius: 4px 0 0 4px;
            border: 1px solid #5A7FFF;
            color: #5A7FFF;
            }
            .widget_csh_count_line .row2 #widget_csh_count_line_receipt{
            border-radius:0 4px 4px 0;
            position:relative;
            left:-1px;
            border: 1px solid rgba(75,80,90,0.15);
            color: rgba(75,80,90,0.75);
            }
            .widget_csh_count_line .row2 input:checked~#widget_csh_count_line_payment {
            border-color:rgba(75,80,90,0.15);
            color:rgba(75,80,90,0.75);
            }
            .widget_csh_count_line .row2 input:checked~#widget_csh_count_line_receipt{
            border: 1px solid #5A7FFF;
            color: #5A7FFF;
            }
            .widget_csh_count_line .row3{
            position:relative;
            box-sizing:border-box;
            margin:16px 0 55px 0;
            width:100%;
            height:314px;
            border-top:1px solid #F0F0F3;
            padding-top:28px;
            }
            .widget_csh_count_line .row3 .tooltip{
            height:34px;
            }
            .widget_csh_count_line .row3 .tooltip div{
            height:17px;
            line-height:17px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: rgba(75,80,90,0.85);
            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_csh_count_line #widget_csh_count_line_transaction_type").on('change',function(e){
                //checked==true 对应 transaction_type=receipt
                //checked==false 对应 transaction_type=payment
                if(e.target.checked==true){
                    jQuery(".widget_csh_count_line .row1").text("本年回笼金额");
                    //切换数据源
                    widget_csh_count_line_chart.changeData(payData);
                }else{
                    jQuery(".widget_csh_count_line .row1").text("本年投放金额");
                    //切换数据源
                    widget_csh_count_line_chart.changeData(recData);
                }
            });

            // 关闭 G2 的体验改进计划打点请求
            G2.track(false);
            var widget_csh_count_line_chart = new G2.Chart({
              container: 'cshLineChart',
              forceFit: false,
              width:718,
              height: 300,
              padding:'auto'
            });
            widget_csh_count_line_chart.tooltip({
                showTitle: true,
                crosshairs: {
                    type: 'line'
                }
                <!--,-->
                <!--containerTpl: '<div class="g2-tooltip">'-->
                    <!--+ '<div class="g2-tooltip-title" style="margin:10px 0;">{title}</div>'-->
                    <!--+ '<ul class="g2-tooltip-list"></ul></div>',-->
                <!--itemTpl: function(name,value){-->
                    <!--console.log(name);-->
                    <!--return '<li>{name}kkk{value}</li>'-->
                <!--}()-->
            });
            widget_csh_count_line_chart.axis('amount', {
                label: {
                    formatter: function formatter(val) {
                        return $L.formatMoney(val,2);
                    }
                }
            });
            widget_csh_count_line_chart.axis('time',{
                label:{
                    formatter:function(text,item,index){
                        return text.substring(text.indexOf("年")+1);
                    }
                }
            });
            widget_csh_count_line_chart.source(recData);
            widget_csh_count_line_chart.line()
                .position(['time','amount'])
                .color('currency',['#5A7FFF','#FFD95B'])
                .size(2)
                .tooltip('month*amount*year*currency',function(month,amount,year,currency){
                    amount=$L.formatMoney(amount,2);
                    return {
                        title:year+'年'+month+'月',
                        name:currency,
                        value:amount
                    }
                });
            widget_csh_count_line_chart.point()
                .position(['time','amount'])
                .color('currency',['#5A7FFF','#FFD95B'])
                .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_csh_count_line_chart.render();
        }
            ]]></script>
        <a:dataSets>
            <a:dataSet id="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_csh_count_line">
            <span class="widget_label"> </span>
            <div class="row1">本年投放金额</div>
            <label class="row2" for="widget_csh_count_line_transaction_type">
                <!--用:check伪类做toggle tab的状态类转换,checked表示transaction_type=payment-->
                <input type="checkbox" id="widget_csh_count_line_transaction_type"/>
                <span id="widget_csh_count_line_payment">投放金额</span>
                <span id="widget_csh_count_line_receipt">回笼金额</span>
            </label>
            <div class="row3" id="cshLineChart"> </div>
        </div>
        <a:screenBody style="display:none"> </a:screenBody>
    </a:view>
</a:screen>