<template>
  <view>
    <CuNavbar title="培训考试"></CuNavbar>
    <MescrollItem :top="88" :i="0" apiUrl="/train/examinations">
      <template v-slot="{ list }">
        <view class="space-y-15rpx p-base">
          <template v-for="item in list" :key="item.id">
            <view
              class="card-shadow space-y-10rpx bg-white rounded-19rpx p-base space-y-10rpx"
              @click="detail(item)"
            >
              <view class="text-30rpx">{{ item.examination.name }}</view>
              <view
                class="flex items-center justify-between text-24rpx text-hex-999999"
              >
                <view class=""
                  >发布日期:
                  {{ timeFormat(item.examination.published_at) }}</view
                >
                <view class="">{{
                  item.mark != null ? item.mark : '未完成'
                }}</view>
              </view>
            </view>
          </template>
        </view>
      </template>
    </MescrollItem>
  </view>
</template>
<script setup>
import { ref } from 'vue'
import { http } from '@/utils/request'
import CuNavbar from '@/components/cu-navbar/index'
import MescrollItem from '@/components/mescroll-api/one'
import { onPageScroll, onReachBottom, onLoad } from '@dcloudio/uni-app'
import useMescrollComp from '@/uni_modules/mescroll-uni/hooks/useMescrollComp.js'
import { timeFormat } from '@climblee/uv-ui/libs/function/index'
const { mescrollItem } = useMescrollComp(onPageScroll, onReachBottom)

onLoad(() => {
  uni.$on('examination:onRefresh', () => {
    mescrollItem.value?.refresh()
  })
})

const detail = (item) => {
  uni.navigateTo({
    url: `/pages/examination/detail?id=${item.id}`,
  })
}
</script>
