<template>
  <table id="table" class="table table-light" style="width: 100%">
    <thead class="thead-dark">
      <tr>
        <th>#</th>
        <th>{{ $t("Event") }}</th>
        <th>{{ $t("Date") }}</th>
        <th>{{ $t("Created By") }}</th> 
        <th> {{$t("Properties")}} </th>
      </tr>
      <tr v-for="item in items" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.event }}</td>
          <td><span data-bs-toggle="tooltip" data-bs-placement="top" :title="item.created_at"> {{ego(item.created_at)}} </span></td>
          <td>{{ item.causer.name }}</td>
          <td>{{ item.properties.old?item.properties.old:item.properties.attributes }}</td>
      </tr>
    </thead>
  </table>
</template>

<script>
export default {
  props: ['model','id'],
  data: function () {
    return {
        items: []
    };
  },
  watch: {
    id: function (val) {
      this.loadall();
    }
  },
  mounted() {
      this.loadall();
  },
  methods: {
    loadall: function () {
      axios.get("/api/getByModel/"+this.model+"/"+this.id).then((res) => {
        this.items= res.data;
      });
    },
    ego: function(val){
      return  moment(val).fromNow();  
    }
  },
};
</script>
