<template>
    <div class="thirdMenu">
        <a-tabs v-model:activeKey="current" @change="menuClick">
            <a-tab-pane :key="String(index)" v-for="(item, index) in list" :tab="item[value]"></a-tab-pane>
        </a-tabs>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType, watchEffect } from 'vue';

interface Key {
    [propName: string]: string;
}

export default defineComponent({
    name: 'third-menu',
    props: {
        list: {
            default: [],
            type: Object as PropType<Key[]>,
        },
        value: {
            // 需要绑定的值得 key
            default: 'lable',
            type: String,
        },
        selectedKey: {
            default: '0',
            type: String,
        },
    },
    components: {},
    setup(props, context) {
        const current = ref<string>('1');
        watchEffect(() => {
            current.value = props.selectedKey.toString();
        });
        function menuClick(value: string) {
            const index = +value;
            const item = props.list[index];
            context.emit('selectMenu', +value, item);
        }
        return {
            current,
            menuClick,
        };
    },
});
</script>

<style lang="less">
.noBorderBottom {
    border-bottom: none;
}
.thirdMenu {
    width: 100%;
    height: 28px;
    padding-bottom: 2px;
    background-color: @m-black5;
    z-index: 2;
    .ant-tabs {
        line-height: 26px;
        .flex;
        .ant-tabs-bar {
            margin-bottom: 0;
            border-bottom: 0;
            .ant-tabs-nav-container {
                margin-bottom: 0;
                line-height: 100%;
                .ant-tabs-nav-wrap {
                    margin-bottom: 0;
                    .ant-tabs-nav-scroll {
                        .ant-tabs-nav {
                            .ant-tabs-tab {
                                min-width: 121px;
                                height: 26px;
                                line-height: 26px;
                                text-align: center;
                                color: @m-grey1;
                                padding: 0 20px;
                                margin: 0;
                                background: @m-tabbg center center no-repeat;
                                background-size: cover;
                            }
                            .ant-tabs-tab-active.ant-tabs-tab {
                                color: @m-white0;
                                background: @m-tabbg-active center center no-repeat;
                                background-size: cover;
                                z-index: 2;
                            }
                            .ant-tabs-tab + .ant-tabs-tab {
                                margin-left: -14px;
                            }
                            .ant-tabs-ink-bar {
                                width: 0px !important;
                            }
                        }
                    }
                }
            }
        }
    }
}
.layout-bottom {
    .thirdMenu {
        .position(absolute, auto, 0, 0, 0);
        z-index: 2;
    }
}
</style
>;
