<template>
  <tabs-template>
    <div class="text-capitalize">
      <b-row class="pt-3 pl-md-4 px-2">
        <b-col cols="12" md="2" lg="1" class="text-center text-md-left mr-lg-3">
          <img
            v-if="$helpers.getValue(getMember, 'details.avatar_image_link')"
            :src="getMember.details.avatar_image_link"
            class="rounded-circle object-fit-cover"
          />
          <img v-else :src="getProfilePicture()" class="rounded-circle object-fit-cover" />
        </b-col>
        <b-col class="col-12 col-md-8 text-center text-md-left pt-3 pt-md-1">
          <b-row>
            <div class="col col-12 col-md-8 text-center text-md-left">
              <label class="font-weight-bold text-dark h5">
                {{ $helpers.getValue(getMember, 'details.name') }}
              </label>
            </div>
          </b-row>
          <b-row>
            <div class="col col-12 col-md-4 text-center text-md-left">
              <label class="font-weight-bold text-dark h6">
                {{
                  $helpers.getValue(getMember, 'details.user.old_ibs_user_id') ||
                    $helpers.getValue(getMember, 'details.user.old_member_id')
                }}
              </label>
            </div>
          </b-row>
          <b-row>
            <div class="col col-12 col-md-4 text-center text-md-left">
              <label
                class="font-weight-bold"
                :class="$helpers.getValue(getMember, 'details.status.key') === 'active' ? 'text-info' : 'text-warning'"
              >
                {{ getStatus }}
              </label>
            </div>
          </b-row>
        </b-col>
      </b-row>
      <b-row class="py-4 ml-md-4 mx-3">
        <b-col cols="12" md="10" lg="5">
          <b-row class="border-bottom pb-1 pt-2 pt-md-0">
            <b-col class="col-7 pl-0 pl-md-3">
              <label>{{ $t('Common.JoinDate') }}</label>
            </b-col>
            <b-col class="col-5 text-dark pl-0">
              <label>{{ getMember.details.join_date }}</label>
            </b-col>
          </b-row>
          <b-row class="border-bottom pt-3 pb-1">
            <b-col class="col-7 pl-0 pl-md-3">
              <label>{{ $t('Common.ExpiryDate') }}</label>
            </b-col>
            <b-col class="col-5 text-dark pl-0">
              <label>{{ getMember.details.expiry_date }}</label>
            </b-col>
          </b-row>
          <b-row class="border-bottom pt-3 pb-1 ">
            <b-col class="col-7 pl-0 pl-md-3">
              <label>{{ $t('MyAccount.BusinessInfo.ActiveRemainingDay') }}</label>
            </b-col>
            <b-col class="col-5 text-dark pl-0">
              <label>
                {{ `${getRemainingDay(getMember.details.expiry_date)} ${$t('MyAccount.BusinessInfo.Days')}` }}
              </label>
            </b-col>
          </b-row>
          <template v-if="isEvo">
            <b-row class="border-bottom pt-3 pb-1">
              <b-col cols="7" class="pl-0 pl-md-3">
                <label>{{ $t('Common.Terminology.CarFundEntitlement') }}</label>
              </b-col>
              <b-col cols="5" class="pl-0 text-dark">
                <label>
                  {{ $t($helpers.getValue(getMember, 'details.car_fund_entitlement') ? 'Common.Yes' : 'Common.No') }}
                </label>
              </b-col>
            </b-row>
            <b-row class="border-bottom pt-3 pb-1">
              <b-col cols="7" class="pl-0 pl-md-3">
                <label>{{ $t('Common.Terminology.HouseFundEntitlement') }}</label>
              </b-col>
              <b-col cols="5" class="pl-0 text-dark">
                <label>
                  {{ $t($helpers.getValue(getMember, 'details.house_fund_entitlement') ? 'Common.Yes' : 'Common.No') }}
                </label>
              </b-col>
            </b-row>
          </template>
          <template v-else>
            <b-row class="border-bottom pt-3 pb-1">
              <b-col class="col-7 pl-0 pl-md-3">
                <label>{{ $t('Common.MembershipType') }}</label>
              </b-col>
              <b-col class="col-5 text-dark pl-0">
                <label>{{ getMembershipType }}</label>
              </b-col>
            </b-row>
          </template>
        </b-col>
        <b-col cols="12" md="10" lg="5" class="ml-lg-5">
          <b-row class="border-bottom pt-3 pb-1 pt-lg-0">
            <b-col class="col-7 pl-0 pl-md-3">
              <label v-if="isEvo">{{ $t('Common.Terminology.MemberRank') }}</label>
              <label v-else>{{ $t('Common.Terminology.PaidAsRank') }}</label>
            </b-col>
            <b-col class="col-5 text-dark pl-0">
              <label>{{ getPaidAsRank }}</label>
            </b-col>
          </b-row>
          <template>
            <b-row v-if="isEvo" class="border-bottom pt-3 pb-1">
              <b-col cols="7" class="pl-0 pl-md-3">
                <label>{{ $t('Common.Terminology.CouncilRank') }}</label>
              </b-col>
              <b-col cols="5" class="text-dark pl-0">
                <label>{{ $helpers.getValue(getMember, 'details.council_rank.rank_name', '-').toLowerCase() }}</label>
              </b-col>
            </b-row>

            <b-row v-else class="border-bottom pt-3 pb-1">
              <b-col cols="7" class="pl-0 pl-md-3">
                <label>{{ $t('Common.HighestRank') }}</label>
              </b-col>
              <b-col cols="5" class=" text-dark pl-0">
                <label>{{ getHighestRank }}</label>
              </b-col>
            </b-row>
          </template>
          <b-row class="border-bottom pb-1 pt-3">
            <b-col class="col-7 pl-0 pl-md-3">
              <label>{{ $t('MyAccount.BusinessInfo.SponsorIBOID') }}</label>
            </b-col>
            <b-col class="col-5 text-dark pl-0">
              <label>
                {{ getMember.details.sponsor.old_ibs_user_id || getMember.details.sponsor.old_member_id || '-' }}
              </label>
            </b-col>
          </b-row>
          <b-row class="border-bottom pt-3 pb-1">
            <b-col class="col-7 pl-0 pl-md-3">
              <label>{{ $t('MyAccount.BusinessInfo.SponsorIBOName') }}</label>
            </b-col>
            <b-col class="col-5 text-dark pl-0">
              <label>{{ $helpers.getValue(getMember, 'details.sponsor.name', '-') }}</label>
            </b-col>
          </b-row>
          <b-row v-if="isEvo" class="border-bottom pt-3 pb-1">
            <b-col class="col-7 pl-0 pl-md-3">
              <label>{{ $t('MyAccount.BusinessInfo.HasWithholdingTax') }}</label>
            </b-col>
            <b-col class="col-5 text-dark pl-0">
              <label>
                {{ $t($helpers.getValue(getMember, 'details.has_withholding_tax') ? 'Common.Yes' : 'Common.No') }}
              </label>
            </b-col>
          </b-row>
        </b-col>
      </b-row>
    </div>
  </tabs-template>
