<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'

interface Props {
  competition_id: string
}
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
  })
}
watchEffect(() => {
  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) : ''
  console.log(row, 'row')
  show = true
}
// 关闭
function handleClose() {
  show = false
}
</script>

<template>
  <!-- <el-empty description="暂无数据" v-if="isEmpty" />
  <template v-else>
    <Preview :url="file.url"></Preview>
  </template> -->
  <div v-if="list.length">
    <ul class="book-list">
      <li v-for="item in list" :key="item.id" @click="handleView(item)">
        <el-icon><Document /></el-icon>
        <p>{{ item.name }}</p>
      </li>
    </ul>
  </div>
  <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>
