<template>
<div :id="id">
    <div :data-link="id" class="itemHead" @click="selectTab(id)">{{title}} <Icon :icon="['fabt', 'chevron-down']" class="icon" :rotation="active ? 180 : null"/></div>
    <transition name="accordion" :before-enter="beforeEnter" :enter="enter" :before-leave="beforeLeave" :leave="leave">
        <div class="itemContent" v-show="active">
            <slot></slot>
        </div>
    </transition>
</div>
</template>

<script>
import { FontAwesomeIcon as Icon } from '@fortawesome/vue-fontawesome'
/**
* Child component of <a href="#accordion">Accordion</a> component
*/
export default {
	name: 'AccordionPanel',
	props: {
        /**
        * Title of the panel
        */
		title: {
			type: String,
			required: true
		},
        /**
        * Unique identifier of the panel.
        */
		id: {
			type: String,
			required: true
		}
	},
	components: {
		Icon
	},
	data() {
		return {
			active: false
		}
	},
	methods: {
		selectTab(e) {
			this.$parent.selectedTab = e
		},
		beforeEnter: function (el) {
			el.style.height = '0'
		},
		enter: function (el) {
			el.style.height = el.scrollHeight + 'px'
		},
		beforeLeave: function (el) {
			el.style.height = el.scrollHeight + 'px'
		},
		leave: function (el) {
			el.style.height = '0'
		}
	},
	watch: {
		'$parent.selectedTab'(n, o) {
			this.active = (n === this.id)
		}
	}
}
</script>
