{% load i18n %}

<script src="/static/js/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
        <script src="https://cdn.bootcss.com/jspdf/1.3.4/jspdf.debug.js"></script>

<style>
    .charts{
        height: 95%;
        width:100%;
    }
    #qty{
        height:340px;
        width: 100%;
        margin-top:20px;
        margin-bottom:20px;
    }
    .pie-charts{        
        height:500px;
        width: 58%;
    }
    #col-chart {
        width: 100%;
        height: 100%;
    }

    .btn-last-month,
    .btn-next-month {
        background: #f5f5f5;
        color: #666666;
        border: 1px solid #d5d5d5;
    }
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $('#year').val('{{y}}');
        $('#month').val('{{m}}');

        var cht_qty=echarts.init(document.getElementById('qty'));
        var qty_option={
            title : {
                text: '{{y}}年{{m}}月销售量曲线图',
                x:'center'
            },
            xAxis: {
                type: 'category',
                data: {{quantitys.category|safe}},
                name: '日期',
                nameLocation: 'end'
            },
            yAxis: {
                type: 'value',
                name: '销量/箱',
                nameLocation: 'end'
            },
            label: {
              show: true,
              position: 'top',
              textColor: '#000',
            },
            tooltip : {
                trigger: 'item',
                formatter: "{{y}}-{{m}}-{b} 销售出库: {c} (箱) "
            },
            series: [{
                data: {{quantitys.data|safe}},
                type: 'line',
                smooth: true
            }]
        };
        cht_qty.setOption(qty_option);
/*
        var cht_prd = echarts.init(document.getElementById('prd'));
        var prd_option = {
            title : {
                text: '销量排名前10产品：',
                x:'left'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c} "
            },

            series: [{
                data: {{products.data|safe}},
                selectedMode: 'single',
                type: 'pie',
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                radius: '65%',
                label: {
                    normal: {
                        show: true,

                        textStyle : {
                                    fontWeight : 400 ,
                                    fontSize : 16    //文字的字体大小
                        },
                        formatter:'{b}:{d}%'
                    }
                }
            }]

        };
        cht_prd.setOption(prd_option);
*/
/*
        var cht_agt=echarts.init(document.getElementById('agt'));
        var agt_option={
            title : {
                text: '销量排名前10经销商：',
                x:'left'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c} "
            },
            series: [{
                data: {{agents.data|safe}},
                type: 'pie',
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                },
                radius: '65%',
                label: {
                    normal: {
                        show: true,

                        textStyle : {
                                    fontWeight : 400 ,
                                    fontSize : 16    //文字的字体大小
                        },
                        formatter:'{b}:{d}%'
                    }
                }
            }]
        };
        cht_agt.setOption(agt_option);
        */
        var d = [];
        {% for i in products.data %}
            d.push(`{{i.name}}`);
        {% endfor %}
        var col_chart_option = {
            grid: {
                containerLabel: true,
                left:'180px',
            },
            title : {
                text: '销量排名前10产品',
                x:'center'
            },

            xAxis: {
                type:'value',
                name: '销量'
            },
            yAxis: {
                type: 'category',
                data: d,
                axisLabel: {
                    show: true,

                }
            },
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c} "
            },
            series: [
                {
                    type: 'bar',
                    data: {{ products.data|safe }}
                }
            ]
        };
        var col_crt = echarts.init(document.getElementById('col-chart'));
        col_crt.setOption(col_chart_option);

        $('#month').change(function() {
            var selectedMonth = $(this).children('option:selected').val();
            var year = $('#year').val();
            $.RefreshContent('{{request.path}}?year='+year+'&month='+selectedMonth);

        });
        $('#year').change(function() {
            var selectedYear = $(this).children('option:selected').val();
            var month = $('#month').val();
            $.RefreshContent('{{request.path}}?year='+selectedYear+'&month='+month);

        });
        $('.btn-qry').click(function(){
            var y=$('#year').val();
            var m=$('#month').val();
            $.RefreshContent('{{request.path}}?year='+y+'&month='+m);
        });
        $('.btn-next-month').click(function () {
            var y = $('#year').val();
            var m = zfill(parseInt($('#month').val()) + 1, 2);
            if(m == '13') {
                m = '01';
                y = parseInt(y) + 1;
            }
            $.RefreshContent('{{request.path}}?year='+y+'&month='+m);
        });
        $('.btn-last-month').click(function () {
            var y = $('#year').val();
            var m = zfill(parseInt($('#month').val()) - 1, 2);
            if(m == '00') {
                m = '12';
                y = parseInt(y) - 1;
            }
            $.RefreshContent('{{request.path}}?year='+y+'&month='+m);
        });
        $('#toggle').click(function() {
            if(qty_option.label.show == true){
                $('#toggle').html("<span class='uncheck'>☐</span> 曲线图销量指示");
                qty_option.label.show = false;
                cht_qty.setOption(qty_option);
            }else if(qty_option.label.show == false) {
                $('#toggle').html("<span class='check'>🗹</span> 曲线图销量指示");
                qty_option.label.show = true;
                cht_qty.setOption(qty_option);
            }
        });
        function trend() {
            if({{ prev_total }} && {{ total }}) {
                var pt = {{ prev_total }};
                var t = {{ total }};
                var compare = Math.floor( ((t - pt)/pt)*10000 )/ 100;
                if(compare > 0){
                    $('#trend').html(` 相较上月总量<span class='uncheck'>▲</span>${compare}%`);
                }else if(compare < 0){
                    $('#trend').html(` 相较上月总量<span class='check'>▼</span>${compare}%`);
                }else $('#trend').html(` 没有比较数据 `);
            }
        };
        function zfill(num, n) {
          var len = num.toString().length;
          while(len < n) {
            num = "0" + num;
            len++;
          }
          return num;
        }
        trend();

    });


