<template>
  <view class="pb-30">
    <ie-empty :value="simulatedRecordList.length !== 0 || paperWorkRecordList.length !== 0" :loading="loading">
      <view v-if="examType === EnumExamRecordType.SIMULATED" class="px-30">
        <view class="sibling-border-top px-20 py-30" v-for="(item, index) in simulatedRecordList" :key="index">
          <exam-record-item :data="item" />
        </view>
      </view>
      <template v-else>
        <view class="sibling-border-top" v-for="(item, index) in paperWorkRecordList" :key="index">
          <paper-work-item :data="item" />
        </view>
      </template>
    </ie-empty>
  </view>
</template>
<script lang="ts" setup>
import { getSimulatedRecord, getPaperWorkList } from '@/api/modules/study';
import { EnumExamRecordType, EnumPaperWorkState } from '@/common/enum';
import examRecordItem from '@/pagesStudy/components/exam-record-item.vue';
import { Study } from '@/types';
import PaperWorkItem from '@/pagesStudy/components/paper-work-item.vue';
const props = defineProps({
  examType: {
    type: String,
    default: 'test'
  }
});
const simulatedRecordList = ref<Study.SimulatedRecord[]>([]);
const paperWorkRecordList = ref<Study.PaperWork[]>([]);
const loading = ref(false);
const loadData = async (type: string) => {
  loading.value = true;
  try {
    simulatedRecordList.value = [];
    paperWorkRecordList.value = [];
    if (type === EnumExamRecordType.SIMULATED) {
      const { data } = await getSimulatedRecord();
      simulatedRecordList.value = data;
    } else {
      const { rows } = await getPaperWorkList({ state: EnumPaperWorkState.COMPLETED });
      paperWorkRecordList.value = rows;
    }
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
}

watch(() => props.examType, (newVal) => {
  loadData(newVal);
}, {
  immediate: false
});
loadData(props.examType);
</script>
<style lang="scss" scoped></style>