<script setup>
import { ElMessage, ElLoading } from 'element-plus'
import { useFileDialog } from '@vueuse/core'
import { upload } from '@/utils/upload'
import { getRecordList, saveTestRecord, getRecord } from '../api'
const props = defineProps(['data'])

function formatDuration(seconds) {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = (seconds % 60).toFixed(2)
  return minutes > 0 ? `${minutes}m${remainingSeconds}s` : `${remainingSeconds}s`
}
const appList = ref()
// 列表配置
const listOptions = {
  hasPagination: false,
  remote: {
    httpRequest: getRecordList,
    params: { live_practice_id: props.data.id },
    callback(data) {
      return { list: data.items }
    },
  },
  columns: [
    { label: '序号', type: 'index', width: 60 },
    {
      label: '主播',
      prop: 'current_user',
      computed({ row }) {
        return row.current_user.real_name || row.current_user.nickname || row.current_user.username
      },
    },
    {
      label: '直播时长',
      prop: 'live_duration',
      computed({ row }) {
        return formatDuration(row.live_duration)
      },
    },
    { label: '开始时间', prop: 'live_start_time' },
    { label: '结束时间', prop: 'live_end_time' },
    {
      label: '视频状态',
      prop: 'live_video_addres',
      computed({ row }) {
        return row.live_video_addres ? '已上传' : '未上传'
      },
    },
    {
      label: '状态',
      prop: 'ai_status',
      computed({ row }) {
        return row.ai_status || '--'
      },
    },
    {
      label: '评级',
      prop: 'ai_level',
      computed({ row }) {
        return row.ai_level || '--'
      },
    },
    { label: '操作', slots: 'table-x', width: 120 },
  ],
}

// 上传视频
let uploadLoading = null
const uploading = ref(false)
const currentRow = ref()
const handleUpload = (row) => {
  currentRow.value = row
  const dialog = useFileDialog()
  dialog.open({ accept: 'video/*' })
  dialog.onChange(async ([file]) => {
    uploading.value = true
    uploadLoading = ElLoading.service({
      lock: true,
      text: '上传中',
      background: 'rgba(0, 0, 0, 0.7)',
    })
    try {
      const res = await upload(file)
      const recordRes = await getRecord({ id: row.id })
      const record = recordRes.data.detail
      await saveTestRecord({
        ...record,
        live_practice_id: row.id,
        live_video_addres: res,
        live_video_size: file.size.toString(),
      })
      ElMessage.success('上传成功')
      appList.value?.refetch()
    } catch (error) {
      console.error(error)
      ElMessage.error('上传失败')
    } finally {
      uploading.value = false
      uploadLoading?.close()
    }
  })
}
</script>

<template>
  <el-dialog title="查看历史直播场次" width="800px">
    <AppList v-bind="listOptions" ref="appList">
      <template #table-x="{ row }">
        <el-button text type="primary">
          <router-link :to="{ path: 'test/view', query: { ...$route.query, id: data.id, record_id: row.id } }"
            >查看</router-link
          >
          <el-button
            type="primary"
            text
            :loading="uploading && currentRow.id === row.id"
            :disabled="uploading"
            @click="handleUpload(row)"
            >上传</el-button
          >
        </el-button>
      </template>
    </AppList>
  </el-dialog>
</template>
