<script setup lang="ts">
import type { ExperimentBookType } from '../types'
import { CloseBold } from '@element-plus/icons-vue'
import Preview from '@/components/Preview.vue'
import { getExperimentBooks } from '../api'

import { useLog } from '@/composables/useLog'
const log = useLog()

interface Props {
  competition_id: string
  experiment_id?: any
}
const props = defineProps<Props>()

const route = useRoute()

let list = $ref<ExperimentBookType[]>([])
function fetchInfo() {
  getExperimentBooks({ competition_id: props.competition_id, platform_key: route.query?.type as string }).then(res => {
    list = res.data.items
  })
}
onMounted(() => {
  fetchInfo()
})

// const isEmpty = $computed(() => {
//   return !props.competition_id || !detail?.id
// })

// const file = $computed(() => {
//   if (!detail) return {}
//   return JSON.parse(detail.url)
// })

let currentRaw = $ref<ExperimentBookType | undefined>()
let currentRawUrl = $ref('')
let show = $ref(false)
// 预览
function handleView(row: ExperimentBookType) {
  currentRaw = row
  currentRawUrl = row.url ? (JSON.parse(row.url)?.url as string) : ''
  show = true
  // 日志上送
  // console.log(props, props.student_id, '111')
  log.upload({
    event: 'file_event',
    action: 'competition_book_stu_watch_action',
    data: {
      competition_id: props.competition_id,
      experiment_id: props.experiment_id,
      book_id: row.id,
      student_id: route.query?.student_id
    }
  })
}
// 关闭
function handleClose() {
  show = false
}
</script>

<template>
  <!-- <el-empty description="暂无数据" v-if="isEmpty" />
  <template v-else>
    <Preview :url="file.url"></Preview>
  </template> -->
  <template v-if="list.length">
    <ul class="book-list" v-if="list.length != 1">
      <li v-for="item in list" :key="item.id" @click="handleView(item)">
        <el-icon><Document /></el-icon>
        <p>{{ item.name }}</p>
      </li>
    </ul>
    <Preview :url="list[0] ? JSON.parse(list[0].url)?.url : ''" v-else></Preview>
  </template>
  <el-empty description="暂无数据" v-else />
  <!-- 预览 -->
  <div class="book-preview" v-if="show && currentRaw">
    <div class="book-preview__close" @click="handleClose">
      <el-button type="info" circle :icon="CloseBold" />
    </div>
    <Preview :url="currentRawUrl"></Preview>
  </div>
</template>

<style lang="scss">
.book-list {
  li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    cursor: pointer;
    .el-icon {
      margin-right: 5px;
    }
  }
}
.book-preview {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  background-color: #fff;
}
.book-preview__close {
  position: absolute;
  right: -12px;
  top: -12px;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}
</style>
