<template>
  <div>
    <div v-if="isLoading('welcomeBonusDailyLoading')" class="text-center w-100 mt-5">
      <icon name="spinner" pulse class="icon-size-4" />
    </div>
    <div v-else-if="welcomeBonusData.length === 0" class="text-center w-100 mt-5">
      <h5>{{ $t('Common.RecordNotFound') }}</h5>
    </div>
    <div
      v-else
      class="card mb-4 py-1 col-xl-6 col-lg-7 col-md-8 col-sm-12"
      v-for="(data, index) in welcomeBonusData"
      :key="index"
    >
      <div class="card-header">
        <card-title :title="data.date" />
        <div class="px-4 pt-1 remove-gutter-1 clearfix">
          <icon name="dashboard-handshake" class="icon-size-3 text-primary fill-medium" />
          <big-currency
            class="float-right"
            :currency="currencyUSD"
            variant="large"
            :price="getTotalPrice(data.levels)"
          />
        </div>
      </div>
      <div class="card-body border-top pt-0 collapse">
        <div class="divider px-4 remove-gutter-1">
          <b-row class="py-3 pl-1 divider" v-for="(levelBonus, levelIndex) in data.levels" :key="levelIndex">
            <b-col class="pb-2">
              {{ $t('Dashboard.Landing.Card.WelcomeBonus.LevelTitle', { level: levelBonus.level }) }}
            </b-col>
            <b-col class="text-right text-nowrap">
              <big-currency :currency="currencyUSD" :price="levelBonus.total" class="align-top" />
              <b-btn variant="link" class="py-1" @click="showWelcomeBonus(levelBonus)">
                <icon name="dashboard-arrow-right" class="text-primary align-top" />
              </b-btn>
            </b-col>
          </b-row>
        </div>
      </div>
      <b-modal v-model="showWelcomeBonusModal" size="lg" :title="activeWelcomeBonus.title" hide-footer centered>
        <div class="overflow-x-auto">
          <table class="table mb-5">
            <thead>
              <tr>
                <th scope="col">
                  {{ $t('Dashboard.Landing.Card.WelcomeBonus.Detail.No') }}
                </th>
                <th scope="col">
                  {{ $t('Common.IboId') }}
                </th>
                <th scope="col">
                  {{ $t('Common.IboName') }}
                </th>
                <th scope="col">
                  {{ $t('Dashboard.Landing.Card.WelcomeBonus.Detail.WPRank') }}
                </th>
                <th scope="col" class="text-right">
                  {{ $t('Dashboard.Landing.Card.WelcomeBonus.Detail.Bonus') }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr :key="detailsIndex" v-for="(detailSData, detailsIndex) in activeWelcomeBonus.details">
                <td>{{ detailSData + 1 }}</td>
                <td>{{ detailSData.old_member_id }}</td>
                <td>{{ detailSData.name }}</td>
                <td>{{ detailSData.wp_rank }}</td>
                <td class="text-right">
                  {{ detailSData.bonus }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </b-modal>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import CardTitle from '@/app/_global/components/elements/CardTitle'
import BigCurrency from '@/app/dashboard/home/components/elements/BigCurrency'
import CurrencyMixin from '@/app/_global/mixins/currencyMixin'
export default {
  name: 'Welcomebonusdaily',
  components: {
    CardTitle,
    BigCurrency,
  },
  mixins: [CurrencyMixin],
  props: ['welcomeBonusData', 'isBonusLoading'],
  data() {
    return {
      showWelcomeBonusModal: false,
      activeWelcomeBonus: {},
      currencyUSD: 'USD',
      totalPrice: 0,
    }
  },
  methods: {
    ...mapActions([]),
    showWelcomeBonus(bonus) {
      if (!this.showWelcomeBonusModal) {
        this.activeWelcomeBonus = bonus
        this.activeWelcomeBonus['title'] = this.$t('Dashboard.Landing.Card.WelcomeBonus.LevelTitle', {
          level: bonus.level,
        })
      }
      this.showWelcomeBonusModal = !this.showWelcomeBonusModal
    },
    getTotalPrice(levels) {
      let total = 0
      levels.forEach(level => {
        total += parseFloat(level.total)
      })
      return this.$helpers.getCurrencyValue(total)
    },
  },
  computed: {
    ...mapGetters(['isLoading', 'getCwScheduleList', 'getWelcomeBonusDailyData']),
  },
}
</script>
