<template>
  <div class="h-full flex flex-col bg-white p-[15px] pt-0">
    <div class="flex items-center justify-between p-x-[15px] py-[15px]">
      <div class="flex items-center justify-center">
        <n-button text class="text-lg mr-2" @click="router.back()">
          <template #icon>
            <div class="i-icon-park-outline-left" />
          </template>
        </n-button>
        <div class="text-sm font-bold color-[#333333]">
          <span>编辑书籍</span>
        </div>
      </div>
      <div>
        <n-button type="primary" round :loading="submmitLoading" :disabled="submmitLoading" @click="submmit()">
          <template #icon>
            <div class="i-solar-check-circle-linear" />
          </template>
          保存
        </n-button>
      </div>
    </div>
    <n-divider class="!my-0" />
    <div class="flex flex-col flex-1 min-h-0 pt-[15px]">
      <div class="box-border flex flex-1 flex-row w-full h-full min-h-0 px-[15px]">
        <!-- 目录 -->
        <left-tree @switchBookPage="switchBookPage" />
        <!-- 内容 -->
        <middle-book :currBookPage="currBookPage" />
        <!-- 题目 -->
        <right-topic-list :currBookPage="currBookPage" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { useMessage, NButton, NDivider } from 'naive-ui';
import LeftTree from './modules/left-tree/left-tree.vue';
import RightTopicList from './modules/right-topic/right-topic-list.vue';
import MiddleBook from './modules/middle-book/middle-book.vue';
import type { CurrBookPageAllInfo } from './types';
import { usePageLayoutSubmit } from './util';

const router = useRouter();
const message = useMessage();

const currBookPage = ref<CurrBookPageAllInfo | undefined>();

/** 切换页面 */
function switchBookPage(data: CurrBookPageAllInfo) {
  currBookPage.value = data;
}

const { pageLayoutSubmit, submmitLoading } = usePageLayoutSubmit();

async function submmit() {
  try {
    submmitLoading.value = true;
    await pageLayoutSubmit(currBookPage.value!);
    submmitLoading.value = false;
    message.success('保存成功');
  } catch (error: any) {
    submmitLoading.value = false;
    message.error(error.msg || '保存失败');
  }
}
</script>

<style scoped>
/* 使用 UnoCSS 类替代 SCSS */
</style>
