<template>
  <div>
    <table
      class="table"
      v-if="attrs"
    >
      <thead>
        <tr>
          <th width="170px">Thông tin</th>
          <th>Diễn giải</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="v in attrs">
          <td>{{ v.name }}</td>
          <td>
            <span class="icon-text">
              <span>{{ v.value }}</span>
              <span
                class="ml-5"
                v-if="!$empty(v.match)"
              >
                <SvgIcon
                  v-bind="{
                    name: v.match ? 'check2.svg' : 'error.svg',
                    type: v.match ? 'blue' : 'danger',
                    size: 26,
                  }"
                ></SvgIcon>
              </span>
              <span
                class="ml-5"
                v-if="!$empty(v.auth)"
              >
                <SvgIcon
                  v-bind="{
                    name: v.auth ? 'check2.svg' : 'error.svg',
                    type: v.auth ? 'blue' : 'danger',
                    size: 26,
                  }"
                ></SvgIcon>
              </span>
              <span
                class="ml-5"
                v-if="!$empty(v.expiry)"
              >
                <SvgIcon
                  v-bind="{
                    name: v.expiry ? 'error.svg' : 'check2.svg',
                    type: v.expiry ? 'danger' : 'blue',
                    size: 26,
                  }"
                ></SvgIcon>
              </span>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  props: ["file"],
  data() {
    return {
      attrs: this.file ? this.file.file__verified_info || this.file.verified_info : undefined,
    };
  },
};
</script>
