<template>
  <div v-if="loading" class="loading">
    <CSpinner />
    读取中...
  </div>
  <div v-else>
    <h1>Scan Data Details</h1>
    <div class="frame" v-if="image_url">
      <a :href="image_url" target="_blank">
        <img :src="image_url"/>
      </a>
    </div>
    <div v-else>
      <p></p>
    </div>
    <table v-if="details">
      <tbody>
        <tr>
          <td class="field-col">ID</td>
          <td class="value-col">{{ details.id }}</td>
        </tr>
        <tr>
          <td class="field-col">Datetime</td>
          <td class="value-col">{{ format_timestamp(details.datetime) }}</td>
        </tr>
        <tr>
          <td class="field-col">Code</td>
          <td class="value-col">{{ details.code }}</td>
        </tr>
        <tr>
          <td class="field-col">Product</td>
          <td class="value-col">{{ details.product__name }}</td>
        </tr>
        <tr>
          <td class="field-col">Phone Model</td>
          <td class="value-col">{{ details.phone_model }}</td>
        </tr>
        <tr>
          <td class="field-col">Succeeded</td>
          <td class="value-col">{{ details.succeeded ? '成功' : '失败' }}</td>
        </tr>
        <tr>
          <td class="field-col">IP</td>
          <td class="value-col">{{ details.ip }}</td>
        </tr>
        <tr>
          <td class="field-col">Location</td>
          <td class="value-col">{{ details.location }}</td>
        </tr>
        <tr>
          <td class="field-col">Labels</td>
          <td class="value-col">{{ details.labels }}</td>
        </tr>
        <tr>
          <td class="field-col">Message</td>
          <td class="value-col"><pre>{{ details.message }}</pre></td>
        </tr>
        <tr>
          <td class="field-col">Client log</td>
          <td class="value-col"><pre>{{ details.client_log }}</pre></td>
        </tr>
      </tbody>
    </table>
    <pre>{{ details }}</pre>
  </div>
</template>

<script>
export default {
  name: 'ScanDataDetails',
  props: ['id'],
  components: {
  },
  data: function () {
    return {
      details: null,
    };
  },
  computed: {
    resource_uri: function() {
      return "/api/v1/scan-data/" + this.id + "/";
    },
    image_url: function() {
      if (!this.details) {
        return null;
      }
      return '/api/v1/oss-image/?token=' + this.$root.token + "&name=" + this.details.image;
    },
  },
  methods: {
    async reload() {
      this.loading = true;
      var r = await this.$root.api_get(this.resource_uri);
      this.details = r.data;
      this.loading = false;
    },
  },
  mounted() {
    this.reload();
  },
}
</script>

<style scoped>
.field-col {
  min-width: 200px;
  font-weight: bold;
}
.value-col {
  width: 100%;
}
table {
  margin: 20px 0;
  width: 100%;
}
tr {
  height: 3rem;
  border-bottom: 1px solid #ccc;
}
pre {
  border: 1px solid #ccc;
  font-family: monospace;
  padding: 20px;
  background-color: #000;
  color: #999;
  white-space: pre-wrap;
}
div.frame img {
  max-width: 500px;
}
</style>

