<template>
  <div class="category-detail-layout">
    <Head>
      <Title>{{ selectedCategory.title }}</Title>
      <Meta type="keywords" :content="siteConfig.keywords"/>
      <Meta type="description" :content="siteConfig.description"/>
    </Head>
    <header>
      <WebHeader/>
      <Categories :categories="categories"/>
    </header>
    <main>
      <!-- 修改el语言为中文 -->
      <el-config-provider :locale="zhCn">
        <div class="content-wrap category-detail-wrap">
          <!-- 页面面包屑 -->
          <PageBreadCrumb :data="breadcrumbs"/>
          <div class="detail-wrap__body">
            <!-- 栏目树 -->
            <div class="detail-wrap__categories">
              <CategoryTree :data="subCategories" :selected="selectedCategory.uid"/>
            </div>
            <!-- 主要内容 -->
            <div class="detail-wrap__content">
              <slot></slot>
            </div>
          </div>
        </div>
      </el-config-provider>
    </main>
    <footer>
      <WebFooter/>
    </footer>
  </div>
</template>

<script>
import WebHeader from '@/components/layout/WebHeader'
import WebFooter from '@/components/layout/WebFooter'
import Categories from '@/components/layout/Categories'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import CategoryTree from '@/components/cms/CategoryTree';
import PageBreadCrumb from '@/components/common/PageBreadCrumb'

export default {
  components: { Categories, WebFooter, WebHeader, CategoryTree, PageBreadCrumb},
  props: {
    // 栏目树
    categories: {
      required: true
    },
    // 子栏目树
    subCategories: {
      required: true
    },
    // 选中的子栏目
    selectedCategory: {
      required: true
    },
    // 面包屑
    breadcrumbs: {
      required: true
    }
  },
  data () {
    return {
      zhCn,
      siteConfig: {
        title: import.meta.env.VITE_SITE_TITLE,
        keywords: import.meta.env.VITE_SEO_KEYWORDS,
        description: import.meta.env.VITE_SEO_DESCRIPTION
      }
    }
  }
}
</script>
<style scoped lang="scss">
// 栏目详情
.category-detail-wrap {
  background-color: #fff;
  padding: 20px;
  .detail-wrap__body {
    margin-top: 10px;
    display: flex;
    // 栏目树
    .detail-wrap__categories {
      height: auto;
      width: 275px;
      flex-shrink: 0;
      align-self: flex-start;
      position: sticky;
      top: 20px;
    }
    // 内容
    .detail-wrap__content {
      flex-grow: 1;
      padding: 10px 30px;
      overflow: hidden;
      & > h2 {
        font-size: var(--font-size-large);
        margin: 0;
        color: var(--primary-color);
        font-weight: normal;
      }
    }
  }
}
</style>
