<template>
  <div class="exposure">
    <div class="first-menu">
      <a-menu class="a-menu_container"
              theme="dark"
              v-model:selectedKeys="selectedKey"
              @click="selectMenu"
              mode="horizontal">
        <a-menu-item :key="String(index)"
                     v-for="(item, index) in list">
          {{ item.title}}
        </a-menu-item>
      </a-menu>
      <div class="menu_right">
        <!-- <slot></slot> -->
      </div>
    </div>
    <router-view />
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, Ref } from 'vue';
import { useRouter } from 'vue-router';
import { OperationTabMenu } from '@/services/go/commonService/interface';

export default defineComponent({
    name: 'MAIN',
    components: {},
    setup() {
        const router = useRouter();
        const list = inject('thirdMenuList') as Ref<OperationTabMenu[]>;
        const selectedKey = inject('index');
        // 切换路由
        function selectMenu(value: any) {
            const index = +value.key;
            console.log(router);

            router.push({ name: list.value[index].code });
        }
        return { selectMenu, list, selectedKey };
    },
});
</script>

<style lang="less">
.exposure {
    height: 100%;
}
.noBorderBottom {
    border-bottom: none;
}
.first-menu {
    width: 100%;
    height: 40px;
    border-bottom: 1px solid @m-blue0 !important;
    background-color: @m-black1;
    .a-menu_container {
        padding-top: 5px;
        .flex();
        height: 34px;
        line-height: 34px;
        .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>;
