<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>