<template>
    <div class="main flex flex-col">
        <Header></Header>
        <div class="flex-1 flex shrink-0" style="height:calc(100vh - 100px)">
            <div class="h-full w-[75px] border-r-[1px] border-r-[#e6e6e6] flex flex-col justify-around">
                <Menu @click="handleClick(item)" v-for="item in menus" :info="item" />
            </div>
            <div class=" flex-1 overflow-y-auto">
                <router-view />
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'

import { useI18n } from 'vue-i18n'
import Menu from './components/Menu.vue'
import Header from './components/Header.vue'

import menuCooker1 from '/imgs/menu-cooker1.png'
import menuCooker2 from '/imgs/menu-cooker2.png'
import menuCooker3 from '/imgs/menu-cooker3.png'
// import menuCooker3 from '/imgs/menu-cooker3.png'

import { useStoreI18n } from '@/hook/i18n'
const { t, locale } = useI18n()
const { $t } = useStoreI18n()
const menus = ref([
  {
    name: $t('sidebar.menu'),
    img: menuCooker1,
    key: 1,
    path: '/menu',
    slected: true,
  },
  {
    name: $t('sidebar.order'),
    img: menuCooker2,
    key: 2,
    path: '/order/orderList',
  },
  {
    name: $t('sidebar.goods'),
    img: menuCooker3,
    key: 4,
    path: '/goods',
  },
  {
    name: $t('sidebar.exit'),
    img: menuCooker3,
    key: 3,
    path: '/exit',
  },

])
function handleClick(m) {
  const newMenus = menus.value.map((i) => {
    i.key == m.key ? (i.slected = true) : (i.slected = false)
    return i
  })
  menus.value = newMenus
}
</script>
<style scoped lang="scss">
.main {
  width: 100%;
  height: 100vh;
  min-width: 1000px;
  overflow-y: hidden;
  .main-header {
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
    height: 102px;
    padding: 0 48px;

    .logo {
      width: 156px;
    }
  }
}
</style>
