<template>
  <VListCard
    style="width:200px"
    title="考试列表"
    v-loading="loading"
    :dataList="list_data"
    :loadMore="loadMore"
    @change="selectHandle"
  />
</template>

<script>
import VListCard from './VListCard.vue'
import { pagingExamListApi } from '@/api/assessment-evaluation/exam'

export default {
  components: { VListCard },

  data: (_) => ({
    // 分页信息
    page_info: { currentPage: 1, pageSize: 10, total: 0 },
    // 列表数据
    list_data: [],
    // 当前选中项的id
    current_selected_item_id: null,
    // 是否加载中
    loading: false,
    // 是否加载完成所有数据
    overload: false
  }),
  methods: {
    /**
     * 分页加载数据
     */
    async loadMore () {
      if (this.loading || this.overload) return
      this.loading = true
      try {
        const { data } = await pagingExamListApi(this.page_info)
        this.list_data.push(...data.data)

        // 列表数据长度等于数据总数则标记为已加载完所有数据
        this.overload = this.list_data.length === data.total
        this.page_info.currentPage++
      } catch (error) {}
      this.loading = false
    },

    /**
     * 列表项被选中回调
     * @param {number} item 被选中的考试信息
     */
    selectHandle (item) {
      this.current_selected_item_id =
            this.current_selected_item_id === item.id ? null : item.id
      // 使用发射器抛出事件，传出当前选中项的id
      this.$emit('onchange', this.current_selected_item_id != null ? item : null)
    }
  }
}
</script>
