<template>
    <transition>
        <!-- <transition :name="aniName"> -->
        <div v-show="active"
             :class="panelClass"
             :id="`pane-${label}`"
             :style="{width: `${width}px`}"
             role="tabpanel"
             :aria-hidden="!active"
             :aria-labelledby="`tab-${label}`">
            <slot />
        </div>
    </transition>
</template>

<script>
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-tabs-panel`,
    mixins: [prefixMixins],
    inject: {
        jddTabs: {
            default: null
        }
    },
    props: {
        label: String
    },
    data() {
        return {
            aniName: 'ani-slide-left',
            index: null
        };
    },
    computed: {
        panelClass() {
            let clsNames = [`${prefix}-tabs-panel`];
            return clsNames;
        },
        active() {
            if (this.index === this.nextIndex) {
                if (this.nextIndex > this.prevIndex) {
                    this.aniName = 'ani-slide-left';
                } else {
                    this.aniName = 'ani-slide-right';
                }
            } else if (this.index === this.prevIndex) {
                if (this.nextIndex > this.prevIndex) {
                    this.aniName = 'ani-slide-right';
                } else {
                    this.aniName = 'ani-slide-left';
                }
            }
            return this.label === this.jddTabs.model;
        },
        nextIndex() {
            return this.jddTabs.nextIndex;
        },
        prevIndex() {
            return this.jddTabs.prevIndex;
        },
        width() {
            return this.jddTabs.itemWidth;
        }
    },
    mounted() {
        this.jddTabs.addPanel(this);
    },
    destroyed() {
        this.jddTabs.removePanel(this);
    }
};
</script>