<script setup lang="ts">
import SmallSearch from '@/components/SmallSearch.vue'
import FourDynamics from '@/components/FourDynamics.vue'
import NewDynamics from '@/components/NewDynamics.vue'
import { getNews, type NewsData } from '@/api/home'
import { queryFieldMethod } from '@/utils/queryFieldMethod'
import {ref} from 'vue'
import { formatTime } from '@/utils/formatTime'
import { useRouter } from 'vue-router'
const aboutList = ref<NewsData[]>([])
const router = useRouter()
const init = async ()=>{
  const res = await getNews(queryFieldMethod('special_column','notification_announcement'))
  if(res.code == 200){
    aboutList.value = res.data
    console.log(aboutList.value)
  }
}
const toDetail = (id:number|undefined)=>{
  if(!id){
    return
  }
  router.push({
    path:'/newsDetail',
    query:{
      id
    }
  })
}
init();

</script>

<template>
  <div class="aboutContainer">
    <div class="w-912px ml-auto mr-auto pt-20px mb-20px text-14px">
      你所在的位置：<span class="cursor-pointer">首页</span> > <span class="color-#006eff">通知公告</span>
    </div>
    <div class="flex justify-between w-912px mr-a ml-a">
      <div class="w-603px pl-24px pr-24px pt-30px text-black bg-white">
        <div v-for="(item,index) in aboutList" :key="index" @click="toDetail(item.id)" class="cursor-pointer">
          <div class="text-16px">{{item.title}}</div>
          <div class="text-13px line-height-23x text-#464646 line-clamp-4 mt-8px" v-html="item.content">
          </div>
          <div class="flex justify-between">
            <div class="mt-15px text-#858585 text-13px">
              <div class="text-13px">{{formatTime(item.date)}}</div>
            </div>
          </div>
          <div class="h-1px bg-#e9e9e9 mt-24px mb-24px"></div>
        </div>
      </div>
      <div class="w-294px">
        <small-search />
        <four-dynamics />
        <new-dynamics />
      </div>
    </div>
  </div>
</template>

<style scoped>
.aboutContainer {
  background-color: #ecf0f9;
}
</style>
