<template>
  <div class="dashboard-panel-element rounded-0 my-3">
    <b-col class="py-2">
      <div class="text-primary font-weight-bold small">{{ $t('Common.MemberID') }}</div>

      <b-row class="align-items-center">
        <b-col cols="12" md="8" lg="6" xl="5" class="mb-2 mb-md-0">
          <b-input-group class="py-1">
            <eshop-autocomplete
              id="myInput"
              :min-len="3"
              :wait="500"
              variant="primary"
              class="flex-grow-1"
              :items="getMemberList"
              v-model="searchMember"
              template-name="member"
              :get-label="item => (item ? item.name : '')"
              :placeholder="$t('Genealogy.SponsorNetworkTree.Search.SearchDownline')"
              @updateItems="loadMemberListItem"
              @item-selected="setMemberDetails"
            />
            <b-input-group-append>
              <div class="border border-left-0  d-flex align-items-center px-2">
                <b-spinner v-show="isLoading('memberListLoading')" small variant="primary" />
              </div>

              <b-btn
                v-if="$helpers.isEmpty(searchMember) === false"
                variant="link"
                @click="setMemberDetails()"
                class="border-light border-left rounded-0"
              >
                <icon name="clear-icon" />
              </b-btn>
            </b-input-group-append>
          </b-input-group>
        </b-col>

        <b-col cols="12" md="3" class="text-right text-md-left pl-0">
          <b-button variant="primary" @click="viewReport">
            <span>{{ $t('Report.GlobalWords.ViewReport') }}</span>
            <b-spinner v-show="isLoading('loadingBvSvInfoStatement')" small class="ml-2" />
          </b-button>
        </b-col>
      </b-row>
    </b-col>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import EshopAutocomplete from '@/app/_global/components/elements/EshopAutocomplete'

export default {
  name: 'BvSvInfoStatement',
  components: { EshopAutocomplete },
  data() {
    return {
      searchMember: '',
      selectedDownlineId: '',
    }
  },
  mounted() {
    this.loadMemberListItem()
  },
  computed: {
    ...mapGetters(['getLoggedInUser', 'getMemberList', 'isLoading']),
  },
  methods: {
    ...mapActions(['loadBvSvInfoStatement', 'loadMemberList']),
    loadMemberListItem(val = '', exactSearch = false) {
      this.loadMemberList({ [exactSearch ? 'exactText' : 'searchText']: val, minimal: true })
    },

    setMemberDetails(val = {}) {
      this.searchMember = ''
      this.selectedDownlineId = val.user_id || ''
    },

    async viewReport() {
      let payload = { downlineId: this.selectedDownlineId || this.getLoggedInUser.id }

      await this.loadBvSvInfoStatement(payload).then(result => {
        if (result && result.url) {
          window.open(result.url, '_blank')
        } else {
          this.$swal({
            type: 'error',
            title: this.$t('Common.Table.NoRecords.Msg'),
          })
        }
      })
    },
  },
}
</script>
