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

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

// 实验过程截图
const pictures = $computed<FileItem[]>(() => {
  try {
    const list: FileItem[] = props.data.competition_competitor_pictures.pictures ? JSON.parse(props.data.competition_competitor_pictures.pictures) : []
    return list.filter(item => item.size)
  } catch (error) {
    console.log(error)
  }
  return []
})

const srcList = computed(() => {
  return pictures.map(item => item.url)
})
</script>

<template>
  <el-dialog title="查看实验截图" width="800px" append-to-body>
    <ul class="picture-list">
      <li v-for="(item, index) in pictures" :key="item.url">
        <p class="t1">
          <el-image style="width: 100%" :src="item.url" :preview-src-list="srcList" :initial-index="index" />
        </p>
        <p class="t2">截图时间：{{ item.upload_time }}</p>
      </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>

<style lang="scss" scoped>
.picture-list {
  width: 100%;
  li {
    line-height: 30px;
  }
  a {
    color: var(--main-color);
  }
  .t2 {
    text-align: center;
  }
}
</style>
