<template>
  <!-- <view class="bg-[#fff]">
    <SearchNavigation />
  </view> -->
  <Navigator :title="t('tabbar.record')" :is-show-back="false" />
  <scroll-view scroll-y :style="{ height: 'calc(100vh - 50px)' }" @scrolltolower="getNews">
    <view class="box">
      <!-- <image src="../../static/image/record/banner.png" /> -->

      <view class="record-list">
        <NotData v-if="!recordList.length" />
        <view v-for="item in recordList" :key="item.id" class="record-item" @click="onPage(item.id)">
          <view class="record-item-title"> {{ item.title }} </view>
          <view class="record-item-time">{{ formatTimestamp(item.updatetime * 1000) }}</view>
        </view>
      </view>
    </view>
  </scroll-view>

  <CustomTabbar :id="3" />
</template>

<script lang="ts" setup>
import CustomTabbar from '@/components/custom-tabbar/custom-tabbar.vue'
import Navigator from '@/components/navigator/navigator.vue'
import { useI18n } from 'vue-i18n'
// import SearchNavigation from '@/components/searchNavigation/searchNavigation.vue'
import { ref } from 'vue'
import { getNewsApi } from '@/api/record/record'
import { onLoad } from '@dcloudio/uni-app'
import type { Ref } from 'vue'
import { closeToast, showLoadingToast } from 'vant'
const { t } = useI18n()
interface recordType {
  id: number
  image: string
  title: string
  updateTime: number
}

const onPage = (id: number | string) => {
  uni.navigateTo({
    url: '/subPackages/details/details?id=' + id
  })
}

// 格式化时间
function formatTimestamp(timestamp: number | string) {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  // 月份从0开始，所以我们需要加1
  const month = ('0' + (date.getMonth() + 1)).slice(-2)
  const day = ('0' + date.getDate()).slice(-2)
  const hours = ('0' + date.getHours()).slice(-2)
  const minutes = ('0' + date.getMinutes()).slice(-2)

  return `${year}/${month}/${day} ${hours}:${minutes}`
}

const recordList: Ref[recordType] = ref([])

onLoad(() => {
  page = 1
  recordList.value = []
  getNews()
})

let page = 1

const getNews = async () => {
  showLoadingToast({
    message: t('toastText.tip1'),
    forbidClick: true,
    overlay: true,
    loadingType: 'spinner'
  })
  const res = await getNewsApi({ page })

  if (res.code === 1) {
    closeToast()
    page++
    // res.data.data.forEach((element) => {
    //   recordList.value.push(element)
    // })
    res.data.data.forEach((item) => {
      recordList.value.push(item)
    })
  }
}
</script>
<style scoped lang="scss">
.box {
  margin-top: 0.625rem;
  // padding-top: 3.5313rem;

  .record-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-top: 0.5625rem;
    .record-item {
      width: 21.5625rem;
      height: 5rem;
      background: rgb(8, 24, 43, 0.7);
      border-radius: 0.9375rem;
      padding: 0.625rem;
      position: relative;
      margin-bottom: 0.4688rem;

      .record-item-title {
        font-weight: 500;
        font-size: 0.8125rem;
        color: #fff;
      }

      .record-item-time {
        font-weight: 500;
        font-size: 0.8125rem;
        color: #a2a2a2;
        position: absolute;
        bottom: 0.3125rem;
        right: 0.75rem;
      }
    }
  }

  uni-image {
    width: 100%;
    height: 4.5938rem;
  }
}
</style>
