<template>
  <view>
    <view class="mx-30 mt-20 mb-40 grid grid-cols-2 gap-x-26 gap-y-26">
      <view v-for="item in stat" :key="item.value" class="relative p-30 rounded-10 bg-back">
        <ie-image :src="item.icon" custom-class="w-52 h-70 absolute top-20 right-25" />
        <view class="text-30 text-fore-light font-bold">{{ item.name }}</view>
        <view class="mt-4">
          <text class="text-36 text-fore-title font-bold">{{ item.value }}</text>
          <text class="ml-20 text-24 text-fore-light">{{ item.unit }}</text>
        </view>
      </view>
    </view>
    <view class="mx-30">
      <ie-table :table-columns="tableColumns" :data="data">
        <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>
        <template #duration="{ item }">
          <text>{{ Math.round(item.study / 60) }}分钟</text>
        </template>
      </ie-table>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { TableColumnConfig } from '@/types';
import * as Study from '@/types/study';
const props = defineProps<{
  data: Study.VideoStudy;
}>();

const stat = computed(() => [
  {
    name: '视频总数',
    unit: '课时',
    value: props.data.total,
    icon: '/pagesStudy/static/image/icon-video.png'
  },
  {
    name: '观看时长',
    unit: '分钟',
    value: Math.round((props.data.study || 0) / 60),
    icon: '/pagesStudy/static/image/icon-time.png'
  },
])
const tableColumns = ref<TableColumnConfig[]>([
  {
    prop: 'name',
    label: '视频名称',
    flex: 1.6,
  },
  {
    prop: 'date',
    label: '日期',
    flex: 1,
  },
  {
    prop: 'duration',
    label: '时长',
    flex: 0.5,
    slot: 'duration',
  }
])
const data = computed(() => props.data.list || [])
</script>
<style lang="scss" scoped></style>