<template>
  <div>
    <h6 class="text-light font-weight-normal">
      {{ updatedAsAt }}
    </h6>
    <b-container fluid class="border bg-white auth-load genealogy">
      <b-row>
        <b-col class="px-0 py-3 my-1 col-12 col-xs-12 col-sm-12 col-lg-6 col-xl-7">
          <div class="d-inline-block pl-3 pt-2 font-weight-bold" v-if="isMyPlacementNetworkPerformance">
            {{ $t('Genealogy.PlacementNetworkPerformance.SubTitle') }}
          </div>
          <div class="d-inline-block pl-3 pt-2 font-weight-bold" v-else>
            <b-btn variant="link" class="px-0" @click="removeViewIbo()">
              <icon class="text-success icon-size-3 p-0" name="back-icon" />
            </b-btn>
            <b-link @click="removeViewIbo()">
              <span class="text-dark"> {{ $t('Common.View') }} {{ viewIboId }} ({{ viewIboName }} </span>
            </b-link>
          </div>
        </b-col>
        <b-col class="py-3 my-1 col-12 col-xs-12 col-sm-12 col-lg-6 col-xl-5">
          <b-input-group class="w-100" @keyup.13="searchPlacementNetworkPerformance">
            <b-form-input
              v-model="searchMember"
              :placeholder="$t('Genealogy.PlacementNetworkPerformance.Search.SearchMemberID')"
              :title="$t('Genealogy.SponsorNetworkTree.Search.EnterToSearch')"
            />
            <b-input-group-append>
              <div class="d-flex p-0 justify-content-between align-items-center">
                <icon class="icon-size-4" name="spinner" pulse v-if="isLoading('genealogyGetMemberListLoading')" />
                <div v-else>
                  <b-btn v-if="viewIboId !== ''" variant="link" @click="removeViewIbo()" class="border-light pt-2">
                    <icon name="clear-icon" class="" />
                  </b-btn>
                  <b-btn variant="primary" @click="searchPlacementNetworkPerformance">
                    <icon name="search" />
                  </b-btn>
                </div>
                <b-btn id="viewLegendButton" class="mx-3" variant="primary" @click="legendOpen = !legendOpen">
                  {{ $t('Genealogy.PlacementNetworkPerformance.Legend.ViewLegend') }}
                </b-btn>
                <b-popover
                  :show.sync="legendOpen"
                  target="viewLegendButton"
                  placement="bottomleft"
                  triggers=""
                  :offset="1"
                >
                  <table>
                    <tbody>
                      <tr>
                        <td colspan="2" class="text-right">
                          <div class="btn border rounded-circle" @click="legendOpen = false">
                            <icon name="remove-icon" />
                          </div>
                        </td>
                      </tr>
                      <tr>
                        <td class="text-left font-weight-bold px-2 py-1">
                          {{ $t('Genealogy.PlacementNetworkPerformance.Legend.HR') }}
                        </td>
                        <td class="text-left font-weight-normal px-2 py-1">
                          {{ $t('Common.HighestRank') }}
                        </td>
                      </tr>
                      <tr>
                        <td class="text-left font-weight-bold px-2 py-1">
                          {{ $t('Genealogy.PlacementNetworkPerformance.Legend.ER') }}
                        </td>
                        <td class="text-left font-weight-normal px-2 py-1">
                          {{ $t('Common.Terminology.PaidAsRank') }}
                        </td>
                      </tr>
                      <tr>
                        <td class="text-left font-weight-bold px-2 py-1">
                          {{ $t('Genealogy.PlacementNetworkPerformance.Legend.AInA') }}
                        </td>
                        <td class="text-left font-weight-normal px-2 py-1">
                          {{ $t('Genealogy.PlacementNetworkPerformance.Legend.ActiveInactive') }}
                        </td>
                      </tr>
                      <tr>
                        <td class="text-left font-weight-bold px-2 py-1">
                          {{ $t('Genealogy.PlacementNetworkPerformance.Legend.PCV') }}
                        </td>
                        <td class="text-left font-weight-normal px-2 py-1">
                          {{ $t('Genealogy.PlacementNetworkPerformance.Legend.PersonalCV') }}
                        </td>
                      </tr>
                      <tr>
                        <td class="text-left font-weight-bold px-2 py-1">
                          {{ $t('Genealogy.PlacementNetworkPerformance.Legend.GCV') }}
                        </td>
                        <td class="text-left font-weight-normal px-2 py-1">
                          {{ $t('Genealogy.PlacementNetworkPerformance.Legend.GroupCV') }}
                        </td>
                      </tr>
                      <tr>
                        <td class="text-left font-weight-bold px-2 py-1">
                          {{ $t('Genealogy.PlacementNetworkPerformance.Legend.OPS') }}
                        </td>
                        <td class="text-left font-weight-normal px-2 py-1">
                          {{ $t('Genealogy.PlacementNetworkPerformance.Legend.OptimisingPersonalSales') }}
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </b-popover>
              </div>
            </b-input-group-append>
          </b-input-group>
        </b-col>
      </b-row>
      <b-row>
        <b-col class="col-12 overflow-x-auto">
          <table class="table">
            <thead>
              <tr>
                <th scope="col" class="border-left border-right border-top text-nowrap text-left" rowspan="2">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Week') }}
                </th>
                <th
                  scope="col"
                  class="border-left border-right border-top text-nowrap text-left"
                  rowspan="2"
                  :title="$t('Common.HighestRank')"
                >
                  {{ $t('Genealogy.PlacementNetworkPerformance.Legend.HR') }}
                </th>
                <th
                  scope="col"
                  class="border-left border-right border-top text-nowrap text-left"
                  rowspan="2"
                  :title="$t('Common.Terminology.PaidAsRank')"
                >
                  {{ $t('Genealogy.PlacementNetworkPerformance.Legend.ER') }}
                </th>
                <th
                  scope="col"
                  class="border-left border-right border-top text-nowrap text-left"
                  rowspan="2"
                  :title="$t('Genealogy.PlacementNetworkPerformance.Legend.ActiveInactive')"
                >
                  {{ $t('Genealogy.PlacementNetworkPerformance.Legend.AInA') }}
                </th>
                <th
                  scope="col"
                  class="border-left border-right border-top text-nowrap text-right"
                  rowspan="2"
                  :title="$t('Genealogy.PlacementNetworkPerformance.Legend.PersonalCV')"
                >
                  {{ $t('Genealogy.PlacementNetworkPerformance.Legend.PCV') }}
                </th>
                <th
                  scope="col"
                  class="border-left border-right border-top align-middle text-nowrap text-center"
                  colspan="2"
                >
                  {{ $t('Common.Terminology.TotalBV') }}
                </th>
                <th
                  scope="col"
                  class="border-left border-right border-top align-middle text-nowrap text-center"
                  colspan="2"
                >
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.CarryForwardGCV') }}
                </th>
                <th
                  scope="col"
                  class="border-left border-right border-top align-middle text-nowrap text-center"
                  colspan="2"
                >
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.TotalWeekCarryForwardGCV') }}
                </th>
                <th
                  scope="col"
                  class="border-left border-right border-top align-middle text-nowrap text-center"
                  colspan="2"
                >
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.SponsorLineActiveBA') }}
                </th>
                <th
                  scope="col"
                  class="border-left border-right border-top align-middle text-nowrap text-center"
                  colspan="2"
                >
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.NewBA') }}
                </th>
                <th
                  scope="col"
                  class="border-left border-right border-top align-middle text-nowrap text-center"
                  colspan="2"
                >
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.TotalBA') }}
                </th>
                <th
                  scope="col"
                  class="border-left border-right border-top align-middle text-nowrap text-center"
                  colspan="2"
                >
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.ActiveBA') }}
                </th>
              </tr>
              <tr>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Left') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Right') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Left') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Right') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Left') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Right') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Left') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Right') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Left') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Right') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Left') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Right') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Left') }}
                </th>
                <th scope="col" class="border-left border-right text-nowrap text-right">
                  {{ $t('Genealogy.PlacementNetworkPerformance.TableHeader.Right') }}
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, idx) in tableDataSource" :key="idx">
                <td class="border-left border-right border-bottom text-nowrap text-left">
                  {{ item.Week }}
                </td>
                <td class="border-left border-right border-bottom text-nowrap text-left">
                  {{ item.HR }}
                </td>
                <td class="border-left border-right border-bottom text-nowrap text-left">
                  {{ item.ER }}
                </td>
                <td class="border-left border-right border-bottom text-nowrap text-left">
                  <span
                    class="text-info"
                    v-if="typeof item.AInA !== 'undefined' && item.AInA !== null && item.AInA === 1"
                  >
                    {{ $t('Common.Active') }}
                  </span>
                  <span class="text-danger" v-else>
                    {{ $t('Common.Inactive') }}
                  </span>
                </td>
                <td class="border-left border-right border-bottom text-nowrap text-right">
                  {{ item.PCV }}
                </td>
                <td
                  class="border-left border-right border-bottom text-nowrap text-right genealogy-pnp-table-alternate-column"
                >
                  {{ item.WeekGcvL }}
                </td>
                <td class="border-left border-right border-bottom text-nowrap text-right">
                  {{ item.WeekGcvR }}
                </td>
                <td
                  class="border-left border-right border-bottom text-nowrap text-right genealogy-pnp-table-alternate-column"
                >
                  {{ item.CarryForwardGcvL }}
                </td>
                <td class="border-left border-right border-bottom text-nowrap text-right">
                  {{ item.CarryForwardGcvR }}
                </td>
                <td
                  class="border-left border-right border-bottom text-nowrap text-right genealogy-pnp-table-alternate-column"
                >
                  {{ totalValue(item.WeekGcvL, item.CarryForwardGcvL) }}
                </td>
                <td class="border-left border-right border-bottom text-nowrap text-right">
                  {{ totalValue(item.WeekGcvR, item.CarryForwardGcvR) }}
                </td>
                <td
                  class="border-left border-right border-bottom text-nowrap text-right genealogy-pnp-table-alternate-column"
                >
                  {{ item.SponsorLineL }}
                </td>
                <td class="border-left border-right border-bottom text-nowrap text-right">
                  {{ item.SponsorLineR }}
                </td>
                <td
                  class="border-left border-right border-bottom text-nowrap text-right genealogy-pnp-table-alternate-column"
                >
                  {{ item.NewBaL }}
                </td>
                <td class="border-left border-right border-bottom text-nowrap text-right">
                  {{ item.NewBaR }}
                </td>
                <td
                  class="border-left border-right border-bottom text-nowrap text-right genealogy-pnp-table-alternate-column"
                >
                  {{ item.TotalBaL }}
                </td>
                <td class="border-left border-right border-bottom text-nowrap text-right">
                  {{ item.TotalBaR }}
                </td>
                <td
                  class="border-left border-right border-bottom text-nowrap text-right genealogy-pnp-table-alternate-column"
                >
                  {{ item.ActiveBaL }}
                </td>
                <td class="border-left border-right border-bottom text-nowrap text-right">
                  {{ item.ActiveBaR }}
                </td>
              </tr>
            </tbody>
          </table>
          <div class="d-flex justify-content-center align-items-center py-5" v-if="tableDataSource === null">
            <icon class="icon-size-4" name="spinner" pulse />
          </div>
        </b-col>
      </b-row>
    </b-container>
    <b-modal
      ok-only
      hide-header
      centered
      size="sm"
      class="eshop-model"
      ref="member_search_notice"
      @ok="closeMemberSearchNotice"
    >
      <div v-if="getGenealogyMemberList.length === 0">
        {{ $t('Report.Notice.MemberSearchEmptyNotice') }}
      </div>
      <div v-else>
        {{ $t('Report.Notice.MemberSearchNotice') }}
      </div>
    </b-modal>
    <b-modal ok-only hide-header centered size="sm" class="eshop-model" ref="error_notice">
      <div>{{ $t('Genealogy.PlacementNetworkPerformance.Message.NoData', { user: errorNoticeName }) }}</div>
    </b-modal>
  </div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex'
