{% load i18n %}






<script src="/static/js/echarts.min.js"></script>
<script type="text/javascript" src="/static/js/datetimepicker-master/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="/static/js/datetimepicker-master/bootstrap-datetimepicker.zh-CN.js"></script>
<link rel="stylesheet" href="/static/js/datetimepicker-master/bootstrap-datetimepicker.css" />



<style>
    .charts{
        height:86%;
        width:100%;
    }
    #qty{
        height:40%;
        margin-bottom:20px;
    }
    .pie-charts{
        height:60%;
        width:100%;
    }
    #prd{
        display:inline-block;
        width:49%;
        height:100%;
    }
    #agt{
        display:inline-block;
        width:49%;
        height:100%;
    }

    .ui-datepicker-calendar
    {display: none;}
</style>


<div class="subtitle">
    <ol class="breadcrumb">
        <li>{% trans "图表数据" %}</li>
        <li>{% trans "库存与销售图" %} </li>
    </ol>
</div>

<script type="text/javascript">
    $(document).ready(function(){

        $('.datepicker').datetimepicker({
           format: 'yyyy-mm',
           weekStart: 1,
           autoclose: true,
           startView: 3,
           minView: 3,
           forceParse: false,
           language: 'zh-CN'
    });
        $('.datepicker').datepicker('setDate',new Date());
        setDatePickerZh();

        $('#date_from').val('{{date_from}}');
        $('#date_to').val('{{date_to}}');
        console.log('{{date_from}}','{{date_to}}',)
        console.log(new Date())
        var myChart = echarts.init(document.getElementById('qty'));
            var option = {
                title :{
                    text:'月度发货柱状图'
                },
                toolbox:{
                    feature:{
                        saveAsImage:{
                            pixelRatio:2
                        }
                    }
                },
                tooltip:{
                    trigger:'item',

                },
                xAxis:{
                    type:'category',
                    data:[]
                },
                yAxis:{
                    type:'value',
                    format:'{a} :::: {c}',
                },
                series:{
                    data:[],
                    type:'bar',
                },
                legend: {
                    type:'plain',
                    data:['柱状图']
                }

            }
            var qty_option={
            grid: {
                left: '60px',
                right: '1%',
                top: '10%',
                bottom: '10%'
            },
            title : {
                text: '月度库存与入库图',
                x:'right'
            },
            xAxis: {
                type: 'category',
                data: {{quantitys.category|safe}},
                axisPointer: {
                            type: 'shadow'
                            }
            },
            yAxis: {
                type: 'value'
            },
            legend: {
                data: ['入库', '库存', ]
            },
            tooltip : {
                {#name:'入库',#}
                trigger: 'axis',
                {#formatter: "入库:{c} "#}
            },
            series: [{
                name:'入库',
                data: {{quantitys.inbound|safe}},
                type: 'bar',
                smooth: true,
                itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								}
							}
						},
            },
                     {
                name:'库存',
                data: {{quantitys.remain|safe}},
                type: 'bar',
                smooth: true,
                itemStyle: {
							normal: {
								label: {
									show: true, //开启显示
									position: 'top', //在上方显示
									textStyle: { //数值样式
										color: 'black',
										fontSize: 16
									}
								}
							}
						},
            }]
        };
        {#refreshChart()#}
        function refreshChart() {
                myChart.showLoading();
                $.ajax({
                    url:"/product/sendout/?date_from="+$('#date_from').val()+"&date_to="+$('#date_to').val(),
                    type:"GET",
                    async:true,
                    success:function(data){
                        console.log("data:",data)
                        myChart.setOption({
                        legend: {
                             data: ['security code matched', 'security code not match']
                                },
                        xAxis: {
                            type: 'category',
                            data: data[0].category
                        },
                        series: [{
                            name:"security code matched",
                            type: 'line',
                            data: data[0].data,
                            smooth: true
                        },
                            {
                            name:"security code not match",
                            type: 'line',
                            data: data[1].data,
                            smooth: true
                            }
                        ]
                    })
                    },
                    error: function(){
                        console.log('ajax failure')}
                })
        }


        myChart.setOption(qty_option);

        $('.btn-qry').click(function(){
            var date_from=$('#date_from').val();
            var date_to=$('#date_to').val();
            var company = $('#company').val();
            var sdiv = $('#sdiv').val();
            $.RefreshContent('{{request.path}}?date_from='+date_from+'&date_to='+date_to+'&company='+company+'&sdiv='+sdiv);

        });

    });
</script>


<form role="form"  class="form-inline" >
    <div class='col-sm-2 input-group'>
        <span class="input-group-addon"> {% trans "开始日期" %} </span>
        <input class="datepicker form-control" id="date_from" />
    </div>
    <div class='col-sm-2 input-group'>
        <span class="input-group-addon"> {% trans "结束日期" %} </span>
        <input class="datepicker form-control" id="date_to" />

    </div>
{% ifequal  filter  True %}
    <div class='col-sm-2 input-group'>
        <span class="input-group-addon"> {% trans "经销商" %} </span>
        <select class=" form-control" id="company" >
                <option value=""> --经销商--</option>
            {% for i in  com %}
                <option value="{{ i.0 }}">{{ i.1 }}</option>
            {% endfor %}
        </select>

    </div>
    <div class='col-sm-2 input-group'>
        <span class="input-group-addon"> {% trans "战区" %} </span>
        <select class=" form-control" id="sdiv" >
                <option value=""> --战区--</option>
            {% for i in  sdiv %}
                <option value="{{ i.0 }}">{{ i.1 }}</option>
            {% endfor %}
        </select>

    </div>
{% endifequal %}
    <div class='col-sm-2 input-group' style='margin-left:20px;'>
        <span>
            <a type="button" class='btn btn-primary btn-qry'>
                <span class='glyphicon glyphicon-search' style='padding-right:15px;'></span>{% trans '查看' %}
            </a>
        </span>
    </div>
</form>
<div class="clearfix"></div>
<div class="charts">   
    <div id='qty' style="width:100%;height:350px;"></div>
    <div class='pie-charts'>
        <div id='agt' style="width:48%;height:500px;"></div>
        <div id='prd' style="width:48%;height:500px;"></div>
    </div>
</div>



