<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 }}的{{ prevData.subjectName }}试卷详情</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.total }}</text>
          </template>
          <template #rate="{ item }">
            <text :class="[item.rate < 70 ? 'text-danger' : 'text-fore-title']">{{ item.rate }}%</text>
          </template>
        </ie-table>
      </view>
    </view>
  </ie-page>
</template>
<script lang="ts" setup>
import { useTransferPage } from '@/hooks/useTransferPage';
import { Study, TableColumnConfig } from '@/types';
import { getStudentExamSubjectDetail } 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: 'rate',
    label: '正确率',
    flex: 1,
    slot: 'rate'
  }
];

const pageTitle = computed(() => {
  return '模考-试卷详情';
});

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