<template>
<div :id="id" v-show="active" :class="tabClass" :style="{'min-height': $parent.tabsHeight}">
    <slot></slot>
</div>
</template>

<script>
/**
* Child component of <a href="#tab">Tab</a> which generates the layout for the content
*/
export default {
	name: 'TabPane',
	props: {
		/**
		* Unique identifier
		*/
		id: {
			type: String,
			required: true
		},
		/**
		* Title of the Tab
		*/
		title: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			active: false
		}
	},
	computed: {
		tabClass() {
			let c = ['tab-content']
			if (this.$parent.type == 'dialog') {
				c.push('dialog')
			}
			if (this.$parent.type == 'vertical') {
				c.push('vertical')
			}
			c.push(this.$parent.align)
			return c.join(' ')
		}
	},
	mounted() {
		this.$parent.$emit('tabMod', this.id)
	},
	beforeDestroy() {
		this.$parent.$emit('tabMod', this.id)
	},
	watch: {
		'$parent.selectedTab'(n, o) {
			if (n == this.id) {
				this.active = true
			} else {
				this.active = false
			}
		},
		title(n, o) {
			this.$parent.$emit('titleChanged', this.id, n)
		}
	}
}
</script>
