<template>
  <nav-bar :title="title" :style="{ 'background-color':'#F7F7FA'}" />
  <div class=" px-5 py-8 overflow-hidden break-all">
    <p class=" text-base text-gray-800 font-semibold">{{ info.title }}</p>
    <p class=" text-xs text-gray-400 mt-5 ">发布时间：{{ $format(info.created_at, 'YYYY-MM-DD') }} <span v-if="title === '政策详情'" class="inline-block ml-8">作者：{{ info.writer }}</span> </p>
    <div class=" text-sm text-gray-800 text-justify mt-5" v-html="info.content"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import NavBar from "@/components/NavBar/index.vue"
import { getDetails, getPolicyDetails } from '@/service/NewsService/index'

export default defineComponent({
  components:{ NavBar },
  setup () {
    let info = ref({})
    let title = ref('')
    const route = useRoute()
    const request = route.query.type === 'news' ? getDetails : getPolicyDetails
    title.value = route.query.type === 'news' ? '新闻详情' : '政策详情'
    const getDetail = () => {
      const uuid = route.query.uuid as string || ''
      request(uuid).then(res => {
        info.value = res.data
      })
    }
    getDetail()
    return {
      info,
      title
    }
  }
})
</script>

<style scoped>

</style>