<template>
  <view class="mx-[36rpx] mt-[48rpx]">
    <view
      class="flex items-center justify-between"
      hover-class="none"
      :hover-stop-propagation="false"
    >
      <text class="text-[32rpx] text-[#333333] font-semibold">高考资讯</text>
      <image
        class="w-[40rpx] h-[40rpx]"
        src="https://api.static.ycymedu.com/src/images/home/right.svg"
        @click="toNewsPage"
      ></image>
    </view>

    <view
      class="truncate flex flex-col py-[32rpx]"
      style="border-bottom: 2rpx solid #eee"
      hover-class="none"
      :hover-stop-propagation="false"
      v-for="item in newsList"
      :key="item.id"
      @click="handleClick(item)"
    >
      <text class="truncate text-[28rpx] text-[#333333] font-normal mb-[16rpx] max-w-full">
        {{ item.title }}
      </text>
      <text class="text-[24rpx] color-[#999999] font-normal">{{ item.createTime }}</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useCityNewTop, newsList } from '@/hooks/useCityInfoHook'
import { News } from '@/types/app-type'

onShow(() => {
  useCityNewTop()
})

const handleClick = (item: News) => {
  uni.navigateTo({
    url: `/pages-sub/home/news/index?newsId=${item.id}`,
  })
}

const toNewsPage = () => {
  uni.navigateTo({
    url: '/pages-sub/home/news/newsList',
  })
}
</script>