import moment from 'moment'

export default {
  name: 'Genealogy',
  data() {
    return {
      isMyPlacementNetworkPerformance: true,
      searchMember: '',
      legendOpen: false,
      viewIboId: '',
      viewIboName: '',
      viewDataSource: null,
      tableDataSource: null,
      updatedAsAt: '',
      errorNoticeName: '',
    }
  },
  mounted() {
    this.populatePlacementNetworkPerformance(this.getGenealogyUserId)
  },
  methods: {
    ...mapActions(['loadGenealogyMemberList', 'loadPlacementNetworkPerformanceData']),
    populatePlacementNetworkPerformance(userId, iboId, iboName) {
      let query = {
        user_id: userId,
      }
      this.tableDataSource = null
      this.loadPlacementNetworkPerformanceData(query).then(() => {
        let pnpData = this.getPlacementNetworkPerformance
        this.updatedAsAt = moment(this.getDashboardUpdatedAt).format('DD/MM/YYYY h A')
        this.tableDataSource = pnpData.data
        this.isMyPlacementNetworkPerformance = userId === this.getGenealogyUserId
        if (userId === this.getGenealogyUserId) {
          this.isMyPlacementNetworkPerformance = true
          this.viewIboId = ''
          this.viewIboName = ''
          this.errorNoticeName = this.getGenealogyUserName
        } else {
          this.isMyPlacementNetworkPerformance = false
          this.viewIboId = iboId
          this.viewIboName = iboName
          this.errorNoticeName = iboName
        }
        if (pnpData.data.length === 0) {
          this.$refs.error_notice.show()
        }
      })
    },
    searchPlacementNetworkPerformance() {
      if (this.searchMember !== '') {
        let query = {
          sponsor_id: this.getGenealogyUserId,
          search_text: this.searchMember,
        }
        this.loadGenealogyMemberList(query).then(() => {
          let genealogyMemberList = this.getGenealogyMemberList
          if (genealogyMemberList.length === 1) {
            this.viewDataSource = JSON.parse(JSON.stringify(this.tableDataSource))
            this.populatePlacementNetworkPerformance(
              genealogyMemberList[0].user_id,
              genealogyMemberList[0].user.old_member_id,
              genealogyMemberList[0].name
            )
          } else {
            this.searchMember = this.viewIboId
            this.$refs.member_search_notice.show()
          }
        })
      }
    },
    closeMemberSearchNotice() {
      this.$refs.member_search_notice.hide()
    },
    removeViewIbo() {
      this.tableDataSource = JSON.parse(JSON.stringify(this.viewDataSource))
      this.viewIboId = ''
      this.viewIboName = ''
      this.viewDataSource = null
      this.searchMember = ''
      this.isMyPlacementNetworkPerformance = true
    },
    totalValue(v1, v2) {
      if (v1 === null || v2 === null) {
        return null
      } else {
        return parseFloat(v1) + parseFloat(v2)
      }
    },
  },
  computed: {
    ...mapGetters([
      'isLoading',
      'getGenealogyCountryId',
      'getGenealogyUserId',
      'getGenealogyUserName',
      'getGenealogyMemberList',
      'getPlacementNetworkPerformance',
      'getDashboardUpdatedAt',
    ]),
  },
}
</script>
