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

<template>
    <div
        class="recommend"
        :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
                                v-if="item.subLabel"
                                class="sub-label">{{item.subLabel}}</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="body">
            <GoodsList
                v-if="currentItem && currentItem.orderBy"
                v-bind="currentItem"
                :api-query="apiQuery"
            ></GoodsList>
            <Goods
                v-else-if="currentItem"
                v-bind="currentItem"
                :api-query="apiQuery"
            ></Goods>
            <div
                v-if="!currentItem||!currentItem.data||!currentItem.data.length"
                style="padding: 20px; text-align: center;"
            >{{ $$t('vmf_recommend_components_tips', '请在右侧编辑商品') }}</div>
        </div>
    </div>
</template>

<script>
import Goods from './Goods';
import GoodsList from './GoodsList';

export default {
    name: 'Recommend',
    components: { GoodsList, Goods },
    data() {
        return {};
    },
    props: {
        data: {
            type: Array,
            default: () => [],
        },
        activeId: {
            type: String,
            default: '',
        },
        color: {
            type: String,
            default: '',
        },
        borderRadius: {
            type: String,
            default: '',
        },
        apiQuery: {
            type: Object,
            default: () => ({}),
        },
        selectedColor: {
            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 { selectedColor } = this;
            const res = {};
            if (selectedColor) {
                res['--selected-color'] = selectedColor;
                res['--selected-background-color'] = selectedColor;
                res['--sub-label-color'] = '#fff';
            }
            return res;
        },
    },
};
</script>

<style lang="scss">
.recommend {
    > .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;
                        > .label,
                        > .sub-label {
                            white-space: nowrap;
                        }
                        > .label {
                            //font-size: $big * 100%;
                            font-size: 110%;
                            //font-weight: bold;
                        }
                        > .sub-label {
                            color: $gray6;
                            padding: 0 8px;
                            margin-top: 2px;
                            font-size: $little * 100%;
                            line-height: 1.6;
                            border-radius: 100vw;
                        }
                    }

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

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