<template>
<dl class="pageDrop" :id="id" v-on-clickaway="away">
    <dt @click="open = !open" :class="{'open': open}">{{showText}} <Icon class="icon" :icon="['fabt', 'chevron-down']" :rotation="open ? 180 : null"/></dt>
    <dd v-show="open">
        <ul>
            <li v-for="(l, idx) in splitRows" @click="selectPage(l)" :key="idx">{{ $t('btgsvue.pageCtrlText3', {val: l})}}</li>
        </ul>
    </dd>
</dl>
</template>

<script>
import { mixin as clickaway } from 'vue-clickaway'
import { FontAwesomeIcon as Icon } from '@fortawesome/vue-fontawesome'
/**
* Displays the option to control the number of rows to be displayed per page in the data table.
*/
export default {
	name: 'PageControl',
	mixins: [clickaway],
	components: {
		Icon
	},
	props: {
        /**
        * Unique identifier
        */
		id: {
			type: String,
			required: true
		},
        /**
        * Number of rows
        */
		rows: {
			default: '5,10,20',
			type: String
		},
        /**
        * Default rows
        */
		default: {
			default: '10',
			type: String
		}
	},
	data() {
		return {
			showText: '',
			splitRows: [],
			open: false
		}
	},
	methods: {
		away() {
			this.open = false
		},
		selectPage(num) {
			if (num === 'ALL') {
				this.showText = this.$t('btgsvue.pageCtrlText1')
			} else {
				this.showText = this.$t('btgsvue.pageCtrlText2', { val: num })
			}
			this.$emit('change', num)
			this.open = false
		}
	},
	beforeMount() {
		this.splitRows = this.rows.split(',')
	},
	mounted() {
		this.selectPage(this.default)
	}
}
</script>
