<template>
    <view :class="`easy-tab easy-tab-type-${type}`">
        <slot></slot>
    </view>
</template>

<script>
    export default {
        name: "easy-tab",
        props: {
            selected: {
                type: Number,
                default: 0
            },
            type: {
                type: String,
                default: 'card'
            }
        },
        data() {
            return {
            };
        },
        created() {
            this.items = [];
            this.current = this.selected;
        },
        mounted() {
            if (this.current < this.items.length && this.current >= 0) {
                this.items[this.current].select();
            }
        },
        methods: {
            /**
             * 选择
             * @param {number | object} item 
             */
            select(item) {
                if (typeof item === 'number') {
                    if (item < this.item.length && item >= 0) {
                        this.current = item;
                        // this.items[item].select();
                        this.$emit('change', item);
                    }
                } else if (typeof item === 'object') {
                    for (let i = 0; i < this.items.length; i++) {
                        if (this.items[i] === item) {
                            // this.items[i].select();
                            this.current = i;
                            this.$emit('change', {
                                before: this.current,
                                current: i
                            });
                        } else {
                            this.items[i].unSelect();
                        }
                    }
                }
            }
        }
    }
</script>

<style lang="scss">
    .easy-tab {
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 80upx;
        flex-shrink: 0;
    }
</style>