<template>
  <view class="mt-30">
    <ie-table :table-columns="tableColumns" :data="data" @rowClick="handleRowClick">
      <template #name="{ item }">
        <view class="flex items-center justify-center">
          <!-- <ie-image :src="item.avatar" class="w-60 h-60 bg-back" :round="999" /> -->
          <text class="ml-10 flex-1 min-w-1 ellipsis-1">{{ item.name }}</text>
        </view>
      </template>
    </ie-table>
  </view>
</template>
<script lang="ts" setup>
import { Study, TableColumnConfig } from '@/types';
import { StudentVideoRecord } from '@/types/study';
import { OPEN_VIDEO_DETAIL } from '@/types/injectionSymbols';
import { getClassVideoStudyRecord } from '@/api/modules/study';

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

const openVideoDetail = inject(OPEN_VIDEO_DETAIL);
const tableColumns = ref<TableColumnConfig[]>([
  {
    type: 'index',
    prop: 'index',
    label: '序号',
    flex: 0.5
  },
  {
    prop: 'name',
    label: '姓名',
    flex: 1
  },
  {
    prop: 'total',
    label: '课时',
    flex: 1
  },
  {
    prop: 'value',
    label: '时长(分钟)',
    flex: 1
  }
])
const data = ref<StudentVideoRecord[]>([])
const handleRowClick = (row: StudentVideoRecord) => {
  openVideoDetail?.(row.id, row.name);
}

const loadData = async () => {
  uni.$ie.showLoading();
  try {
    const { rows } = await getClassVideoStudyRecord({
      classId: props.teachClass.classId,
      asc: props.currentSort === 'asc'
    });
    data.value = rows.map(item => {
      return {
        ...item,
        value: Math.round(item.value / 60)
      }
    });
  } finally {
    uni.$ie.hideLoading();
  }
}

watchEffect(() => {
  if (props.teachClass.classId) {
    loadData();
  }
});

</script>
<style lang="scss" scoped></style>