<template>
  <div class="ma-auto w-1440px">
    <SeoHead :title="tdkData?.title" :description="tdkData?.describe" :keywords="tdkData?.keywork" />
    <!-- 搜索 -->
    <KlSearch></KlSearch>
    <!-- 菜单 -->
    <KlMenuV2 />
    <!-- banner -->
    <div class="banner-container">
      <SideMenu class="side-menu" />
      <MainContent class="main-content" />
    </div>
    <!-- 学习方法推荐 -->
    <LearningRecommendations></LearningRecommendations>
    <!-- 推荐栏目 -->
    <RecommendedColumns></RecommendedColumns>
    <!-- 热门图纸 -->
    <PopularDrawings></PopularDrawings>
    <!-- 排行榜 -->
    <Leaderboard></Leaderboard>
  </div>
</template>

<script setup lang="ts">
  import KlSearch from '~/components/kl-search/index.vue'
  import KlMenuV2 from '~/components/kl-menus-v2/index.vue'
  import SideMenu from '~/pages/home/components/SideMenu.vue'
  import MainContent from '~/pages/home/components/MainContent.vue'
  import RecommendedColumns from '~/pages/home/components/RecommendedColumns.vue'
  import PopularDrawings from '~/pages/home/components/PopularDrawings.vue'
  import Leaderboard from '~/pages/home/components/Leaderboard.vue'
  import LearningRecommendations from '~/pages/home/components/LearningRecommendations.vue'
  import { getTDK } from '~/api/home/index'

  const { data: tdkData } = useAsyncData('get-tdk-home', async () => {
    const res = await getTDK()
    return res.data
  })
</script>

<style scoped>
  .banner-container {
    display: flex;
    height: 480px;
    background-color: #f0f2f5;
    border: 1px solid #eeeeee;
  }

  .side-menu {
    flex-shrink: 0;
  }

  .main-content {
    flex: 1;
  }
</style>
