<template>
  <div class="news_detail_box">
    <div class="news_detail">
      <div class="content_box">
        <div class="back-button" @click="back()">
          <img src="@/assets/imgs/news/back.png" class="back" alt="返回图标" />
          <span>返回</span></div
        >
        <div class="article-header">
          <div class="header_title"
            ><h1 class="title">{{ dataObj.title }}</h1></div
          >
          <div class="meta">
            <span class="category">{{ dataObj.classify }}</span>
            <span class="separator">|</span>
            <span class="publish-time"
              >发布时间：<span>{{ formatTimestamp(dataObj.createTime) }}</span></span
            >
            <span class="publisher"
              >发布人：<span>{{ dataObj.creatorName }}({{ dataObj.deptName }})</span></span
            >
          </div>
          <div class="v_html" v-html="dataObj.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as PortalApi from '@/api/portal'
import * as NoticeApi from '@/api/system/notice'
import { useRoute, useRouter } from 'vue-router'
import dayjs from 'dayjs'

const route = useRoute() // 路由
const router = useRouter() // 路由

const dataObj = ref({})

const formatTimestamp = (timestamp) => {
  // 如果是秒级时间戳，转换为毫秒级
  const msTimestamp = String(timestamp).length === 10 ? timestamp * 1000 : timestamp
  return dayjs(msTimestamp).format('YYYY年M月D日 HH:mm:ss')
}

/** 查询列表 */
const getNoticeList = async (id) => {
  // loading.value = true
  try {
    const data = await PortalApi.getHomeNoticeDetail(id)
    dataObj.value = data
    // newsList.value = data.list
    // total.value = data.total
  } finally {
    // loading.value = false
  }
}
const back = () => {
  router.back()
}

/** 初始化 **/
onMounted(() => {
  if (!route.query.id) {
    message.error('详情 ID 不存在，无法获取详情')
    router.back()
    return
  }
  getNoticeList(route.query.id)
})
</script>

<style lang="less" scoped>
.news_detail_box {
  background: #f8fcff;
  border-radius: 8px;
  height: calc(100vh - 120px);
  overflow: auto;
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */

  .news_detail {
    display: flex;
    justify-content: center;
    padding: 20px;
    background: url('@/assets/imgs/news/news_detail_bg.png') no-repeat top center;
    background-size: 1680px 277px;

    .content_box {
      position: relative;
      display: flex;
      justify-content: center;
      width: 1280px;
      height: 999px;
      border-radius: 6px;
      background: #fff;
    }
    .back-button {
      position: absolute;
      top: 40px;
      left: 10px;
      width: 75px;
      height: 32px;
      font-size: 14px;
      color: #333;
      border: 1px solid #dcdcdc;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      .back {
        width: 7px;
        height: 12px;
        margin-right: 6px;
      }
    }
  }
}
.article-header {
  width: 1280px !important;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;

  .title {
    font-size: 32px;
    font-weight: bold;
    color: #000;
    margin: 10px 0 12px 0;
    line-height: 1.4;
    display: flex;
    justify-content: center;
    max-width: 1000px;
  }

  .meta {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #a3a3a3;
    // background: #7B7B7B;

    .category {
      // color: #595959;
    }

    .separator {
      margin: 0 12px;
      // color: #d9d9d9;
    }

    .publish-time,
    .publisher {
      span {
        color: #7b7b7b;
      }
      // margin-left: 8px;
    }
    .publisher {
      margin-left: 30px;
    }
  }
}
.header_title {
  display: flex;
  justify-content: center;
}
.v_html {
  width: 1280px !important;
}
</style>
