<script setup lang="ts">
import type { RecordItem, ReportItem } from '../types'
import { getReportList } from '../api'

interface Props {
  data: RecordItem
}
const props = defineProps<Props>()

const reportList = ref<ReportItem[]>([])
async function fetchReport() {
  const res = await getReportList({ competition_id: props.data.competition_id, student_id: props.data.student_id })
  reportList.value = res.data.items
}
onMounted(() => {
  fetchReport()
})
</script>

<template>
  <el-dialog title="查看报告" width="500px">
    <ul>
      <li v-for="item in reportList" :key="item.id" style="line-height: 24px">
        <a :href="`https://view.officeapps.live.com/op/view.aspx?src=${item.url}`" target="_blank">
          {{ item.name }}
          <el-button size="small" type="primary" style="margin-left: 10px">查看</el-button>
        </a>
      </li>
    </ul>
    <template #footer>
      <el-row justify="center">
        <el-button round auto-insert-space @click="$emit('update:modelValue', false)">关闭</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
