<route lang="json5" type="page">
{
  layout: 'page',
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="flex flex-col h-screen">
    <Navbar
      title="详细信息"
      left-arrow
      @click-left="navigatorBack"
      safeAreaInsetTop
      :bordered="false"
      custom-class="bg-transparent! z-[99]"
    />
    <view class="flex-1 overflow-auto pb-safe">
      <view class="flex flex-col px-[32rpx]">
        <text class="font-semibold text-[28rpx] text-[#1F2329]">
          {{ newsDetail.title }}
        </text>
        <view
          class="mt-[24rpx] flex justify-between items-center text-[#8F959E] font-normal font-normal"
        >
          <text class="text-[22rpx]">{{ newsDetail.createTime }}</text>
          <text class="text-[24rpx]">来源:&nbsp;{{ newsDetail.author }}</text>
        </view>
      </view>
      <view class="w-full h-[1px] bg-[#E5E5E5] my-[16rpx]"></view>
      <view class="px-[32rpx]" v-html="newsDetail.detail"></view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useCityNewDetail, newsDetail } from '@/hooks/useCityInfoHook'

import Navbar from '@/pages-sub/components/navbar/Navbar.vue'

const navigatorBack = () => {
  uni.navigateBack()
}

onLoad((option) => {
  let newsId = option.newsId
  useCityNewDetail(newsId)
})
</script>
