<script setup lang="ts">
import type { RecordItem, ReportItem } from '../types'
import { getReportList } from '../api'
import { saveAs } from 'file-saver'
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()
})
// office文件
const getUrl = (url: string) => {
  const fileExtensionName = url.split('.').pop() || ''
  return ['pptx', 'doc', 'docx', 'xls', 'xlsx'].includes(fileExtensionName)
    ? `https://view.officeapps.live.com/op/view.aspx?src=${url}`
    : url
}
</script>

<template>
  <el-dialog title="查看报告" width="500px">
    <ul>
      <li v-for="item in reportList" :key="item.id" style="line-height: 24px">
        <a :href="getUrl(item.url)" target="_blank">
          {{ item.name }}
          <el-button size="small" type="primary" style="margin-left: 10px">查看</el-button>
        </a>
        <el-button size="small" type="primary" style="margin-left: 10px" @click="saveAs(item.url, item.name)"
          >下载</el-button
        >
      </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>
