<script setup>
import { getRecordList } from '../api'
const props = defineProps(['data'])

function formatDuration(seconds) {
  const minutes = Math.floor(seconds / 60)
  const remainingSeconds = seconds % 60
  return minutes > 0 ? `${minutes}m${remainingSeconds}s` : `${remainingSeconds}s`
}
// 列表配置
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: '操作', slots: 'table-x', width: 100 },
  ],
}
</script>

<template>
  <el-dialog title="选择直播练习场次">
    <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>
      </template>
    </AppList>
  </el-dialog>
</template>
