<script lang="ts" setup>
defineProps({
  data: {
    type: Object as PropType<any>,
    required: true,
  },
})
</script>

<template>
  <table class="description">
    <tr>
      <th>图片名称</th>
      <td class="blue">
        {{ data?.ocrPicture?.imgname }}
      </td>
      <th>图片格式</th>
      <td class="blue">
        ???
      </td>
    </tr>
    <tr>
      <th>图片大小</th>
      <td> ???</td>
      <th>图片尺寸</th>
      <td> ???</td>
    </tr>
    <tr>
      <th>上传时间</th>
      <td> {{ data?.ocrPicture?.uptime }}</td>
      <th>生成时间</th>
      <td> {{ data?.ocrPicture?.gentime }}</td>
    </tr>
    <tr>
      <th>标记时间</th>
      <td> ???</td>
      <th>色彩空间</th>
      <td>{{ data?.ocrPicture?.space }}</td>
    </tr>
    <tr>
      <th>来源</th>
      <td> {{ data?.ocrPicture?.source }}</td>
    </tr>
  </table>
</template>

<style lang="less" scoped>
.description {
  width: 100%;
  font-size: 14px;
}

th {
  width: 20%;
  background-color: #fafafa;
  color: #666666;
}

td {
  width: 30%;
}

th,
td {
  border: 1px solid #ebebeb;
  padding: 12px 24px;
  text-align: left;
}

.blue {
  color: #507afd;
}

.black {
  color: #666666;
}
</style>
