<template>
  <view>
    <ie-table :tableColumns="tableColumns" :data="tableData" :cellStyle="cellStyle">
      <template #name="{ item }: { item: StudentExamRecord }">
        <text class="font-bold">{{ item.name }}</text>
      </template>
      <template #total="{ item }: { item: StudentExamRecord }">
        <text class="font-bold">{{ item.value }}/{{ item.total }}</text>
      </template>
      <template #action="{ item }: { item: StudentExamRecord }">
        <text class="text-30 text-primary font-bold" @click="handleRowClick(item)">查看</text>
      </template>
    </ie-table>
  </view>
</template>
<script lang="ts" setup>
import { getClassExamRecord } from '@/api/modules/study';
import { Study, TableColumnConfig, Transfer } from '@/types';
import { StudentExamRecord } from '@/types/study';
import { CSSProperties } from 'vue';
import { useTransferPage } from '@/hooks/useTransferPage';
const { transferTo } = useTransferPage();

const cellStyle: CSSProperties = {
  padding: '30rpx 20rpx'
}

const tableData = ref<StudentExamRecord[]>([]);
const tableColumns: TableColumnConfig[] = [
  {
    prop: 'name',
    label: '班级',
    flex: 1,
    slot: 'name',
    headerAlign: 'center',
    align: 'center'
  },
  {
    prop: 'total',
    label: '做卷情况',
    flex: 1,
    slot: 'total'
  },
  {
    prop: 'action',
    label: '操作',
    flex: 1,
    slot: 'action'
  }
];


const handleRowClick = (row: StudentExamRecord) => {
  transferTo('/pagesStudy/pages/study-exam-simulated-class/study-exam-simulated-class', {
    data: {
      classId: row.id,
      name: row.name
    }
  });
}

const loadData = async () => {
  uni.$ie.showLoading();
  await getClassExamRecord({}).then(res => {
    tableData.value = res.data;
  });
  uni.$ie.hideLoading();
}

onMounted(() => {
  loadData();
})
</script>
<style lang="scss" scoped></style>