<template>
  <div>
    <section class="headerList">
      <dynamic-filters data-id="table-filters" />
      <p> total de {{asset}}: </p>
    </section>
    <ods-scrollbar>
      <div class="scroll">
        <ods-module v-for="asset in assets.assets" :key="asset.id" class="card" >
          <div class="assetCard" @click="assetsDetail(asset)">
            <div class="circle-icon" :style="{background: [asset.status === 'Parado' ? '#FFF4E3' : '#EAF7EC'], border: '1px solid ' + [asset.status === 'Parado' ? '#FFF4E3' : '#EAF7EC']}" >
              <ods-icon name="dumpster" size="22" :color="asset.status === 'Parado' ? '#FFA617' : '#36B348'"></ods-icon>
              <span class="circulo" v-if="asset.warningsAmount > 0"></span>
            </div>
            <span>
              <p class="idBold">{{asset.assetId}}</p>
              <p class="capitalize">{{asset.status}}</p>
            </span>
            <span>
              <p>campo</p>
              <p>valor</p>
            </span>
            <span>
              <p>campo</p>
              <p>valor</p>
            </span>
          </div>
        </ods-module>
        <infinite-loading @infinite="onInfinite"></infinite-loading>
      </div>
    </ods-scrollbar>
  </div>
</template>

<script>
import {mapGetters, mapActions, mapState} from 'vuex';
import InfiniteLoading from 'vue-infinite-loading';
import DynamicFilters from '@/components/shared/DynamicFilters.vue';

export default {
  name: 'assets-list',
  components: {
    DynamicFilters,
    InfiniteLoading,
  },
  data() {
    return {
      assetsByType: null,
      currentPage: 1,
      asset: null,
    };
  },
  computed: {
    // ...mapGetters({
    //   asset: 'getCurrentTypeAssets'
    // }),
    ...mapState(['assets']),
  },
  methods: {
    ...mapGetters([
      'getPages',
      'getTotalPages',
    ]),
    ...mapActions([
      'setAssets',
      'pushAssets',
    ]),
    assetsDetail(asset) {
      this.$router.push({path: `/map/assets/${asset.assetId}`});
    },
    async onInfinite($state) {
      try {
        const nextPage = this.currentPage + 1;
        await this.pushAssets({type: this.asset._id, page: nextPage, size: 4});
        this.currentPage = nextPage;
        $state.loaded();
        if (nextPage && this.getPages().total_pages <= nextPage) {
          $state.complete();
        }
      } catch (error) {
        console.log('TODO: error en paginación de scroll infinito');
      }
    },
  },
  mounted() {
    this.asset = this.$route.params.type;
    this.setAssets({type: this.asset, size: 4}).then(() => {
      // console.log('asset type', assets)
    });
  },

};

</script>

<style lang="scss" scoped>

.headerList {
  display: flex;
  padding-bottom: 4%;
  padding-top: 2%;
  justify-content: space-between;
}

.card {
  margin-bottom: 1%;
}

.scroll {
  height: 500px;
}

.assetCard {
  border-radius: 0;
  display: flex;
  padding-top: 4%;
  > * {
    flex-grow: 2;

  }
  > :first-child {
    margin-right: 5%;
    flex-grow: 0;
  }
}

.greenItem {
  background-color: '#EAF7EC';
  color: '#36B348';
  border: '1px solid #EAF7EC'
}

.yellowItem {
  background-color: '#FFF4E3';
   color: '#FFA617';
   border: '1px solid #FFF4E3'
}

.idBold {
  font-weight: 500;
}

.circulo {
  width: 10px;
  height: 10px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: red;
  position: relative;
  left: 0px;
  top: -15px;
}

</style>
