<template>
  <view>
    <student-stat-table :teach-class="teachClass" :data="studentStatData" @row-click="handleRowClick" />
  </view>
</template>
<script lang="ts" setup>
import studentStatTable from './student-stat-table.vue';
import { Study } from '@/types';
import { OPEN_PRACTICE_DETAIL } from '@/types/injectionSymbols';
import { getClassPlanStudyRecord } from '@/api/modules/study';

const openPracticeDetail = inject(OPEN_PRACTICE_DETAIL);
const props = defineProps({
  teachClass: {
    type: Object as PropType<Study.TeachClass>,
    default: () => ({})
  },
  currentType: {
    type: String,
    default: 'rate'
  },
  currentSort: {
    type: String,
    default: 'asc'
  }
});

const studentStatData = ref<Study.StudentPracticeRecord[]>([]);

const loadData = async () => {
  uni.$ie.showLoading();
  try {
    const { rows } = await getClassPlanStudyRecord({
      classId: props.teachClass.classId,
      sortField: props.currentType,
      asc: props.currentSort === 'asc'
    });
    studentStatData.value = rows;
  } finally {
    uni.$ie.hideLoading();
  }
}
watchEffect(() => {
  if (props.teachClass.classId) {
    loadData();
  }
});
const handleRowClick = (row: Study.StudentPracticeRecord) => {
  openPracticeDetail?.(row.id, row.name);
}
</script>
<style lang="scss" scoped></style>