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

<template>
  <view class="flex flex-col h-screen">
    <wd-navbar
      title="详细信息"
      left-arrow
      @click-left="navigatorBack"
      safeAreaInsetTop
      :bordered="false"
      custom-class="bg-transparent! z-[99]"
    ></wd-navbar>
    <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>
      <wd-divider custom-class="my-[16rpx]"></wd-divider>
      <view class="px-[32rpx]" v-html="newsDetail.detail"></view>
    </view>
  </view>
</template>

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

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

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