</template>
<script>
import { mapGetters } from 'vuex'
import MyAccountTabsTemplate from './templates/MyAccountTabsTemplate'
import { mapMasterDataId } from '@/app/_global/mixins'
export default {
  name: 'BusinessInfo',
  components: {
    TabsTemplate: MyAccountTabsTemplate,
  },
  data() {
    return {
      profilePicture: '/static/misc/img-avatar-default.png',
      profilePictureMale: '/static/misc/img-default-male.png',
      profilePictureFemale: '/static/misc/img-default-female.png',
      isEvo: this.$appSettings.evo.enable,
    }
  },
  methods: {
    getProfilePicture() {
      if (this.getMember.information !== null) {
        if (this.getMember.information.gender_id === this.maleId) {
          return this.profilePictureMale
        } else if (this.getMember.information.gender_id === this.femaleId) {
          return this.profilePictureFemale
        }
      } else {
        return this.profilePicture
      }
    },
  },
  computed: {
    ...mapGetters({
      getRemainingDay: 'getRemainingDay',
      getMember: 'getMyAccountMemberDetails',
    }),
    ...mapMasterDataId({
      GENDER: {
        maleId: 'MALE',
        femaleId: 'FEMALE',
      },
    }),
    getStatus() {
      return (
        this.$helpers.getValue(this.getMember, 'details.status.translated_title.content') ||
        this.$helpers.getValue(this.getMember, 'details.status.title', '')
      )
    },
    getHighestRank() {
      return (
        this.$helpers.getValue(this.getMember, 'details.highest_rank.translated_rank_name.content') ||
        this.$helpers.getValue(this.getMember, 'details.highest_rank.rank_name', '-')
      )
    },
    getMembershipType() {
      return (
        this.$helpers.getValue(this.getMember, 'details.enrollment_rank.translated_rank_name.content') ||
        this.$helpers.getValue(this.getMember, 'details.enrollment_rank.rank_name', '-')
      )
    },
    getPaidAsRank() {
      return (
        this.$helpers.getValue(this.getMember, 'details.effective_rank.translated_rank_name.content') ||
        this.$helpers.getValue(this.getMember, 'details.effective_rank.rank_name', '-')
      )
    },
  },
}
</script>
