<template>
    <Navbar/>
    <!-- <Alert/> -->
    <IFrame :frameUrl="noteUrl" :frameDoc="noteDoc"/>
</template>

<script setup lang='ts'>
import { computed, onMounted, ref, watch } from "vue"
import IFrame from '@/components/utils/IFrame.vue'
import Navbar from "@/components/Navbar.vue";
import Alert from '@/components/utils/Alert.vue'
import FetchWrapper from "@/components/utils/FetchWapper";

import { file_api } from '@/router/config.json';

const props = defineProps(['note_name', 'token'])
let isShow = ref(true)
const noteUrl = ref()
const noteDoc = ref()


onMounted(() => {
  FetchWrapper.fetch(`${file_api.root_url}/${file_api.notes.url}/${props.note_name}?type=${file_api.notes.type}`,
        {
            timeout: 3000,
            headers: {
                'Content-Type': 'text/html',
            },
        })
    .then(response => {
      if (!response.ok) {
        // throw new Error(`HTTP error! status: ${response.status}`);
        // noteUrl.value = '/.notes/' + props.note_name + '.html';
        return null;
      }
      return response.text();
    })
    .then(htmlText => {
      noteUrl.value = null;
      noteDoc.value = htmlText;
    })
});

let msg = ref('msg')
let btnTxt = ref('btnTxt')
</script>

<style scoped>
</style>