<script lang="ts">
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import { faCaretDown, faCaretUp } from '@fortawesome/free-solid-svg-icons';
import { Options } from '@/components/models/tablemodels';
export default {
    components: {
        FontAwesomeIcon
    },
    props: {
        options: {
            type: Options,
            required: true,
            default: () => new Options()
        },
        dataHeader: {
            type: Object,
            required: true
        },
        id: {
            type: Number,
            required: true
        },
        startPosition: {
            type: Boolean,
            required: true
        }
    },
    mounted() {
    },
    data() {
        return {
            key: this.key,
            dataHeader: this.dataHeader,
            id: this.id,
            options: this.options,
            carretDown: faCaretDown,
            carretUp: faCaretUp,
        }
    },
    watch: {
        key(newVal: any) {
            this.key = newVal;
        },
    },
    methods: {
        sort(event: any, prop: any, index: number){
            this.$emit('sort', event, prop, index);
        }
    }
}
</script>

<template>
    <div v-if="options.ShowKey || !startPosition" 
        style="display: flex">
        {{ dataHeader.title }} 
        <div v-if="dataHeader.sort">
            <FontAwesomeIcon @click="sort($event, dataHeader, id)" :icon="carretDown"></FontAwesomeIcon>
        </div>
        <div v-else>
            <FontAwesomeIcon @click="sort($event, dataHeader, id)" :icon="carretUp"></FontAwesomeIcon>
        </div>
    </div>
    <div v-else-if="options.Active">
        {{ dataHeader.title }}
    </div>
    <div v-else>
        {{ dataHeader.title }}
    </div>
    
</template>