<template>
  <div class="first-menu">
    <a-menu class="a-menu_container"
            theme="dark"
            v-model:selectedKeys="current"
            @click="menuClick"
            mode="horizontal">
      <a-menu-item :key="String(index)"
                   v-for="(item, index) in list">{{ item[value]}}</a-menu-item>
    </a-menu>
    <div class="menu_right">
      <slot></slot>
    </div>
  </div>
</template>

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

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

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

<style lang="less">
.noBorderBottom {
    border-bottom: none;
}
.first-menu {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    background-color: @m-black1;
    .a-menu_container {
        padding-top: 5px;
        .flex();
        height: 40px;
        line-height: 34px;
        border-bottom: 1px solid @m-blue0 !important;
        .ant-menu-item {
            min-width: 120px;
            height: 34px;
            line-height: 34px;
            background: linear-gradient(0deg, #343d46 0%, #38444f 100%);
            margin-left: 3px;
            font-size: 16px;
            columns: @m-grey2;
            border-radius: 5px 5px 0px 0px;
            cursor: pointer;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            &:hover {
                .noBorderBottom;
            }
        }
        .ant-menu-item-active {
            .noBorderBottom;
        }
        .ant-menu-item-selected {
            .noBorderBottom;
            color: @m-white;
            background: linear-gradient(0deg, #3270d2 0%, #3a87f7 100%);
            &:hover {
                color: @m-white;
            }
        }
    }
}
</style>;
