{extend name="Public/base"/}
{block name="js"}
<script src="__PUBLIC__/js/echarts.online.js?v={$Think.const.APP_VERSION}"></script>
{/block}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/item/css/layui.css?v={$Think.const.APP_VERSION}">
<link rel="stylesheet" href="__PUBLIC__/css/set.css?v={$Think.const.APP_VERSION}">
{/block}
<script>
	$(function(){
		$(".nul_bli").eq(3).find(".navb").addClass("active");
//		$(".navb.active").parent().find(".nul_s .nul_sli").eq(8).find(".navs").addClass("active");
	})
</script>
{/block}
{block name="main"}
<div class="if_wrap">
    <div class="cus-con">
        <div class="set_tit"><span>有效客资量统计</span></div>
        <!-- <form action="/crm/Statistics/getNewPic" method="POST"> -->
			<div class=" set-top layui-form layui-form-item">
	            <label class="layui-form-label" style="width:100px;">部门</label>
	            <div class="layui-input-inline" style="width:auto;">
	                <select name="department" lay-filter="department" lay-search="">
	                	<option value="">选择部门</option>
	                    {volist name="deparments" id="vo"}
	                    <option value="{$vo.id}">{$vo.department_name}</option>
	                    {/volist}
	                </select>
	            </div>
	            <label class="layui-form-label" style="width:100px;">小组</label>
	            <div class="layui-input-inline" style="width:atuo;">
	                <select name="group" id="group" lay-filter="group" lay-search="">
	                    <option value="">选择小组</option>
	                </select>
	            </div>
	            <label class="layui-form-label" style="width:100px;">员工</label>
	            <div class="layui-input-inline" style="width:atuo;">
	                <select name="staff" id="staff" lay-filter="staff" lay-search="">
	                    <option value="">选择员工</option>
	                </select>
	            </div>
	            <label class="layui-form-label" style="width:100px;">查询区间</label>
	            <div class="layui-input-inline" style="width:atuo;">
	                <select name="timeArea" id="timeArea" lay-filter="staff" lay-search="">
	                    <option value="last_week">上周</option>
	                    <option value="this_week">本周</option>
	                </select>
	            </div>
	            <input id="submit" type="submit">
	        </div>
        <!-- </form> -->
        <br/>

        <hr />
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<!-- <div id="main" style="width: 1000;height:420px;">1</div> -->
	</div>
</div>
<script type="text/javascript">
layui.use('form', function(){
	var form = layui.form;
	// 部门  联动  小组
    form.on('select(department)', function(data){
        var department_id = data.value;
        $.ajax({
            type:"GET",
            url:'/crm/Statistics/getGroups',
            data:{department_id:department_id},
            success: function (msg) {
                var replace = '<select name="group" id="group' +
                    '" lay-filter="group" class="cus-input" ><option value="">选择小组</option>';
                for(var i=0;i<msg.length;i++){
                    replace += '<option value="'+msg[i]['id']+'">'+msg[i]['group_name']+'</option>';
                }
                replace +='</select>';
                $("#group").html(replace);
                form.render();
            }
        });
    });

    // 小组  联动  员工
    form.on('select(group)', function(data){
        var group_id = data.value;
        $.ajax({
            type: "GET",
            url: '/crm/Statistics/getStaffs',
            data: {group_id:group_id},
            success: function (msg) {
                var replace = '<select name="staff" id="staff' +
                    '" lay-filter="staff" class="cus-input" ><option value="">请选择</option>';
                for(var i=0;i<msg.length;i++){
                    replace += '<option value="'+msg[i]['id']+'">'+msg[i]['staffname']+'</option>';
                }
                replace +='</select>';
                $("#staff").html(replace);
                form.render();
            }
        });
    });
})
$(document).ready(function(){
	var myChart = echarts.init(document.getElementById('main'));
	// 显示标题，图例和空的坐标轴
	myChart.setOption({
	    title: {
	        text: '有效客资量统计',
	    },
	    tooltip: {
	        trigger: 'axis',
	        axisPointer: {
	            type: 'cross',
	            crossStyle: {
	                color: '#999'
	            }
	        }
	    },
	    toolbox: {
	        feature: {
	            dataView: {show: true, readOnly: false},
	            magicType: {show: true, type: ['line', 'bar']},
	            restore: {show: true},
	            saveAsImage: {show: true}
	        }
	    },
	    legend: {
	    	data:[]
	    },
	    xAxis: [
	        {
	            type: 'category',
	            data: [],
	            axisPointer: {
	                type: 'shadow'
	            }
	        }
	    ],
	    yAxis: [
	        {
	            type: 'value',
	            name: '数量',
	            min: 0,
	            max: 20,
	            interval: 5,
	            axisLabel: {
	                formatter: '{value} 个'
	            }
	        },
	    ],
	    series: [
	        {
	            type:'bar',
	        },
	        {
	            type:'bar',
	        },
	        {
	            type:'bar',
	        }
	        
	    ]
	});

	// 异步加载数据
	var arr=[];
	$.get("{:Url('crm/Statistics/getDeaultPicForValidc')}").done(function (data) {
	    // 填入数据
	    for(var i=0;i<data.data.length;i++){
	    	arr.push({name:data.data[i].department_name,data:data.data[i].data});
	    }
	    myChart.setOption({
	    	legend: {
		        data:data.department_name
		    },
	        xAxis: {
	            data: data.timezone
	        },
	        series: arr
	    });
	});
})

// var newArr=[];
// $("#sub").click(function(){
// 	var did  = $('#department').val();
// 	var gid  = $('#group').val();
// 	var sid  = $('#staff').val();
// 	var timeArea= $('#timeArea').val();
// 	$.ajax({
// 		type: "POST",
// 		url: '/crm/Statistics/getNewPic',
// 		data: {department:did,group:gid,staff:sid,timeArea:timeArea},
// 		success: function (msg) {
// 			console.log(msg);
// 			for(var i=0;i<data.data.length;i++){
// 				newArr.push({name:data.data[i].name,data:data.data[i].data});
// 			}
// 			myChart.setOption({
// 				legend: {
// 					data:data.name
// 				},
// 				xAxis: {
// 					data: data.timezone
// 				},
// 				series: newArr
// 			});
// 		}
// 	});
// });
</script>
{/block}