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

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

    <div class="cont">
      <Editor v-model="info.cont" :defaultConfig="editorConfig" />
    </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 { Editor } from "@wangeditor/editor-for-vue";

const editorConfig = { readOnly: true };
const info = ref({updated_at:new Date()});

const props = defineProps({
  id: {
    type: [String,Number],
    default: "",
  },
});

getInfo(props.id);
async function getInfo(id) {
  const res = await $http.art.queryArtInfo(id);
  // console.log("**********", res);
  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: 500px;
}

.time {
  font-style: italic;
  text-align: right;
  padding: 5px 30px;
}
:deep(#w-e-element-3) {
  margin: unset !important;
}
</style>
