<!-- Created by henian.xu on 2022/3/17. -->

<template>
    <div
        class="affix-tab"
        :style="styles"
    >
        <div
            class="header"
            :style="headerStyles">
            <div class="scroll-warp">
                <div class="inner">
                    <div
                        v-for="(item) in data"
                        :key="item.id"
                        :class="['item',{active:item.id === activeId}]"
                    >
                        <div class="inner">
                            <div class="label">{{item.label}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'AffixTab',
    data() {
        return {};
    },
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        activeId: {
            type: String,
            default: '',
        },
        color: {
            type: String,
            default: '',
        },
        borderRadius: {
            type: String,
            default: '',
        },
        backgroundColor: {
            type: String,
            default: '',
        },
        selectedBackgroundColor: {
            type: String,
            default: '',
        },
    },
    computed: {
        styles() {
            const res = {};
            const { color, borderRadius } = this;
            if (color) res.color = color;
            if (borderRadius) res.borderRadius = borderRadius;
            return res;
        },
        currentItem() {
            const { data, activeId } = this;
            let res = null;
            data.some(item => {
                const b = item.id === activeId;
                if (b) res = item;
                return b;
            });
            return res;
        },
        headerStyles() {
            const { backgroundColor, selectedBackgroundColor } = this;
            const res = {};
            if (backgroundColor) {
                res.backgroundColor = backgroundColor;
                res.color = '#fff';
            }
            if (selectedBackgroundColor) {
                res['--selected-background-color'] = selectedBackgroundColor;
                res['--selected-color'] = '#333';
            }
            return res;
        },
    },
};
</script>

<style lang="scss">
.affix-tab {
    > .header {
        //padding: $padding;
        > .scroll-warp {
            overflow-y: hidden;
            overflow-x: auto;
            @include beautify-scrollbar;
            > .inner {
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: stretch;

                > .item {
                    line-height: 1;
                    text-align: center;
                    padding: $padding 0;

                    > .inner {
                        padding: 0 $padding-small;
                        > .label,
                        > .sub-label {
                            white-space: nowrap;
                        }
                        > .label {
                            //font-size: $big * 100%;
                            font-size: 110%;
                            padding: $padding-small $padding;
                            border-radius: 100vw;
                        }
                        > .sub-label {
                            color: $gray6;
                            padding: 0 8px;
                            margin-top: 2px;
                            font-size: $little * 100%;
                            line-height: 1.6;
                            border-radius: 100vw;
                        }
                    }

                    &.active {
                        > .inner {
                            > .label {
                                background-color: var(--selected-background-color, transparent);
                                color: var(--selected-color, $color-red);
                                font-weight: bold;
                            }
                            > .sub-label {
                                background-color: #f00;
                                color: #fff;
                            }
                        }
                    }

                    + .item {
                        > .inner {
                            //border-left: 1px solid $color-border;
                        }
                    }
                }
            }
        }
    }
    > .body {
        //padding: $padding;
        //text-align: center;
    }
}
</style>
