<template>
	<div class="chart-wrap">
		<v-chart
			class="chart"
			:option="chartOption"
			ref="VChart"
			@click="onClick"
			@dblclick="onDblClick"
			@click.right="onRightClick"
			@legendselectchanged="onLegendSelectChanged"
			autoresize
		/>
	</div>
</template>

<script>
import VChart from 'vue-echarts';
import { mapState } from 'vuex';

export default {
	components: {
		VChart,
	},
	props: {
		parentPrgmId: {
			type: String,
			require: true,
		},
		widgetId: {
			type: String,
			require: true,
		},
		widgetData: {
			type: String,
			require: true,
		},
		modalId: {
			type: String,
			require: true,
		},
		modalDataKey: {
			type: String,
			require: true,
		},
		chartName: {
			type: String,
			require: true,
		},
		chartColor: {
			type: String,
			require: true,
		},
	},
	data() {
		return {
			legendSeletedList: {},
		};
	},
	computed: {
		...mapState({
			isDarkMode: 'isDarkMode',
			chartOption(state) {
				var dark_Col = [
					'#01AE6A',
					'#FFB046',
					'#F6637B',
					'#944FE9',
					'#4385E3',
					'#00AA8C',
					'#FF8808',
					'#EA5E9A',
					'#B742D9',
					'#6363DA',
					'#79B100',
					'#D66500',
					'#DC5ABC',
					'#764FD7',
					'#009DD1',
					'#3BAD43',
					'#D75E3D',
					'#CF4DCA',
					'#A148D9',
					'#5972DF',
				];
				var darkCol_1_5 = [
					'#01AE6A',
					'#089362',
					'#0F7959',
					'#165E51',
					'#19514D',
				];
				var darkCol_1_10 = [
					'#01AE6A',
					'#04A166',
					'#089362',
					'#0B865D',
					'#0F7959',
					'#126C55',
					'#165E51',
					'#19514D',
					'#1D4448',
					'#1F3D46',
				];
				var darkCol_2_5 = [
					'#FFB046',
					'#D39545',
					'#A77A44',
					'#7C5F42',
					'#665242',
				];
				var darkCol_2_10 = [
					'#FFB046',
					'#EAA345',
					'#D39545',
					'#BE8844',
					'#A77A44',
					'#926D43',
					'#7C5F42',
					'#665242',
					'#4C4141',
					'#453D41',
				];
				var darkCol_3_5 = [
					'#F6637B',
					'#CC576F',
					'#A24C63',
					'#784058',
					'#633B52',
				];
				var darkCol_3_10 = [
					'#F6637B',
					'#E15D75',
					'#CC576F',
					'#B75269',
					'#A24C63',
					'#8D465E',
					'#784058',
					'#633B52',
					'#4E354C',
					'#433249',
				];
				var darkCol_4_5 = [
					'#944FE9',
					'#7E47C7',
					'#6740A5',
					'#513884',
					'#463473',
				];
				var darkCol_4_10 = [
					'#944FE9',
					'#894BD8',
					'#7E47C7',
					'#7344B7',
					'#6740A5',
					'#5C3C95',
					'#513884',
					'#463473',
					'#3A3162',
					'#352F59',
				];
				var darkCol_5_5 = [
					'#4385E3',
					'#3D73C2',
					'#3760A2',
					'#304E81',
					'#2D4571',
				];
				var darkCol_5_10 = [
					'#4385E3',
					'#407CD3',
					'#3D73C2',
					'#3A6AB2',
					'#3760A2',
					'#345792',
					'#304E81',
					'#2D4571',
					'#2A3B61',
					'#293758',
				];
				var darkCol_dashGauge = [
					[0.125, '#009245'],
					[0.25, '#39b54a'],
					[0.375, '#d9e021'],
					[0.5, '#fcee21'],
					[0.625, '#fbb03b'],
					[0.75, '#f7931e'],
					[0.875, '#f15a24'],
					[1.0, '#ed1c24'],
				];
				var darkCol_dashUseStatus = ['#2fad35', '#fb8200', '#fb5a8b'];
				var darkCol_dashTodayUsageCost = ['#01ae6a', '#ffb046', '#f6637b'];
				var darkCol_dashEnrgUsage = ['#01ae6a', '#4385e3'];
				var darkCol_dashReadplcStatus = ['#01ae6a', '#ffb046', '#f6637b'];
				var lightCol_dashReadplcStatus = ['#3cc380', '#ffb13b', '#f98694'];

				var light_Col = [
					'#3CC380',
					'#FFB13B',
					'#F98694',
					'#CF74E5',
					'#6A9BF4',
					'#29BCA2',
					'#EC8D3B',
					'#FC749D',
					'#CF74E5',
					'#7E84FF',
					'#83BE01',
					'#D58B03',
					'#FF7E71',
					'#BE6DF0',
					'#3FAED2',
					'#5DBF63',
					'#D1886C',
					'#ED71B7',
					'#977EE6',
					'#7A8EE2',
				];
				var lightCol_1_5 = [
					'#3CC380',
					'#5BCD94',
					'#7BD6A9',
					'#99E0BD',
					'#B1E7CC',
				];
				var lightCol_1_10 = [
					'#3CC380',
					'#4BC88A',
					'#5BCD94',
					'#6BD19E',
					'#7BD6A9',
					'#8ADBB3',
					'#99E0BD',
					'#A9E5C7',
					'#B9E9D1',
					'#C9EEDC',
				];
				var lightCol_2_5 = [
					'#FFB13B',
					'#FFBE5B',
					'#FFCA7A',
					'#FFD699',
					'#FFE0B1',
				];
				var lightCol_2_10 = [
					'#FFB13B',
					'#FFB74A',
					'#FFBE5B',
					'#FFC46A',
					'#FFCA7A',
					'#FFD089',
					'#FFD699',
					'#FFDDA9',
					'#FFE3B8',
					'#FFE9C8',
				];
				var lightCol_3_5 = [
					'#F98694',
					'#FA99A5',
					'#FBADB6',
					'#FCC0C7',
					'#FDCFD4',
				];
				var lightCol_3_10 = [
					'#F98694',
					'#F98F9C',
					'#FA99A5',
					'#FAA3AE',
					'#FBADB6',
					'#FBB6BF',
					'#FCC0C7',
					'#FCCAD0',
					'#FDD3D8',
					'#FDDDE1',
				];
				var lightCol_4_5 = [
					'#CF74E5',
					'#D78AE9',
					'#DEA1ED',
					'#E6B7F1',
					'#ECC7F5',
				];
				var lightCol_4_10 = [
					'#CF74E5',
					'#D37FE7',
					'#D78AE9',
					'#DA95EB',
					'#DEA1ED',
					'#E2ACEF',
					'#E6B7F1',
					'#EAC2F4',
					'#EECDF6',
					'#F2D8F8',
				];
				var lightCol_5_5 = [
					'#6A9BF4',
					'#82ABF6',
					'#9ABBF8',
					'#B1CBF9',
					'#C3D7FB',
				];
				var lightCol_5_10 = [
					'#6A9BF4',
					'#76A3F5',
					'#82ABF6',
					'#8EB3F7',
					'#9ABBF8',
					'#A6C3F8',
					'#B1CBF9',
					'#BED3FA',
					'#C9DBFB',
					'#D6E3FC',
				];
				var lightCol_dashGauge = [
					[0.125, '#58c06f'],
					[0.25, '#7cd574'],
					[0.375, '#fbe462'],
					[0.5, '#ffd771'],
					[0.625, '#ffad7f'],
					[0.75, '#ff966e'],
					[0.875, '#ff706e'],
					[1.0, '#ff6689'],
				];
				var lightCol_dashUseStatus = ['#00c875', '#fdab3d', '#ff7b8b'];
				var lightCol_dashTodayUsageCost = ['#3cc380', '#cf74e5', '#ffb13b'];
				var lightCol_dashEnrgUsage = ['#ce83e0', '#78a3f3'];
				var lightCol_dashReadplcStatus = ['#3cc380', '#ffb13b', '#f98694'];

				var tmpChrtOp;
				if (this.widgetId || this.widgetData) {
					tmpChrtOp =
						state.pageData[this.parentPrgmId][this.widgetId][this.widgetData][
							this.chartName
						];
				} else if(this.modalId || this.modalDataKey) {
					tmpChrtOp = 
						state.pageData[this.parentPrgmId][this.modalId][this.modalDataKey][this.chartName];
				} else {
					tmpChrtOp = state.pageData[this.parentPrgmId][this.chartName];
				}

				if (this.chartColor != undefined) {
					if (this.isDarkMode) {
						tmpChrtOp.color = eval('darkCol_' + this.chartColor);
					} else {
						tmpChrtOp.color = eval('lightCol_' + this.chartColor);
					}
				} else {
					if (this.isDarkMode) {
						tmpChrtOp.color = dark_Col;
					} else {
						tmpChrtOp.color = light_Col;
					}
				}
				// console.log('ops11:',tmpChrtOp)
				return tmpChrtOp;
			},
		}),
	},
	created() {
		// console.log('wd data:',this.widgetData)
	},
	methods: {
		onClick(event, instance, ECharts) {
			// console.log('onClick : ', event);
			this.$emit('click', event);
		},
		onDblClick(event, instance, ECharts) {
			// console.log('onDblClick : ', event);
			this.$emit('dblclick', event);
		},
		onRightClick(event, instance, ECharts) {
			// console.log('onRightClick : ', event);
			this.$emit('rclick', event);
		},
		onLegendSelect(params) {
			const myChart = this.$refs.VChart;
			for (const key of params) {
				//차트 instance에 'legendSelect' action 전달
				myChart.dispatchAction({
					type: 'legendSelect',
					name: key,
				});
			}
		},
		onLegendUnSelect(params) {
			const myChart = this.$refs.VChart;
			for (const key of params) {
				//차트 instance에 'legendUnSelect' action 전달
				myChart.dispatchAction({
					type: 'legendUnSelect',
					name: key,
				});
			}
		},
		onLegendSelectChanged(params) {
			const obj = params.selected;
			this.legendSeletedList = obj;
		},
		onGetChangedLegendSeletedList() {
			return this.legendSeletedList;
		},
		onGetLegendSelectedList() {
			const myChart = this.$refs.VChart;
			return myChart.getOption().legend[0].selected;
		},
		clear() {
			const myChart = this.$refs.VChart;
			myChart.clear();
		},
	},
};
</script>
