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

<template>
  <div class="info-header">
    <div class="left_box">
      <div class="title">
        基本信息
      </div>
    </div>
  </div>
  <table class="description">
    <tr>
      <th>图片名称</th>
      <td class="blue">
        {{ data?.pictureInfo?.imgName }}
      </td>
      <th>图片格式</th>
      <td class="blue">
        {{ data?.pictureInfo?.imgFormat }}
      </td>
    </tr>
    <tr>
      <th>图片大小</th>
      <td class="blue">
        {{ (data?.pictureInfo?.imgSize / 1024).toFixed(2) }}kb
      </td>
      <th>图片尺寸</th>
      <td class="blue">
        {{ data?.pictureInfo?.imgMeasure }}
      </td>
    </tr>
    <tr>
      <th>上传时间</th>
      <td> {{ data?.pictureInfo?.uploadTime }}</td>
      <th>生成时间</th>
      <td> {{ data?.pictureInfo?.createTime }}</td>
    </tr>
    <tr>
      <th>标记时间</th>
      <td> {{ data?.pictureInfo?.tagTime }}</td>

      <th>色彩空间</th>
      <td>{{ data?.pictureInfo?.imgSpace }}</td>
    </tr>
    <tr>
      <th>
        来源
      </th>
      <td colspan="3">
        {{ data?.pictureInfo?.source }}
      </td>
    </tr>
  </table>
</template>

<style lang="less" scoped>
.info-header {
  display: flex;
  padding: 6px 0 15px 0;
  align-items: center;
  justify-content: space-between;
  .left_box {
    display: flex;
    align-items: center;
    .title {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-family: PingFang SC, PingFang SC-Medium;
      font-weight: 500;
      color: #333333;

      &:before {
        content: "";
        width: 4px;
        height: 12px;
        background: #507afd;
        border-radius: 3px;
        display: inline-block;
        margin-right: 10px;
      }
    }
  }
  .right_box {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-family: PingFang SC, PingFang SC-Regular;
    color: #666666;

    .icon{
      margin-left: 7px
    }
  }
}
.description {
  width: 100%;
  font-size: 14px;
}

th {
  width: 20%;
  background-color: #fafafa;
  color: #666666;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  line-height: 22px;
}

td {
  width: 30%;
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  color: #666666;
}

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

.blue {
  // color: #507afd;
}

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