<template>
  <ie-page bg-color="#F6F8FA" :fix-height="true">
    <ie-navbar :title="pageTitle" />
    <view class="h-20"></view>
    <view class="bg-white flex-1 min-h-1">
      <view class="pt-30 px-30 text-30 text-fore-title font-bold">{{ prevData.name }}的做卷详情</view>
      <view class="p-30">
        <ie-table :tableColumns="tableColumns" :data="tableData" :cellStyle="cellStyle">
          <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>
    </view>
  </ie-page>
</template>
<script lang="ts" setup>
import { useTransferPage } from '@/hooks/useTransferPage';
import { Study, TableColumnConfig } from '@/types';
import { getStudentExamSubjectRecord } from '@/api/modules/study';
import { CSSProperties } from 'vue';

const { prevData, transferTo } = useTransferPage();
const cellStyle: CSSProperties = {
  padding: '30rpx 20rpx'
}
const tableData = ref<Study.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 pageTitle = computed(() => {
  return '模考-做卷详情';
});

const handleRowClick = (row: Study.StudentExamRecord) => {
  transferTo('/pagesStudy/pages/study-exam-simulated-detail/study-exam-simulated-detail', {
    data: {
      examineeId: row.id,
      name: prevData.value.name,
      subjectName: row.name
    }
  });
}
const loadData = async () => {
  uni.$ie.showLoading();
  try {
    const res = await getStudentExamSubjectRecord({
      studentId: prevData.value.studentId,
    });
    tableData.value = res.data;
  } finally {
    uni.$ie.hideLoading();
  }
}
onLoad(() => {
  loadData();
});
</script>
<style lang="scss" scoped></style>