<template>
  <div class="manual-edit">
    <div class="group-title">手册信息</div>
    <ManualForm :form-data="formData" />
    <div class="group-title">手册目录</div>
    <ManualContents :form-id="formId" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch, toRaw, onMounted } from 'vue';
import ManualForm from "./components/manual-form.vue";
import ManualContents from "./components/manual-contents.vue";
import { useRouter, useRoute } from 'vue-router';
import { getManualInfoApi } from '@/apis/manual';


export default defineComponent({
  name: 'manual-edit',
  components: { ManualForm, ManualContents, },
  setup() {
    const route = useRoute();
    const formId = ref();
    const formData = ref();

    onMounted(() => {
      // getManualInfo();
    });

    const getManualInfo = async () => {
      if (route.query && route.query.id) {
        formId.value = Number(route.query.id);
        const data = await getManualInfoApi(route.query.id as string);
        formData.value = data;
      } else if (route.query && route.query.classify) {
        formData.value = { classify: Number(route.query.classify) };
      }
    };

    watch(() => route.query, () => getManualInfo(), { immediate: true });

    return { formId, formData };
  }
});
</script>
<style lang="less" scoped>
  .manual-edit {
    padding: 20px;
    overflow: auto;
    .group-title {
      font-weight: 700;
      padding-left: 6px;
      font-size: 15px;
      border-left: 6px solid #10a6b4;
      margin-bottom: 20px;
    }
  }
</style>
