<template>

  <!-- 主体部分 -->
  <div class="xl:w-screen-xl m-auto py-4 mt-12 px-4 sm:px-0 sm:mt-2">
    <el-page-header :icon="ArrowLeft" @back="goBack">
      <template #content>
        <span class="text-large font-600"> {{ page.title }} </span>
      </template>
      <div class="content-wrapper mt-5">
        <!-- 左侧二级分类导航 -->
        <div v-if="category.length > 0" class="category-sidebar">
          <div class="category-header">
            <span class="category-title">分类导航</span>
          </div>
          <div class="category-list">
            <div
              v-for="(item, index) in category"
              :key="index"
              class="category-item"
              :class="{ 'active': currentCategoryId === item.navigationId }"
              @click="switchCategory(item)"
            >
              <span class="category-name">{{ item.title }}</span>
              <el-icon v-if="currentCategoryId === item.navigationId" class="active-icon">
                <Check />
              </el-icon>
            </div>
          </div>
        </div>

        <!-- 右侧内容区域 -->
        <div class="section-content" :class="{ 'with-sidebar': category.length > 0 }">
          <div class="news-list">
            <div v-for="(item, index) in list" :key="index" class="news-item">
              <a :href="`/detail/${item.articleId}`" class="news-link">
                <span class="news-title">{{ item.title }}</span>
                <span class="news-date">{{ dayjs(item.createTime).format('YYYY-MM-DD') }}</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </el-page-header>
    <Pagination :pageSize="where.limit" :total="total" @done="search"/>
  </div>
</template>
<script setup lang="ts">
import {ArrowLeft, Check} from '@element-plus/icons-vue'
import {useLayout, usePage} from "~/composables/configState";
import type {CmsNavigation} from "~/api/cms/cmsNavigation/model";
import type {CmsArticle, CmsArticleParam} from "~/api/cms/cmsArticle/model";
import {getNavIdByParamsId} from "~/utils/common";
import dayjs from "dayjs";
import {getCmsNavigation, listCmsNavigation} from "~/api/cms/cmsNavigation";
import {pageCmsArticle} from "~/api/cms/cmsArticle";

const route = useRoute();
const router = useRouter();
const navId = ref();
const list = ref<CmsArticle[]>([]);
const i18n = useI18n();
const category = ref<CmsNavigation[]>([]);
const total = ref<number>(0);
const currentCategoryId = ref<number | undefined>();

// 获取状态
const page = usePage();
const layout = useLayout();

// 搜索表单
const where = reactive<CmsArticleParam>({
  keywords: '',
  page: 1,
  limit: 12,
  status: 0,
  parentId: undefined,
  categoryId: undefined,
  lang: i18n.locale.value
});

// 加载页面数据
const reload = async () => {
  getCmsNavigation(navId.value).then(data => {
    // 获取栏目信息
    page.value = data
    layout.value.banner = data.banner;

    // 设置页面标题
    useSeoMeta({
      description: data.comments || data.title,
      keywords: data.title,
      titleTemplate: `${data?.title}` + ' - %s',
    })

    // 二级栏目分类
    listCmsNavigation({
      parentId: data.parentId == 0 ? data.navigationId : data.parentId
    }).then(categoryData => {
      category.value = categoryData;

      // 设置当前选中的分类ID
      if (data.parentId == 0 && category.value.length > 0) {
        where.parentId = data.navigationId;
        currentCategoryId.value = undefined; // 显示所有子分类的文章
      } else {
        where.categoryId = data.navigationId;
        currentCategoryId.value = data.navigationId;
      }

      // 加载文章列表
      loadArticles();
    })
  }).catch(err => {
    console.log(err, '加载失败...')
  })
}

// 加载文章列表
const loadArticles = () => {
  pageCmsArticle(where).then(response => {
    if (response) {
      total.value = response?.count;
      list.value = response?.list;
    }
  })
}

// 切换分类
const switchCategory = (categoryItem: CmsNavigation) => {
  currentCategoryId.value = categoryItem.navigationId;

  // 重置搜索条件
  where.page = 1;
  where.parentId = undefined;
  where.categoryId = categoryItem.navigationId;

  // 重新加载文章列表
  loadArticles();
}

const goBack = () => {
  router.back(); // 返回上一页
}

/**
 * 搜索
 * @param data
 */
const search = (data: CmsArticleParam) => {
  where.page = data.page;
  reload();
}

watch(
  () => route.params.id,
  (id) => {
    navId.value = getNavIdByParamsId(id);
    reload();
  },
  {immediate: true}
);

</script>

<style scoped lang="scss">

.content-wrapper {
  display: flex;
  gap: 20px;
  min-height: 400px;
}

.category-sidebar {
  width: 200px;
  background: #f8f9fa;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  height: fit-content;

  .category-header {
    background: #1b850c;
    color: white;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 14px;

    .category-title {
      display: block;
    }
  }

  .category-list {
    padding: 8px 0;
  }

  .category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid #e9ecef;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background-color: #e8f5e8;
      color: #1b850c;
    }

    &.active {
      background-color: #1b850c;
      color: white;

      .category-name {
        font-weight: 600;
      }
    }

    .category-name {
      font-size: 14px;
      flex: 1;
    }

    .active-icon {
      font-size: 16px;
      margin-left: 8px;
    }
  }
}

.section-content {
  flex: 1;
  padding: 16px 20px;
  overflow: hidden;

  &.with-sidebar {
    padding-left: 0;
  }
}

.news-list {
  height: 100%;
  overflow: hidden;
}

.news-item {
  margin-bottom: 12px;

  &:last-child {
    margin-bottom: 0;
  }
}

.news-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s ease;

  &:hover {
    color: #1b850c;
    background-color: rgba(27, 133, 12, 0.05);
    padding-left: 8px;
    border-radius: 4px;
    border-bottom-color: transparent;
  }
}

.news-title {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
}

.news-date {
  font-size: 12px;
  color: #999;
  white-space: nowrap;
}

// 响应式设计
@media (max-width: 768px) {
  .content-wrapper {
    flex-direction: column;
    gap: 16px;
  }

  .category-sidebar {
    width: 100%;

    .category-list {
      display: flex;
      overflow-x: auto;
      padding: 8px;
      gap: 8px;

      .category-item {
        white-space: nowrap;
        border: 1px solid #e9ecef;
        border-radius: 20px;
        padding: 8px 16px;
        border-bottom: 1px solid #e9ecef;
        min-width: fit-content;

        &.active {
          border-color: #1b850c;
        }
      }
    }
  }

  .section-content.with-sidebar {
    padding-left: 20px;
  }
}
</style>
