<template>
  <table class="ui collapsing celled table">
  <thead>
    <tr>
      <!-- <th>Date</th> -->
      <th>Fichier</th>
      <th>Status</th>
      <!-- <th>Action</th> -->
    </tr>
  </thead>
  <tbody>
    <tr :key="importFile.created_on" v-for="importFile in data">
      <!-- <td>{{importFile.created_on |setDate}}</td> -->
      <td>
        <h4 class="ui header">
        <div :data-tooltip="dataTooltipMsg(importFile.geojson_file_name)" >
            {{importFile.geojson_file_name |subString}}
            <div class="sub header">ajouté le {{importFile.created_on |setDate}}  
          </div>
        </div>
        </h4>
      </td>

      <td>
        <div :data-tooltip="dataTooltipMsg(importFile.infos)" class="ui icon">
          <i v-if="importFile.status == 'pending'" class="orange sync icon"></i>
          <i v-else-if="importFile.status == 'processing'" class="orange hourglass half icon"></i>
          <i v-else-if="importFile.status == 'finished'" class="green check circle outline icon" ></i>
          <i v-else-if="importFile.status == 'failed'" class="red x icon" ></i>
          <i v-else class="red ban icon"></i>
        </div>
        </td>
    </tr>
  </tbody>
</table>
</template>


<script>

export default {
   data: function () {
    return {
      open: false,
      }
   },
  props: ['data'],
  filters:{
    setDate : function(value){
      let date = new Date(value);
      let d = date.toLocaleDateString('fr', {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
      });
      return d
    },
    subString : function(value){
      return value.substring(0,26)+".."
    }
  },
  methods:{
    dataTooltipMsg(msg){
      return msg;
    },
  },
}
</script>