$(function(){
	tabChart('marryGraph1');
	tabChart('marryGraph2');
	tabChart('marryGraph3');
	tabChart('marryGraph4');
	tabChart('marryGraph5');
	tabChart('readyGraph1');
	
	function tabChart(container){
		// 반응형
		window.addEventListener('resize', function() {
			chart.resize();
		});

		//  결혼서비스 예식장
		var chart = echarts.init(document.getElementById(container));
		
		const resizeObserver = new ResizeObserver(()=>{
			chart.resize();
		});
		
		resizeObserver.observe(document.getElementById(container));

		var option = {
			grid: {left: 5, right: 5, top: 15, bottom: 25, containLabel: true},

			tooltip: {
				trigger: 'item',
				textStyle: {color: '#000', fontSize: 13}
			},

			legend: {
				bottom: 0,
				itemGap: 10,
				textStyle: {color: '#000', fontSize: 14}
			},
			xAxis: {
				type: 'category',
				data: ['전국','수도권','비수도권','서울(강남)','서울(강남외)','부산','인천','대구','대전','광주','울산','경기도','충청도','전라도','경상도','강원도','제주도'],
				axisLabel: {
					fontSize: 13,
					color: '#666',
					lineHeight: 16,
					formatter: function (value) {
						const result = [];
						for (var i = 0; i < value.length; i++) {
							const current = value[i];
							const next = value[i + 1] || '';

							if (current === '(' && next) {
								result.push(current + next);
								i++;
							} else if (next === ')') {
								result.push(current + next);
								i++;
							} else {
								result.push(current);
							}
						}
						return result.join('\n'); // 줄바꿈
					}
				}
			},
			yAxis: {
				type: 'value',
				min: 0,
				splitNumber: 5,
			},
			series: [{
				name: '하위10%',
				type: 'line',
				data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				lineStyle:{color:'#008541'},
				itemStyle:{color:'#008541'},
				symbol: 'circle',
			},{
				name: '하위25%',
				type: 'line',
				data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				lineStyle:{color:'#2f7fed'},
				itemStyle:{color:'#2f7fed'},
				symbol: 'diamond',
			},{
				name: '중간가격',
				type: 'line',
				data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				lineStyle:{color:'#6e7974'},
				itemStyle:{color:'#6e7974'},
				symbol: 'rect',
			},{
				name: '상위25%',
				type: 'line',
				data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				lineStyle:{color:'#262694'},
				itemStyle:{color:'#262694'},
				symbol: 'triangle',
			},{
				name: '상위10%',
				type: 'line',
				data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
				lineStyle:{color:'#fd5a1d'},
				itemStyle:{color:'#fd5a1d'},
				symbol: 'roundRect',
			}]
		};

		chart.setOption(option);
		
	}

	
	
	$.ajax({
		url: '/tprice/portal/wedding/getMainPageWeddingInfo.do',
		type: 'GET',
		data: {},
		dataType: 'json',
		success: function(response){
			$(".chartLoading").hide();
			var skipText = "";
			for(var i =0; i < response.areaNameList.length ; i++){
				skipText += "예식장비용 - "+response.areaNameList[i] + "(" 
				+"하위10퍼: "+   (response.weddingHallAreaLow10PercentileList[i] === null ? "없음" : response.weddingHallAreaLow10PercentileList[i])
				+", 하위25퍼: "+ (response.weddingHallAreaLow25PercentileList[i] === null ? "없음" : response.weddingHallAreaLow25PercentileList[i])
				+", 중간값: "+   (response.weddingHallAreaMedianPercentileList[i] === null ? "없음" : response.weddingHallAreaMedianPercentileList[i]) 
				+", 상위25퍼값: "+(response.weddingHallAreaHigh25PercentileList[i] === null ? "없음" : response.weddingHallAreaHigh25PercentileList[i])
				+", 상위10퍼값: "+(response.weddingHallAreaHigh10PercentileList[i] === null ? "없음" : response.weddingHallAreaHigh10PercentileList[i])+ "),";
			}
			$("#marryGraph1").siblings('.skip').html(skipText);
			
			var skipText = "";
			for(var i =0; i < response.areaNameList.length ; i++){
				skipText += "대관료 - " + response.areaNameList[i] + "(" 
				+"하위10퍼: "+(response.rentalAreaLow10PercentileList[i] === null ? "없음" : response.rentalAreaLow10PercentileList[i])
				+", 하위25퍼: "+ (response.rentalAreaLow25PercentileList[i] === null ? "없음" : response.rentalAreaLow25PercentileList[i])
				+", 중간값: "+(response.rentalAreaMedianPercentileList[i] === null ? "없음" : response.rentalAreaMedianPercentileList[i]) 
				+", 상위25퍼값: "+(response.rentalAreaHigh25PercentileList[i] === null ? "없음" : response.rentalAreaHigh25PercentileList[i])
				+", 상위10퍼값: "+(response.rentalAreaHigh10PercentileList[i] === null ? "없음" : response.rentalAreaHigh10PercentileList[i])+ "),";
			}
			$("#marryGraph2").siblings('.skip').html(skipText);
			
			var skipText = "";
			for(var i =0; i < response.areaNameList.length ; i++){
				skipText += "1인당식대 - "+response.areaNameList[i] + "(" 
				+"하위10퍼: "+(response.mealPersonAreaLow10PercentileList[i] === null ? "없음" : response.mealPersonAreaLow10PercentileList[i])
				+", 하위25퍼: "+ (response.mealPersonAreaLow25PercentileList[i] === null ? "없음" : response.mealPersonAreaLow25PercentileList[i])
				+", 중간값: "+(response.mealPersonAreaMedianPercentileList[i] === null ? "없음" : response.mealPersonAreaMedianPercentileList[i]) 
				+", 상위25퍼값: "+(response.mealPersonAreaHigh25PercentileList[i] === null ? "없음" : response.mealPersonAreaHigh25PercentileList[i])
				+", 상위10퍼값: "+(response.mealPersonAreaHigh10PercentileList[i] === null ? "없음" : response.mealPersonAreaHigh10PercentileList[i])+ "),";
			}
			$("#marryGraph3").siblings('.skip').html(skipText);
			
			var skipText = "";
			for(var i =0; i < response.areaNameList.length ; i++){
				skipText += "식대 - "+response.areaNameList[i] + "(" 
				+"하위10퍼: "+   (response.totalMealAreaLow10PercentileList[i] === null ? "없음" : response.totalMealAreaLow10PercentileList[i])
				+", 하위25퍼: "+ (response.totalMealAreaLow25PercentileList[i] === null ?  "없음" :  response.totalMealAreaLow25PercentileList[i])
				+", 중간값: "+   (response.totalMealAreaMedianPercentileList[i] === null ? "없음" : response.totalMealAreaMedianPercentileList[i]) 
				+", 상위25퍼값: "+(response.totalMealAreaHigh25PercentileList[i] === null ? "없음" : response.totalMealAreaHigh25PercentileList[i])
				+", 상위10퍼값: "+(response.totalMealAreaHigh10PercentileList[i] === null ? "없음" : response.totalMealAreaHigh10PercentileList[i])+ "),";
			}
			$("#marryGraph4").siblings('.skip').html(skipText);
			
			var skipText = "";
			for(var i =0; i < response.areaNameList.length ; i++){
				skipText += "최소보증인원 - "+response.areaNameList[i] + "(" 
				+"하위10퍼: "+   (response.totalMinimumAreaLow10PercentileList[i] === null ? "없음" : response.totalMinimumAreaLow10PercentileList[i])
				+", 하위25퍼: "+ (response.totalMinimumAreaLow25PercentileList[i] === null ?  "없음" :  response.totalMinimumAreaLow25PercentileList[i])
				+", 중간값: "+   (response.totalMinimumAreaMedianPercentileList[i] === null ? "없음" : response.totalMinimumAreaMedianPercentileList[i]) 
				+", 상위25퍼값: "+(response.totalMinimumAreaHigh25PercentileList[i] === null ? "없음" : response.totalMinimumAreaHigh25PercentileList[i])
				+", 상위10퍼값: "+(response.totalMinimumAreaHigh10PercentileList[i] === null ? "없음" : response.totalMinimumAreaHigh10PercentileList[i])+ "),";
			}
			$("#marryGraph5").siblings('.skip').html(skipText);
			
			tabChart('marryGraph1', response.weddingHallAreaLow10PercentileList, response.weddingHallAreaLow25PercentileList, response.weddingHallAreaMedianPercentileList, response.weddingHallAreaHigh25PercentileList, response.weddingHallAreaHigh10PercentileList);
			tabChart('marryGraph2', response.rentalAreaLow10PercentileList, response.rentalAreaLow25PercentileList, response.rentalAreaMedianPercentileList, response.rentalAreaHigh25PercentileList, response.rentalAreaHigh10PercentileList);
			tabChart('marryGraph3', response.mealPersonAreaLow10PercentileList, response.mealPersonAreaLow25PercentileList, response.mealPersonAreaMedianPercentileList, response.mealPersonAreaHigh25PercentileList, response.mealPersonAreaHigh10PercentileList);
			tabChart('marryGraph4', response.totalMealAreaLow10PercentileList, response.totalMealAreaLow25PercentileList, response.totalMealAreaMedianPercentileList, response.totalMealAreaHigh25PercentileList, response.totalMealAreaHigh10PercentileList);
			tabChart('marryGraph5', response.totalMinimumAreaLow10PercentileList, response.totalMinimumAreaLow25PercentileList, response.totalMinimumAreaMedianPercentileList, response.totalMinimumAreaHigh25PercentileList, response.totalMinimumAreaHigh10PercentileList);
			
//			
			function tabChart(container, data1, data2, data3, data4, data5){
				
				// 반응형
				window.addEventListener('resize', function() {
					chart.resize();
				});

				//  결혼서비스 예식장
				var chart = echarts.init(document.getElementById(container));
				
				const resizeObserver = new ResizeObserver(()=>{
					chart.resize();
				});
				
				resizeObserver.observe(document.getElementById(container));

				var option = {
					grid: {left: 5, right: 5, top: 15, bottom: 25, containLabel: true},

					tooltip: {
						trigger: 'item',
						textStyle: {color: '#000', fontSize: 13}
					},

					legend: {
						bottom: 0,
						itemGap: 10,
						textStyle: {color: '#000', fontSize: 14}
					},
					xAxis: {
						type: 'category',
						data: ['전국','수도권','비수도권','서울(강남)','서울(강남외)','부산','인천','대구','대전','광주','울산','경기도','충청도','전라도','경상도','강원도','제주도'],
						axisLabel: {
							fontSize: 13,
							color: '#666',
							lineHeight: 16,
							formatter: function (value) {
								const result = [];
								for (var i = 0; i < value.length; i++) {
									const current = value[i];
									const next = value[i + 1] || '';

									if (current === '(' && next) {
										result.push(current + next);
										i++;
									} else if (next === ')') {
										result.push(current + next);
										i++;
									} else {
										result.push(current);
									}
								}
								return result.join('\n'); // 줄바꿈
							}
						}
					},
					yAxis: {
						type: 'value',
						min: 0,
						splitNumber: 5,
					},
					series: [{
						name: '하위10%',
						type: 'line',
						data: data1,
						lineStyle:{color:'#008541'},
						itemStyle:{color:'#008541'},
						symbol: 'circle',
					},{
						name: '하위25%',
						type: 'line',
						data: data2,
						lineStyle:{color:'#2f7fed'},
						itemStyle:{color:'#2f7fed'},
						symbol: 'diamond',
					},{
						name: '중간가격',
						type: 'line',
						data: data3,
						lineStyle:{color:'#6e7974'},
						itemStyle:{color:'#6e7974'},
						symbol: 'rect',
					},{
						name: '상위25%',
						type: 'line',
						data: data4,
						lineStyle:{color:'#262694'},
						itemStyle:{color:'#262694'},
						symbol: 'triangle',
					},{
						name: '상위10%',
						type: 'line',
						data: data5,
						lineStyle:{color:'#fd5a1d'},
						itemStyle:{color:'#fd5a1d'},
						symbol: 'roundRect',
					}]
				};

				chart.setOption(option);
				
			}
			
			
			
			
		},error: function(xhr, status, error) {
		}
	});
	
	$.ajax({
		url: '/tprice/portal/wedding/getMainPageWeddingInfo2.do',
		type: 'GET',
		data: {},
		dataType: 'json',
		success: function(response){
			$(".chartLoading2").hide();
			var skipText = "";
			for(var i =0; i < response.areaNameList.length ; i++){
				skipText += response.areaNameList[i] + "(" 
				+"하위10퍼: "+   (response.resultList1[i] === null ? "없음" : response.resultList1[i])
				+", 하위25퍼: "+ (response.resultList2[i] === null ?  "없음": response.resultList2[i])
				+", 중간값: "+   (response.resultList3[i] === null ? "없음" : response.resultList3[i]) 
				+", 상위25퍼값: "+(response.resultList4[i] === null ? "없음" : response.resultList4[i])
				+", 상위10퍼값: "+(response.resultList5[i] === null ? "없음" : response.resultList5[i])+ "),";
			}
			$("#readyGraph1").siblings('.skip').html(skipText);
			
			tabChart('readyGraph1');
			
			function tabChart(container){
				
				// 반응형
				window.addEventListener('resize', function() {
					chart.resize();
				});

				//  결혼서비스 예식장
				var chart = echarts.init(document.getElementById(container));
				
				const resizeObserver = new ResizeObserver(()=>{
					chart.resize();
				});
				
				resizeObserver.observe(document.getElementById(container));

				var option = {
					grid: {left: 5, right: 5, top: 15, bottom: 25, containLabel: true},

					tooltip: {
						trigger: 'item',
						textStyle: {color: '#000', fontSize: 13}
					},

					legend: {
						bottom: 0,
						itemGap: 10,
						textStyle: {color: '#000', fontSize: 14}
					},
					xAxis: {
						type: 'category',
						data: ['전국','수도권','비수도권','서울(강남)','서울(강남외)','부산','인천','대구','대전','광주','울산','경기도','충청도','전라도','경상도','강원도','제주도'],
						axisLabel: {
							fontSize: 13,
							color: '#666',
							lineHeight: 16,
							formatter: function (value) {
								const result = [];
								for (var i = 0; i < value.length; i++) {
									const current = value[i];
									const next = value[i + 1] || '';

									if (current === '(' && next) {
										result.push(current + next);
										i++;
									} else if (next === ')') {
										result.push(current + next);
										i++;
									} else {
										result.push(current);
									}
								}
								return result.join('\n'); // 줄바꿈
							}
						}
					},
					yAxis: {
						type: 'value',
						min: 0,
						splitNumber: 5,
					},
					series: [{
						name: '하위10%',
						type: 'line',
						data: response.resultList1,
						lineStyle:{color:'#008541'},
						itemStyle:{color:'#008541'},
						symbol: 'circle',
					},{
						name: '하위25%',
						type: 'line',
						data: response.resultList2,
						lineStyle:{color:'#2f7fed'},
						itemStyle:{color:'#2f7fed'},
						symbol: 'diamond',
					},{
						name: '중간가격',
						type: 'line',
						data: response.resultList3,
						lineStyle:{color:'#6e7974'},
						itemStyle:{color:'#6e7974'},
						symbol: 'rect',
					},{
						name: '상위25%',
						type: 'line',
						data: response.resultList4,
						lineStyle:{color:'#262694'},
						itemStyle:{color:'#262694'},
						symbol: 'triangle',
					},{
						name: '상위10%',
						type: 'line',
						data: response.resultList5,
						lineStyle:{color:'#fd5a1d'},
						itemStyle:{color:'#fd5a1d'},
						symbol: 'roundRect',
					}]
				};

				chart.setOption(option);
				
			}
			
			
		}
		,error:function(xhr, status, error){
		}
	});

});