{extend name="Public/base"/}
{block name="js"}
<script src="__PUBLIC__/js/echarts.online.js?v={$Think.const.APP_VERSION}"></script>
<script>
	$(function(){
		$(".nul_bli").eq(3).find(".navb").addClass("active");
//		$(".navb.active").parent().find(".nul_s .nul_sli").eq(3).find(".navs").addClass("active");
	})
</script>
{/block}
{block name="css"}
<style>
	.layui-form .layui-table th {
		text-align: center;
	}
</style>
<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}">
<link rel="stylesheet" href="__PUBLIC__/css/statistics.css?v={$Think.const.APP_VERSION}">
{/block}
{block name="main"}
<div class="if_wrap">
	<div class="cus-con">
		<div class="set_tit"><span>电商日报明细</span></div>
		<div class=" set-top layui-form layui-form-item">
			<label style="width:50px;" class="layui-form-label mkz_t1">事业部：</label>
			<div class="layui-input-inline">
				<select name="brandclass" id="brandclass" lay-search="">
					{if condition = "$bsize gt 1"}
					<option value="0">请选择</option>
					{/if}

					{volist name="brandclassList" id="vo"}
					<option value="{$vo.id}">{$vo.brandclass}</option>
					{/volist}
				</select>
			</div>
			<label style="width:70px;" class="layui-form-label mkz_t1">部门(店)：</label>
			<div class="layui-input-inline">
				<select name="shop" id="shop" lay-filter="shop" lay-search="">
					{if condition = "$ssize gt 1"}
					<option value="0">全部</option>
					{/if}

					{volist name="shopList" id="vo"}
					<option value="{$vo.shop_code}">{$vo.shop_name}</option>
					{/volist}
				</select>
			</div>
			<!--<label style="width:70px;" class="layui-form-label mkz_t1" style="width:50px;">时间区间：</label>
            <div class="layui-input-inline">
                <input class="layui-input" id="timeArea" placeholder="yyyy-MM" readonly="readonly" type="text" value="" />
            </div>	     -->
			<!--<label style="width:70px;" class="layui-form-label mkz_t1">消费类型：</label>
			<div class="layui-input-inline">
				<select name="consultation_type_id" id="consultation_type_id" lay-filter="consultation_type_id" lay-search="">
					<option value="">请选择</option>
					{volist name="consumptionType" id="ct"}
					<option value="{$ct.id}"{if $Think.const.HS_TYPE eq $ct.id}selected{/if}>{$ct.consumption_name}</option>
					{/volist}
				</select>
			</div>-->
			<button class="layui-btn layui-btn-primary cus-model-btn" id="sub" >
				查询
			</button>
			<button class="layui-btn layui-btn-primary cus-model-btn" id="export" >
				<i class="iconfont"></i> 导出
			</button>
			<!--{if condition = "$reportStatus eq 0"}
                <button class="layui-btn layui-btn-primary cus-model-btn" id="report" >
                    <input type="hidden" value="1" id="report_status">
                    <i class="iconfont"></i> 生成月报
                </button>
            {else /}
                <button class="layui-btn layui-btn-primary cus-model-btn" id="report" >
                    <input type="hidden" value="2" id="report_status">
                    <i class="iconfont"></i> 重新生成
                </button>
            {/if}-->
		</div>
		<div class="layui-form">
			<table class="layui-table">


			</table>
		</div>
		<hr />
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<!-- <div id="main" style="width: 900px;height:420px;">折柱混合图（敬请期待......）</div> -->
	</div>
</div>
<script type="text/javascript">
	// 联动
	layui.use('form', function(){
		var form = layui.form;
		// 事业部  联动  部门
		form.on('select(brandclass)', function(data){
			var brandclass = data.value;
			$.ajax({
				type:"GET",
				url:'/crm/Statistics/getShops',
				data:{brandclass_id:brandclass},
				success: function (msg) {
					var replace = '<select name="shop" id="shop' +
							'" lay-filter="shop" class="cus-input" ><option value="0">全部</option>';
					for(var i=0;i<msg.length;i++){
						replace += '<option value="'+msg[i]['shop_code']+'">'+msg[i]['shop_name']+'</option>';
					}
					replace +='</select>';
					$("#shop").html(replace);
					form.render();
				}
			});
		});
	})

	// 生成 折柱混合图
	function getDeaultPicForDjcus(){
		var myChart = echarts.init(document.getElementById('main'));
		myChart.clear();
		// 显示标题，图例和空的坐标轴
		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: []
		});

		var did     = $('#departments').val();
		var gid     = $('#group').val();
		var sid     = $('#staff').val();
		var timeArea= $('#timeArea').val();
		var arr=[];
		$.ajax({
			type:'POST',
			url: '/crm/Statistics/getNewPicForDjcus',
			data:{department:did,group:gid,staff:sid,timeArea:timeArea},
			success: function(data){
				console.log(data);
				for(var i=0;i<data.data.length;i++){
					arr.push({name:data.data[i].names,data:data.data[i].data,type:"bar"});
				}

				myChart.setOption({
					legend: {
						data:data.names
					},
					xAxis: {
						data: data.timezone
					},
					series: arr
				});
			}
		})
	}
	// 查询按钮
	$("#sub").click(function(){
		// 生成柱状图
		// getDeaultPicForDjcus();
		// 生成表格
		var brandclass= $('#brandclass').val();
		var shop      = $('#shop').val();
//	var consultation_type_id      = $('#consultation_type_id').val();

		if (typeof(shop)=='undefined' || shop == null  || shop.length <= 0 || shop == 0) {
			layer.alert('请选择具体部门（店）');
			return false;
		}
		var index = layer.load(1, {shade: false});
		// 重新载入表格
		$.ajax({
			type: "POST",
			url: "{:Url('crm/Statistics/daily_detail_data')}",
			data: {brandclass_id:brandclass, shop_code:shop},
			dataType:'json',
			success: function(ret){
				if(ret.code == 1){
					var today = ret.today;
					var ret = ret.data;
					var inp = '<tbody>';
					if(ret.length > 0){
						for(var i=0;i<ret.length;i++){
							inp += ' <tr>';
							for(var j=0;j<=today;j++){
								inp += '<th>'+ret[i][j]+'</th>';
							}
							inp += ' </tr>';
						}
					}
					inp += '</tbody>';
				}else{
					layer.alert('你无此操作权限');
					return false;
				}
				$('table').html(inp);
				layer.closeAll();
			},
			error:function(XMLHttpRequest, textStatus, errorThrown){
				var ret = XMLHttpRequest.responseJSON
				layer.alert('操作失败');
			}
		})
	});

	// 导出按钮
	$("#export").click(function(){
		var brandclass= $('#brandclass').val();
		var shop      = $('#shop').val();
//	var consultation_type_id      = $('#consultation_type_id').val();

		if (typeof(shop)=='undefined' || shop == null  || shop.length <= 0 || shop == 0) {
			layer.alert('请选择具体部门（店）');
			return false;
		};

		location.href = "daily_detail_data?brandclass_id="+brandclass+"&shop_code="+shop+"&need="+1;
	})

</script>
{/block}