import Component from '@ember/component';
import layout from '../templates/components/bp-chart';
import { isEmpty } from '@ember/utils';
import { A } from '@ember/array';
import echarts from 'echarts';
import $ from 'jquery';

export default Component.extend({
	layout,
	tagName: '',
	init() {
		this._super(...arguments);
		this.set('result', {});
		this.set('opts', {
			renderer: 'canvas' // canvas of svg
		});
	},
	/**
	 * radar value max value
	 * @property maxValue
	 * @type {number}
	 * @default 100
	 * @public
	 */
	maxValue: 100,
	/**
	 * chart's color
	 * @property radarColor
	 * @type {Array}
	 * @default null
	 * @public
	 */
	radarColor: A(['#3172E0', '#979797']),
	/**
	 * radar Data
	 * @property radarData
	 * @type {Array}
	 * @default
	 * @public
	 */
	radarData: A([
		{
			value: [0, 0, 0, 0, 0],
			name: '代表个人能力'
		},
		{
			value: [0, 0, 0, 0, 0],
			name: '团队平均能力'
		}
	]),
	/**
	 * chart's title
	 * @property title
	 * @type {string}
	 * @default ''
	 * @public
	 */
	title: '',
	/**
	 * 是否有legend
	 * @property hasLegend
	 * @type {boolean}
	 * @default true
	 * @public
	 */
	hasLegend: true,
	/**
	 * 定义每一项
	 * @property items
	 * @type {Array}
	 * @default  ['工作积极性', '产品知识','行为有效性', '区域管理能力','销售能力']
	 * @public
	 */
	items: A(['工作积极性', '产品知识', '行为有效性', '区域管理能力', '销售能力']),
	generateOption() {
		let { title, radarColor, hasLegend, radarData, maxValue, items } =
			this.getProperties('title', 'radarColor', 'hasLegend', 'radarData', 'maxValue', 'items'),
			legendData = null,
			legend = null,
			data = null,
			indicator = items.map(ele => {
				return { name: ele, max: maxValue };
			});

		if (radarData.length === 1) {
			radarColor = ['#C1C7D0'];
		}
		data = radarData.map((ele, index) => {
			return {
				value: ele.value,
				name: ele.name,
				areaStyle: {
					color: radarColor[index]
				}
			};
		});
		legendData = radarData.map(ele => {
			return { name: ele.name, icon: 'circle' };
		});
		legend = {
			show: hasLegend,
			x: 'center',
			bottom: '0',
			orient: 'vertical',
			textStyle: {
				fontSize: '14px',
				color: '#7A869A'
			},
			data: legendData
		};
		return {
			title: {
				text: title
			},
			grid: {
				left: 'center'
			},
			color: radarColor,
			tooltip: {},
			legend,
			radar: {
				radius: '65%',
				name: {
					textStyle: {
						color: '#7A869A',
						borderRadius: 3,
						padding: [0, 0]
					}
				},
				indicator,
				splitNumber: 5, //default
				axisLine: {
					lineStyle: {
						color: '#DFE1E6'
					}
				},
				splitLine: {
					lineStyle: {
						color: '#DFE1E6'
					}
				},
				splitArea: {
					areaStyle: {
						color: ['#fff', '#fff']
					}
				}
			},
			series: [{
				name: '',
				type: 'radar',
				data
			}]
		};
	},
	reGenerateChart(self, option) {
		const selector = `#${this.get('eid')}`,
			$el = $(selector),
			opts = this.get('opts'),
			echartInstance = echarts.getInstanceByDom($el[0]);

		if (isEmpty(echartInstance)) {
			self.set('result', option);
		} else {
			echartInstance.clear();
			if (!isEmpty(option)) {
				echartInstance.setOption(option, opts);
			} else {
				echartInstance.setOption({}, opts);
			}
		}
	},
	didInsertElement() {
		this._super(...arguments);
		let option = this.generateOption();

		this.reGenerateChart(this, option);
		// this.set('result', option);
	},
	didUpdateAttrs() {
		this._super(...arguments);
		let option = this.generateOption();

		this.reGenerateChart(this, option);
	}
});
