Vue.component('side-menu', {
	template: '<el-menu :background-color="color" text-color="#FFF" active-text-color="#FFF">' +
			'<el-submenu index="1" class="search-filter">' +
				'<template slot="title">' +
					'<span slot="title">{{measure.toUpperCase()}}</span>' +
				'</template>' +
				'<a :href="getLink.description" :style="getStyle.description">' +
					'<el-menu-item class="side-menu" index="1-1">Description</el-menu-item>' +
				'</a>' +
				'<a :href="getLink.add_info" :style="getStyle.add_info">' +
					'<el-menu-item class="side-menu" index="1-2">Additional Information</el-menu-item>' +
				'</a>' +
				'<a v-if="include.rationale" :href="getLink.rationale" :style="getStyle.rationale">' +
					'<el-menu-item class="side-menu" index="1-3">Rationale</el-menu-item>' +
				'</a>' +
				'<a v-if="include.faqs" :href="getLink.faqs" :style="getStyle.faqs">' +
					'<el-menu-item class="side-menu" index="1-4">FAQs</el-menu-item>' +
				'</a>' +
			'</el-submenu>' +
		'</el-menu>',
	props: {
		measure: '',
		color: String,
		current: '',
		include: {
			type: Object,
			default: function () {
				return {
					rationale: true,
					faqs: true
				};
			}
		}
	},
	methods: {
		_getLink: function (section) {
			if (section == 'description') {
				return '#' + this.measure;
			} else {
				return '#' + this.measure + '-' + section;
			}
		},
		_getStyle: function(section) {
			if (this.current == (this.measure + '-' + section)) {
				return {
					'color': 'white',
				}
			} else {
				return {
					'text-decoration': 'none'
				}
			}
		}
	},
	computed: {
		getLink: function () {
			return {
				description: this._getLink('description'),
				add_info: this._getLink('add-info'),
				rationale: this._getLink('rationale'),
				faqs: this._getLink('faqs')
			};
		},
		getStyle: function () {
			return {
				description: this._getStyle('description'),
				add_info: this._getStyle('add-info'),
				rationale: this._getStyle('rationale'),
				faqs: this._getStyle('faqs')
			};
		}
	}
});