<template>
  <div class="card mb-4">
    <div class="card-header">
      <card-title :title="$t('Dashboard.Landing.Card.QuarterlyDividend.Title')" />
      <div class="px-4 pt-1 clearfix remove-gutter-1">
        <icon name="dashboard-triangles" class="icon-size-4 text-primary fill-medium" />
        <big-amount
          class="float-right"
          :label="$t('Dashboard.Landing.Card.QuarterlyDividend.Label')"
          :amount="quarterlyDividendTotal"
          variant="large"
        />
      </div>
    </div>
    <div
      v-if="!isLoading('memberDashboardLoading') && quarterlyDividendLocalData !== null"
      class="card-body pt-0 border-top collapse"
    >
      <wave-chart
        class="chart mt-4"
        :labels="quarterlyDividendLocalData.labels"
        :data="quarterlyDividendLocalData.data"
        :max="quarterlyDividendLocalData.max"
        :callback="quarterlyDividendLocalData.callback"
        :post-callback="quarterlyDividendLocalData.postCallback"
      />
      <div class="p-2">
        <b-row
          v-for="(dividend, index) in quarterlyDividendDashboardData"
          :key="`quarterly-dividend-dashboard-data-${index}`"
        >
          <b-col cols="4" md="3" class="border-bottom no-gutters p-3 ">
            <h6>{{ dividend.title }}</h6>
          </b-col>
          <b-col cols="8" md="8" class=" p-0">
            <b-row v-for="(data, dindex) in dividend.data" :key="`divident-${dindex}`">
              <b-col cols="7" class="border-bottom p-3">
                <h6 class="m-0">{{ data.title }}</h6>
              </b-col>
              <b-col
                cols="5"
                :class="{
                  'border-bottom': true,
                  'p-3': true,
                  'font-size-6': true,
                  'font-size-md-5': true,
                  'text-right': true,
                  'text-primary': data.active,
                }"
              >
                {{ data.value }}
              </b-col>
            </b-row>
          </b-col>
        </b-row>
      </div>
    </div>
    <div v-else class="text-center text-primary m-lg-auto vh-25 pt-5">
      <b-spinner class="mx-2" />
      <strong class="h4">{{ $t('Common.Loading') }}</strong>
    </div>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import BigAmount from './BigAmount'
import WaveChart from './WaveChart'
import CardTitle from '@/app/_global/components/elements/CardTitle'

export default {
  name: 'QuarterlyDividend',
  components: { CardTitle, BigAmount, WaveChart },
  props: ['quarterlyDividendLocalData', 'quarterlyDividendDashboardData', 'quarterlyDividendTotal'],
  computed: {
    ...mapGetters(['isLoading', 'getMemberDetails']),
  },
}
</script>
