<script setup lang="ts">
import { getLiveList } from '../api'

const props = defineProps<{ data: any }>()

defineEmits<{
  (e: 'update'): void
  (e: 'update:modelValue', visible: boolean): void
}>()

function formatDuration(seconds: number) {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return minutes > 0 ? `${minutes}m${remainingSeconds}s` : `${remainingSeconds}s`
}

// 列表配置
const listOptions = $computed(() => {
  return {
    remote: {
      httpRequest: getLiveList,
      params: {
        experiment_id: props.data?.eid,
        student_id: props.data?.sid,
      },
      callback(res: any) {
        return { list: res.items }
      },
    },
    columns: [
      { label: '序号', type: 'index', width: 60 },
      { label: '选手姓名', prop: 'student_name' },
      { label: '商品名称', prop: 'live_commodity.title' },
      {
        label: '直播时长',
        prop: 'live_duration',
        computed({ row }: { row: any }) {
          return formatDuration(row.live_duration)
        },
      },
      {
        label: '文件大小（M）',
        prop: 'live_video_size',
        computed({ row }: { row: any }) {
          return convertBytes(row.live_video_size, 'MB')
        },
      },
      { label: '上传时间', prop: 'live_end_time' },
      {
        label: '视频状态',
        prop: 'live_video_addres',
        computed({ row }: { row: any }) {
          return row.live_video_addres ? '已上传' : '未上传'
        },
      },
      { label: '操作', slots: 'table-x', width: 130 },
    ],
  }
})
const handleViewLive = function (row: any) {
  window.open(
    `https://saas-dml-pro.ezijing.com/one/live/test/view?experiment_id=${props.data.eid}&id=${row.live_practice_id}&record_id=${row.id}&student_id=${props.data.sid}`
  )
}

/**
 * 将字节转换为指定单位
 * @param {number} bytes - 字节数
 * @param {string} unit - 转换目标单位 ('KB', 'MB', 'GB', 'TB')
 * @param {number} [decimalPlaces=2] - 保留的小数位数
 * @returns {number} - 转换后的值
 */
function convertBytes(bytes: any, unit: any, decimalPlaces = 2) {
  const units: any = {
    KB: 1024,
    MB: 1024 * 1024,
    GB: 1024 * 1024 * 1024,
    TB: 1024 * 1024 * 1024 * 1024,
  }

  if (!units[unit]) {
    throw new Error("无效的单位，请选择 'KB', 'MB', 'GB', 或 'TB'")
  }

  const result = bytes / units[unit]
  return parseFloat(result.toFixed(decimalPlaces))
}

console.log(convertBytes(1048576, 'MB'), 'convertBytes(1048576,')
</script>

<template>
  <el-dialog
    title="查看直播录像"
    :close-on-click-modal="false"
    width="700px"
    @update:modelValue="(value) => $emit('update:modelValue', value)">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-count="{ row }"> {{ row.checked_count }}/{{ row.need_check_count }} </template>
      <template #table-score="{ row }">
        <span :class="{ 'is-info': row.score_name !== '--' }">{{ row.score_name }}</span>
      </template>
      <template #table-x="{ row }">
        <el-button text type="primary" @click="handleViewLive(row)">观看回放</el-button>
      </template>
    </AppList>
    <el-row justify="center">
      <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<style lang="scss" scoped>
.result {
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  span {
    padding: 0 10px;
    font-size: 40px;
    color: var(--main-color);
  }
}
</style>
