<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 { TableColumnConfig } from '@/types';
import { StudentVideoStat } from '@/types/study';
import { OPEN_VIDEO_DETAIL } from '@/types/injectionSymbols';
const openVideoDetail = inject(OPEN_VIDEO_DETAIL);
const tableColumns = ref<TableColumnConfig[]>([
  {
    type: 'index',
    prop: 'index',
    label: '序号',
    flex: 0.5
  },
  {
    prop: 'name',
    label: '姓名',
    flex: 1
  },
  {
    prop: 'videoCount',
    label: '课时',
    flex: 1
  },
  {
    prop: 'duration',
    label: '时长(分钟)',
    flex: 1
  }
])
const data = ref<StudentVideoStat[]>([
  {
    id: 1,
    name: '张三',
    videoCount: 10,
    duration: 100
  }
])
const handleRowClick = (row: StudentVideoStat) => {
  console.log('点击了行:', row);
  openVideoDetail?.(row.id, row.name);
}
</script>
<style lang="scss" scoped></style>