<template>
  <el-drawer
    title="目录"
    v-model="visible"
    direction="ltr"
    size="30%"
    :before-close="close"
    :destroy-on-close="true"
    :show-close="true"
    :wrapperClosable="true"
  >
    <BookMarks :bookmarks="bookmarks" @goToPage="goToPage" />
  </el-drawer>
</template>
<script lang="ts" setup>
/* props */
const props = defineProps({
  bookmarks: {
    type: Array,
    default: () => [],
  },
  currentPage: {
    type: Number,
    default: 0,
  },
});
/* emit */
const $emit = defineEmits(["goToPage"]);
/* data */
const visible = ref(false);
/* computed */
/* methods */
function close() {
  visible.value = false;
}

function goToPage(pageNum) {
  $emit("goToPage", pageNum);
  close();
}

function show() {
  visible.value = true;
}

defineExpose({
  show,
});
</script>
<style lang="scss" scoped></style>
