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

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

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

<template>
  <el-dialog title="查看实验截图" width="800px">
    <ul class="picture-list">
      <li v-for="item in pictures" :key="item.url">
        <p class="t1">
          <a :href="item.url" target="_blank">{{ item.name }}</a>
        </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 {
    display: flex;
    justify-content: space-between;
    line-height: 30px;
  }
  a {
    color: var(--main-color);
  }
  .t1 {
    flex: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
</style>
