<template>
  <view class="h-full bg-white">
    <teacher-class-view>
      <template #default="{ teachClass }">
        <view class="">
          <ie-table :tableColumns="tableColumns" :data="tableData" :cellStyle="cellStyle" :headerFixed="true">
            <template #name="{ item }">
              <text class="font-bold">{{ item.name }}</text>
            </template>
            <template #total="{ item }">
              <text class="font-bold">{{ item.value }}/{{ item.total }}</text>
            </template>
            <template #action="{ item }">
              <text class="text-30 text-primary font-bold" @click="handleRowClick(item)">查看</text>
            </template>
          </ie-table>
        </view>
      </template>
    </teacher-class-view>
  </view>
</template>
<script lang="ts" setup>
import teacherClassView from '@/pagesStudy/components/teacher-class-view.vue';
import examHistorySimulated from './exam-history-simulated.vue';
import examHistoryPaperwork from './exam-history-paperwork.vue';
import { Study } from '@/types';
import { TableColumnConfig } from '@/types';
import { CSSProperties } from 'vue';
import { useTransferPage } from '@/hooks/useTransferPage';
import { getClassExamRecord } from '@/api/modules/study';
const { transferTo } = useTransferPage();

const props = defineProps({
  examType: {
    type: String,
    default: 'test'
  }
});
const cellStyle: CSSProperties = {
  padding: '30rpx 20rpx'
}
const mockData = {
  name: '1班',
  total: 100,
  value: 100,
  rate: 100,
}
const tableData = ref<Study.StudentExamRecord[]>(new Array(20).fill(mockData));
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: Study.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>