<template>
  <div :class="[prefixCls, 'flex full relative']">
    <div :class="`${prefixCls}-content  pt-24`">

      <el-breadcrumb style="position: absolute; top: 80px;left: 120px" :separator-icon="ArrowRight">
        <el-breadcrumb-item class="text-2xl" :to="{ path: '/inform' }">动态资讯</el-breadcrumb-item>
        <el-breadcrumb-item class="text-2xl">动态详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="text-center mb-8">
        <h3 class="mb-5 text-4xl font-bold">{{ content.title }}</h3>
        <div class="w-3/6 flex justify-between mx-auto text-xl font-bold" style="color: #666666">
          <span>发布时间：{{ dayjs(content.createtime * 1000).format('YYYY-MM-DD') }}</span>
          <span v-if="content.source">文章来源：{{ content.source }}</span>
        </div>
      </div>
      <HtmlPreview :content="content.content"/>
      <article-change-page :prevdata="prevdata" baseurl="/inform" :nextdata="nextdata"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
import {ArrowRight} from '@element-plus/icons-vue'

definePageMeta({
  name: '动态详情',
  hidden: true,
  headerHost: false,
  parentPath: '/inform',
  // @ts-ignore
  path: '/inform/:id'
})
useHead({
  title: '动态详情'
})
useAppStore().setBannerTitle("动态详情")

const {prefixCls} = useDesign('mai-wrap');
const route = useRoute()
const content = ref({})
const prevdata = ref()
const nextdata = ref()

async function getData() {
  const data = await useApi().informationApi.getInformationDetail(route.params.id as string)
  console.log('data.data.info')
  content.value = data.data.info;
  nextdata.value = data.data.next;
  prevdata.value = data.data.previous;
}

getData()
</script>

<style scoped lang="scss">
.change-page-wrap {
  width: 1145px;
  //width: fit-content;
  .change-btn {
    width: 551px;
    height: 157px;
    background: #FFFFFF;
    border-radius: 12px;
    border: 1px solid #D4D4D4;
    padding: 30px 37px;
    @apply cursor-pointer;
    &.page-prev {
      margin-right: 43px;
    }

    &.page-next {
      margin-left: auto;
    }

    &:hover {
      background-color: #022950;
      color: #fff;
    }
  }
}
</style>
