<template>
  <section :data-id="dataId">
    <div class="headerCard">
      <p class="capitalize">{{translate(asset._id)}}({{asset.count}})</p>
      <ods-button
        :data-id="`${dataId}-button`"
        @click="assetsList(asset)"
        type="text">
        {{ translate('buttonLabel') }}
        <ods-icon name="arrow-right" size="16"></ods-icon>
      </ods-button>
    </div>
    <div :class="['assets-summary', { 'extended': !isExtended }]">
      <assets-summary-item :item="item" v-for="item in getItemsByType(asset)" :key="item.id"></assets-summary-item>
    </div>
  </section>
</template>

<script>
import {mapMutations} from 'vuex';
import AssetsSummaryItem from '@/components/assets/AssetsSummaryItem.vue';
import itemsType from '@/constants/items-assets-summary.js';

export default {
  name: 'assets-summary',
  props: ['asset', 'isExtended', 'data-id'],
  data() {
    return {
      items: null,
      itemsType,
    };
  },
  components: {AssetsSummaryItem},
  methods: {
    ...mapMutations([
      'setCurrentTypeAssets',
    ]),
    assetsList(asset) {
      this.$router.push({path: `/map/assets/list/${asset._id}`});
    },
    translate(data) {
      return this.$t(`map.${data}`);
    },
    getItemsByType(asset) {
      const items = itemsType[asset._id];
      return items;
    },
  },
};
</script>

<style lang="scss" scope>
  .assets-summary {
    display: flex;
    justify-content: space-around;
    background-color: #FFF;
    &.extended {
      justify-content: space-around;
      padding: 30px 30px 60px;
    }
  }

  .headerCard{
    display: flex;
    padding-bottom: 5%;
    justify-content: space-between;

    p{
      font-size: 12px;
      color: #060E14;
      font-weight: 500;
      line-height: 24px;
    }
  }

  .ods-button.is-round{
    padding: 0;
  }

  .ods-button{
    padding: 0;
  }
</style>
