<script setup lang="ts">
import { type PropType, computed } from "vue";
import type { Section } from "@/types/doc.types";

const props = defineProps({
  data: {
    type: Array as PropType<Section[]>,
    default() {
      return [];
    }
  }
});

const emits = defineEmits<{
  (e: "subSectionClick", page: number): void
}>();

const activeKey = computed(() => props.data.map((_, index) => index))

function onSectionClick(e: MouseEvent, index: number, subIndex?: number) {
  e.stopPropagation();
  const section = props.data[index];
  if (subIndex === undefined) {
    console.log('点击了第一级章节标题', section.title);
  } else {
    const subSection = section.children[subIndex];
    console.log('点击了第二级标题', subSection.title);
    emits("subSectionClick", subSection.page)
  }
}
</script>

<template>
  <a-collapse v-model:activeKey="activeKey">
    <a-collapse-panel
      v-for="(item, index) in data"
      :header="item.title"
      :key="index"
      @click="onSectionClick($event, index)"
    >
      <div v-for="(subSection, subIndex) in item.children" :key="index+'-'+subIndex" class="sub-section">
        <a href="javascript:void(0)" @click="onSectionClick($event, index, subIndex)">{{ subSection.title }}</a>
      </div>
    </a-collapse-panel>
  </a-collapse>
</template>

<style scoped lang="scss">
.sub-section {
  margin-top: 10px;
  line-height: 24px;

  &:first-child {
    margin-top: 0;
  }
}
</style>
