<template>
    <div class="card p-card pb-3 mb-3 mx-2">
        <h4 class="card-custom-title">
      {{ $t(i18nConst.myPageRewardsHistoryTitle) }}
    </h4>
    <hr/>
        <div class="mt-3 overflow-hidden">
            <div class="table-responsive">
              <table class="table rounded rounded-3 table align-middle" style="background-color: var(--grey-custom);">
                <thead>
                  <tr>
                    <th style="text-align:start">{{ $t(i18nConst.myPageRewardsHistoryDate) }}</th>
                    <th  style="text-align:end">{{ $t(i18nConst.myPageRewardsHistoryAmount) }}</th>
                    <!-- <th>Date</th>
                    <th>{{ $t(i18nConst.myPageRewardsHistoryAmount) }}</th> -->
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="rh in rewardsHistory" :key="rh.id">
                    <td>{{ formatDate( new Date(parseInt(rh.date) * 1000)) }} </td>
                    <td class="text-end">{{ utils.formatDisplayAmountMetadexWithEthers(rh.amount) }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
    </div>
</template>

<script>
import {mapGetters} from "vuex";
import web3Utils from "@/utils/web3.utils.js";
import i18nConstantes from "@/constantes/i18n.constantes.js";
import typeActions from "@/store/typeActions.js";

export default {
    name: "MyPageRewardsHistory",
    data() {
        return {
            utils: web3Utils,
            i18nConst: i18nConstantes,
        };
    },
    methods: {
        formatDate(date) {
            const _date = new Date(date);
            return _date.toLocaleDateString() + " " + _date.toLocaleTimeString();
        }
    },  
    computed: {
        ...mapGetters("rewards", ["rewardsHistory"]),
    },
    mounted() {
      this.$store.dispatch(typeActions.getHistoryRewards);
    }
}
</script>

<style lang="scss" scoped>

th {
  text-align: center;
}

td + td>div{
  text-align: center;
}

tr {
  height: 3rem;
}
</style>