<template>
  <n-scrollbar style="max-height: 100vh">
    <div class="title">
      {{ info.title }}
    </div>

    <div class="author">
      {{ info.nickname }}
    </div>

    <div class="cont editor">
      <QuillEditor theme="snow" :options="ops" v-html="info.cont"></QuillEditor>
    </div>

    <div class="time">--发表于 {{ formatTime(info.updated_at, "YYYY年MM月DD日hh时") }}</div>
  </n-scrollbar>
</template>

<script setup>
import { formatTime } from "@/util/index.js";
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { useRoute } from "vue-router";



const info = ref({ updated_at: new Date() });
const route = useRoute();
getInfo(route.params.id);


// options
const ops = ref({
  placeholder: "请输入内容",
  readOnly: true,
  modules: {
    toolbar: null,
  },
});


async function getInfo(id) {
  const res = await $http.art.queryArtInfo(id);
  info.value = res.data[0];
}


</script>

<style scoped lang="less">
.title {
  font-style: italic;
  font-size: 20px;
  text-align: center;
  padding: 10px 0;
}

.author {
  padding: 5px 20px;
  text-align: right;
  color: @purple;
}

.cont {
  width: 96%;
  margin: 0px auto;
  min-height: 80vh;
}

.time {
  font-style: italic;
  text-align: right;
  padding: 5px 30px;
}
</style>
