<template>
    <view :class="`easy-tab-item${selected ? ' selected' : ''}`" @tap="select()">
        <view class="easy-tab-item-content">
            <slot></slot>
        </view>
    </view>
</template>

<script>
    export default {
        name: "easy-tab-item",
        data() {
            return {
                selected: false
            };
        },
        created() {
            this.root = this.getTab();
            this.root.items.push(this);
        },
        methods: {
            select() {
                this.selected = true;
                this.root.select(this);
            },

            unSelect() {
                this.selected = false;
            },

            getTab(name = 'easy-tab') {
                let parent = this.$parent;
                let parentName = parent.$options.name;
                while (parentName !== name) {
                    parent = parent.$parent;
                    if (!parent) return false;
                    parentName = parent.$options.name;
                }
                return parent;
            }
        }
    }
</script>

<style lang="scss">
    .easy-tab-type-card {
        .easy-tab-item {
            position: relative;
            display: inline-block;
            padding-top: 20upx;
            vertical-align: bottom;

            .easy-tab-item-content {
                position: relative;
                display: flex;
                height: 70upx;
                justify-content: center;
                align-items: center;
                color: #666666;
                background-color: #cccccc;
                border-width: 1upx 1upx 0 1upx;
                border-style: solid;
                border-color: #bbbbbb;
                border-radius: 15upx 15upx 0 0;
                padding: 0 20upx;
                box-shadow: 0 0 16upx rgba(0, 0, 0, 0.1);
            }
        }

        .easy-tab-item.selected {
            padding-top: 0upx;

            .easy-tab-item-content {
                height: 80upx;
                background-color: #ffffff;
                border: 1upx solid #dfdfdf;
            }
        }

        .easy-tab-item+.easy-tab-item {
            margin-left: 10upx;
        }
    }
    
    .easy-tab-type-line {
        .easy-tab-item {
            position: relative;
            display: inline-block;
            vertical-align: bottom;

            .easy-tab-item-content {
                position: relative;
                display: flex;
                height: 80upx;
                justify-content: center;
                align-items: center;
                color: #666666;
                border-bottom: 8upx solid transparent;
                padding: 0 20upx;
            }
        }

        .easy-tab-item.selected {
            padding-top: 0upx;

            .easy-tab-item-content {
                color: #3775f6;
                border-color: #3775f6;
            }
        }

        .easy-tab-item+.easy-tab-item {
            margin-left: 10upx;
        }
    }
</style>