$.ajaxSetup({
	async : false
});

layui.use([ 'laydate', 'form' ,'layer'], function() {
	var laydate = layui.laydate, form = layui.form, $ = layui.$,layer = layui.layer;
	
	//店铺字典转换
	var shopnameData = {};
	$.ajax({
		url : '../../../changeRoleName',
		dataType : 'json',
		data : {
		}, 
		type : 'get',
		success : function(data) {
			shopnameData = data;
		}
	});
	/*function refresh() {
	    location.reload();
	}*/
	// 点击查询按钮，重载echarts
	$('#searchBtn1').on('click', function() {
		var param = {
			quoteTimeBegin	: $("#worldId").val(),
			roleSearch 		: $("#roleSearch").val(),
			realname 		: $("#realname").val(),
			byProTypeLabel	: $("#byProTypeLabel").val(),
			proTypeLabel	: $("#proTypeLabel").val()
		};
		getEchart(MyEChart,param);
		return false;
	});
	/*------------------------------------------------------------------------------------------*/
	function getEchart(MyEChart,param2) {
		var kefuTotal = [];
		var shopName = [];
		var myDate = new Date();
		var year = myDate.getFullYear();
		var month = myDate.getMonth() + 1;
		var day = myDate.getDate();
		var today = year + "-" + month + "-" + day;
		// 进页面默认查今天的数据
		var param = {
			quoteTimeBegin: today
		};
		if(param2){
			param = param2 ;
		}
		$.getJSON("../../../echartKefuSummary", param,function(data) {
			var sname  = data.sname
			var datas1 = data.kefuTotal
			for (var i = 0; i < sname.length; i++) {
				if(sname[i] > 0){
					shopName[i]     = shopnameData[sname[i]];
				}else{
					shopName[i]     = sname[i];
				}
				kefuTotal[i]   = datas1[i];
			}
		});
		MyEChart.setOption({
			title : {
			// text : '各专业参赛获奖比较',
			// color: '#a9334c',
			// algin: 'center'
			},
			tooltip : {
				trigger : 'axis'
			},
			legend : {
				x: 'right',
				padding: [20,130], 
				data : [ '200元以上客户流失量'],
			},
			toolbox : {
				show : true,//是否显示工具栏组件
				feature : {
					/*mark : {
						show : false
					},*/
					dataView : {	//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
						show : true,//是否显示该工具。
						textColor:"#000",                    //文本颜色。
						//readOnly : true,
						lang: ['数据视图', '关闭', '导出Excel'],
						contentToOption: function (opts) {
							$("#tableExcel").table2excel({
			                    exclude: ".noExl", //过滤位置的 css 类名
			                    filename:'客服数据汇总统计' + ".xls", //文件名称
			                    name: "客服数据汇总统计.xls",
			                    exclude_img: true,
			                    exclude_links: true,
			                    exclude_inputs: true
			                });
			            },
						optionToContent: function (opt) {	//改变数据表格样式
							// 店铺
						    let axisData = opt.xAxis[0].data; //X坐标数据
						    // 柱状图数据
						    let series = opt.series;
						    let tdHeads = '<td  style="padding: 0 10px">店铺/人员</td>'; //表头
						    let tdBodys = ''; //数据
						    series.forEach(function (item) {
						        //组装表头
						        tdHeads += `<td style="padding: 0 10px">${item.name}</td>`;
						    });
						    let table = `<table id="tableExcel" border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>${tdHeads} </tr>`;
						    for (let i = 0, l = axisData.length; i < l; i++) {
						        for (let j = 0; j < series.length; j++) {
						        	if(!series[j].data[i])
						        		series[j].data[i] = 0
						            //组装表数据
						            tdBodys += `<td>${ series[j].data[i] }</td>`;
						        }
						        table += `<tr><td style="padding: 0 10px">${axisData[i]}</td>${tdBodys}</tr>`;
						        tdBodys = '';
						    }
						    table += '</tbody></table>';
						    return table;
						}
					},
					magicType : {	//动态类型切换
						show : true,
						type : ['bar','line']//启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
					},
					restore : {
						show : true
					},
					saveAsImage : {
						show : true
					}
				}
			},
			xAxis : [ {
				type : 'category',
				data : shopName,
				/*axisLabel: {    //重点在这一块，其余可以忽略
					interval: 0,   //这个一定要有，别忘记了
					rotate: 15,
					textStyle: {
						color: '#000',
						fontSize: 10
					}
				},*/
				axisLabel: {
					interval:0,
					textStyle: {
						color: '#7c8893',
						fontSize: 12
					},
					formatter: function(value) {
						return value.split("").join("\n");
					}
				},
			} ],
			yAxis : [ {
				type : 'value'
			} ],
			series : [ {
					name : '200元以上客户流失量',
					type : 'bar',
					data: kefuTotal,
					itemStyle: {
						normal: {
							label: {
								show: true,		//开启显示
								position: 'top',	//在上方显示
		                        textStyle: {	    //数值样式
		                        	color: 'black',
		                        	fontSize: 16
		                        }
							}
						}
					}
				}]
		});

	}

	var MyEChart = echarts.init(document.getElementById('echartAcount'));

	getEchart(MyEChart);
});