</script>

<div class="subtitle">
    <ol class="breadcrumb">
        <li>{% trans "图表数据" %}</li>
        <li>{% trans "月销量分析" %} </li>
    </ol>
</div>


<!--startprint-->
<form role="form"  class="form-inline" id="printForm">
    <div class='col-sm-2 input-group pull-left'>
        <span class="input-group-addon"> {% trans "年份" %} </span>
        <select id='year' class='form-control'>
            {% for yr in years %}    
                <option>{{yr}}</option>
            {% endfor %}
        </select>
    </div>
    <div class='col-sm-2 input-group pull-left'>
        <span class="input-group-addon">{% trans "月份" %}</span>
        <select id='month'  class='form-control'>
            <option>01</option>
            <option>02</option>
            <option>03</option>
            <option>04</option>
            <option>05</option>
            <option>06</option>
            <option>07</option>
            <option>08</option>
            <option>09</option>
            <option>10</option>
            <option>11</option>
            <option>12</option>
        </select>
    </div>

<!--<div class="col-sm-2 panel panel-default " style="background: #f5f5f5;">-->
<!--  <div class="panel-body" style="padding: 9px;">-->
<!--    ABC-->
<!--  </div>-->
<!--</div>-->
<div class="btn-group col-sm-3" role="group" aria-label="">
  <button type="button"  class="btn btn-primary btn-last-month">< 上个月</button>
  <button type="button" class="btn btn-primary btn-next-month">下个月 ></button>
</div>
<div class="col-sm-4 panel panel-default pull-right" style="background: #f5f5f5;">
  <div class="panel-body" style="padding: 9px;">
    月销售总量: {{ total }}<span id="trend"></span>
  </div>
</div>

</form>

<div class="clearfix"></div>
<div class="charts">   
    <div id='qty' class="panel-like"></div>
    <div class="row-charts">
        <div class='pie-charts' style="float: left;">
            <div id="col-chart" class="panel-like"></div>
        </div>
        <div id="ranking" class="panel-like">
            <div class="rank-wrapper">
                <ul id="ranking-list">
                <p class="rank-title">销量排名前10的经销商</p>
                    {% for i in agents.data %}
                        <li class="ranking-list-item">{{ i.name }}
                            <span class="pull-right rank-number">{{ i.value }}</span>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
    <div style="height: 650px;width: 1px;"></div>

</div>



