<template>
    <div>
        <div v-for="(item,index) in panels"
             :key="index"
             :class="[tabNavClass,{'is-active': item.label===active}]"
             @click="clickHandle($event, item,index)">
            {{ item.label }}
        </div>
        <p :class="`${prefix}-tabs-nav-bar`"
           :style="barStyle" />
    </div>
</template>

<script>
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-tabs-nav`,
    mixins: [prefixMixins],
    props: {
        panels: Array,
        position: String,
        active: String
    },
    data() {
        return {
            barStyle: {}
        };
    },
    computed: {
        tabNavClass() {
            let clsNames = `${prefix}-tabs-nav`;
            return clsNames;
        }
    },
    mounted() {
        this.$nextTick(() => {
            let activedTab = this.$el.querySelector('.is-active');
            if (activedTab) {
                this.barStyle = this.getBarStyle(activedTab);
            }
        });
    },
    methods: {
        clickHandle(evt, item, index) {
            this.$emit('click', item, index, this);
            this.barStyle = this.getBarStyle(evt.target);
        },
        getBarStyle(el) {
            let rect = el.getBoundingClientRect();
            let style = {};
            switch (this.position) {
                case 'top':
                    style.bottom = '-1px';
                    style.height = '2px';
                    style.width = `${rect.width}px`;
                    style.left = `${el.offsetLeft}px`;
                    break;
                case 'bottom':
                    style.top = '-1px';
                    style.height = '2px';
                    style.width = `${rect.width}px`;
                    style.left = `${el.offsetLeft}px`;
                    break;
                case 'left':
                    style.right = '-1px';
                    style.width = '2px';
                    style.height = `${rect.height}px`;
                    style.top = `${el.offsetTop}px`;
                    break;
                case 'right':
                    style.left = '-1px';
                    style.width = '2px';
                    style.height = `${rect.height}px`;
                    style.top = `${el.offsetTop}px`;
                    break;
            }
            return style;
        }
    }
};
</script>