<template>
  <view>
    <view class="mx-30 pt-30 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 #duration="{ item }">
          <text>{{ getStudyDuration(item) }}</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 || []);

const getStudyDuration = (item: Study.VideoStudyRecord) => {
  const time = Number(item.study) / 60;
  if (time > 1) {
    return Math.round(time) + '分钟';
  } else {
    // 显示秒
    return Number(item.study) + '秒';
  }
}
</script>
<style lang="scss" scoped></style>