<template>
  <a-drawer
    v-model:visible="visible"
    class="custom-class"
    title="公告详情"
    placement="right"
    width="80%"
  >
    <div class="article-container">
      <div class="title">
        <span>{{ vdata.noticeDate.title }}</span>
      </div>
      <!-- <div class="subtitle">
        <span>
          {{ vdata.noticeDate.subtitle }}
        </span>
      </div> -->
      <div class="author">
        <span class="auther-text">
          作者：{{ vdata.noticeDate.publisher }}
        </span>
        <span>
          时间：{{ vdata.noticeDate.createdAt }}
        </span>
      </div>
      <div class="content" v-html="vdata.noticeDate.content" />
    </div>
  </a-drawer>
</template>
<script lang="ts" setup>
import { defineComponent,onMounted,reactive,ref } from 'vue'
import { API_URL_NOTICELIST, req } from '@/api/manage'
const vdata = reactive({
  noticeList:[],
  noticeDate:{} as any
})
const visible = ref<boolean>(false)
const showDrawer = (articleId:string) =>  {
  req.getById(API_URL_NOTICELIST,articleId).then(res =>{
      vdata.noticeDate = res
      visible.value = true
    })   
}
defineExpose({
  showDrawer
})
</script>
<style lang="less" scoped>
:deep(.ant-list-pagination){
  margin-bottom: 10px;
  margin-right: 20px;
}

.article-container{
  max-width: 100%;
  width: 800px;
  margin: 0 auto;
  padding: 26px 6px 6px;

}
.title{
  height: 50px;
  line-height: 1.75;
  font-size: 30px;
  font-weight: 700;
   letter-spacing:3px;
   margin-bottom: 15px;
}
.subtitle{
  box-sizing: border-box;
  width: 400px;
  font-size: 15px;
}
.author{
  width: 400px;
  color: #969696;
  margin-bottom: 15px;
  .auther-text{
    margin-right: 20px;
  }
}
.content{
  margin: 0 auto;
  margin-top: 45px;
  line-height: 1.5;
  
}
</style>