<template>
  <div class="assets-table">
    <ods-table
      :data="assets"
      @cell-click="goToAssetDetail"
      height="350"
      size="mini"
      @sort-change= "sort">
      <ods-table-column v-for="(column, index) in columns" :key="index" :prop="column" :label="translateColumn(column)" sortable="true" >
        <template slot-scope="scope">
          <span v-if="column === 'assetId'" class="ods-icon-dumpster tableDumpster"><span class="circulo" v-if="scope.row.warningsAmount > 0"></span></span>
          <span :class="[column === 'status' ? (scope.row.status === 'POI' ? 'blueTag tag' : 'greenTag tag') : '']">
            {{ column ==='creationDate' ? ( moment(scope.row[column])) : scope.row[column]}}</span>
        </template>
      </ods-table-column>
    </ods-table>
  </div>
</template>

<script>
import {mapActions} from 'vuex';
import {dateFormat} from '@/utils/filters';

export default {
  name: 'assets-table',
  props: ['assets', 'columns'],
  mounted() {
    window.document.addEventListener(
      'sendStationEvent',
      this.pointSelectedListener,
      false,
    );
  },
  methods: {
    ...mapActions([
      'fetchAssets',
      'setCurrentAsset',
      'clearCurrentAsset',
    ]),
    pointSelectedListener(e) {
      const asset = e.detail;

      document
        .getElementById('dataIframe')
        .contentWindow
        .setPositionByCoordinates({
          longitude: asset.coordinates.lon,
          latitude: asset.coordinates.lat,
          height: 7000,
        });

      this.$router.push({path: `/map/assets/${asset.id}`});
    },
    goToAssetDetail(row) {
      const asset = row;

      this.clearCurrentAsset();
      this.setCurrentAsset({currentAsset: asset});

      document
        .getElementById('dataIframe')
        .contentWindow
        .setPositionByCoordinates({
          longitude: asset.geometry.coordinates[0],
          latitude: asset.geometry.coordinates[1],
          height: 7000,
        });

      this.$router.push({path: `/map/assets/${asset.assetId}`});
    },
    translateColumn(column) {
      return this.$t(`dataTables.${column}`);
    },
    moment(date) {
      return dateFormat(date);
    },
    sort(obj) {
      this.fetchAssets({filterType: null, valueFilter: null, sort: obj.prop, order: obj.order});
    },
  },
};
</script>
<style lang="scss">

.tableDumpster{
  font-size: 17px;
  margin-right: 12px;
 }

 .circulo {
  width: 10px;
  height: 10px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: red;
  position: absolute;
  left: 25px;
  top: 6px;
}

</style>
