<template>
    <div class="width100">
        <div class="width100 flex">
            <div
                @click="onClick(index)"
                class="item"
                v-for="(item, index) in source"
                :key="index"
                :style="{
          padding: paddingStyle,
          borderBottom:
            active === index ? activeStyle : '2px solid transparent',
          color: active === index ? activeColor : '#515a6e'
        }"
            >
                {{ item.label }}
            </div>
        </div>
        <template v-if="animated">
            <transition name="slide-fade">
                <component :is="source[active].components"></component>
            </transition>
        </template>
        <template v-else>
            <component :is="source[active].components"></component>
        </template>
    </div>
</template>

<script>
    export default {
        name: "go-components-tabs",
        props: {
            source: {
                type: Array,
                default: () => {
                    return [];
                }
            },
            activeColor: {
                type: String,
                default: "#1F85EC"
            },
            active: {
                type: Number,
                default: 0
            },
            animated: {
                type: Boolean,
                default: false
            },
            padding: {
                type: Array,
                default: () => {
                    return [8, 16];
                }
            }
        },
        computed: {
            activeStyle() {
                return `2px solid ${this.activeColor}`;
            },
            paddingStyle() {
                return `${this.padding[0]}px ${this.padding[1]}px`;
            }
        },
        methods: {
            onClick(idx) {
                let data = JSON.parse(JSON.stringify(this.source[this.active]));
                data.index = idx;
                this.$emit("onClick", data);
            }
        }
    };
</script>

<style scoped>
    .width100 {
        width: 100%;
    }

    .flex {
        display: flex;
    }

    .item {
        margin: 0 32px 0 0;
        text-align: center;
    }

    .slide-fade-enter-active {
        transition: all 0.3s ease;
    }

    .slide-fade-leave-active {
        transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */
    {
        transform: translateX(10px);
        opacity: 0;
    }
</style>
