<template>
  <div>
    <div class="dashboard-panel-element rounded-0">
      <div class="py-2">
        <section class="py-1 px-3">
          <span class="font-weight-bold small text-primary">
            {{ $t('Report.CampaignReport.PleaseSelectCampaign') }} </span
          ><br />
          <div class="row">
            <div class="col-md-4 py-1">
              <div :class="{ 'loading-border': isLoading('campaignListLoading') }">
                <b-form-select
                  v-validate="'required'"
                  v-model="campaignId"
                  name="Campaign Name"
                  @change="campaignChange"
                >
                  <option value="null" disabled class="text-light">
                    {{ $t('Report.CampaignReport.SelectCampaign') }}
                  </option>
                  <option v-for="(campaign, idx) in getCampaignOptions" :key="idx" :value="campaign.id">
                    {{ campaign.name }}
                  </option>
                </b-form-select>
              </div>
            </div>
            <div class="col-md-8 py-1">
              <b-input-group>
                <eshop-autocomplete
                  :items="getMemberList"
                  v-model="searchText"
                  :get-label="item => (item ? item.name : '')"
                  :wait="100"
                  variant="primary"
                  template-name="member"
                  :min-len="0"
                  class="flex-grow-1"
                  :placeholder="$t('Report.CampaignReport.SearchDownline')"
                  id="myInput"
                  @updateItems="searchMemberList"
                  @item-selected="setSelectedDownline"
                  ref="downline_search"
                  :disabled="campaignId === null"
                />
                <b-input-group-append>
                  <div v-if="campaignId !== null && isLoading('memberCampaignReportLoading')" class="pl-2 py-1">
                    <icon name="spinner" pulse class="text-primary icon-size-3" />
                  </div>
                  <b-btn
                    v-else-if="
                      searchText !== '' && !(isLoading('memberListLoading') || isLoading('memberCampaignReportLoading'))
                    "
                    variant="link"
                    :title="$t('Report.CampaignReport.ClickToRemove')"
                    @click="clearSearchInput"
                    class="border-light border-left-0"
                  >
                    <icon name="clear-icon" class="" />
                  </b-btn>
                  <b-btn
                    class="bg-transparent text-success border-light rounded-0"
                    :disabled="campaignId === null"
                    @click="refreshCampaignList"
                  >
                    <icon name="search" />
                  </b-btn>
                </b-input-group-append>
              </b-input-group>
              <span
                class="small text-danger"
                v-if="
                  searchText != '' &&
                    getMemberList.length === 0 &&
                    !(isLoading('memberListLoading') || isLoading('memberCampaignReportLoading'))
                "
              >
                {{ $t('Common.RecordNotFound') }}
              </span>
            </div>
          </div>
        </section>
      </div>
    </div>
    <div v-if="showReport">
      <campaign-report-table
        :grid-columns="getMemberCampaignReportColumns"
        :grid-data="getMemberCampaignReportData"
        :grid-footnotes="getMemberCampaignReportFootnotes"
      />
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import campaignReportTable from './blocks/CampaignReportTable'
import EshopAutocomplete from '@/app/_global/components/elements/EshopAutocomplete'

export default {
  name: 'CampaignReport',
  $_veeValidate: {
    validator: 'new',
  },
  components: {
    campaignReportTable,
    EshopAutocomplete,
  },
  data() {
    return {
      showReport: false,
      campaignId: null,
      searchText: '',
      countryId: null,
    }
  },
  mounted() {
    this.loadIBODetails()
    this.loadCampaignList(this.countryId)
    this.searchMemberList('')
  },
  created() {},
  methods: {
    ...mapActions([
      'loadCampaignList',
      'loadIBODetails',
      'searchMemberList',
      'getSelectedMemberDetail',
      'getMemberCampaignReport',
    ]),
    clearSearchInput() {
      let oldCampaignList = this.getCampaignList
      let oldCampaign = oldCampaignList.find(item => item.id === this.campaignId)
      this.searchText = ''
      this.searchMemberList('')
      this.campaignId = null
      this.userId = null
      this.countryId = null
      this.loadCampaignList(this.countryId).then(response => {
        if (typeof oldCampaign !== 'undefined' && oldCampaign !== null) {
          let newCampaignList = this.getCampaignList
          let newCampaign = newCampaignList.find(item => item.report_group === oldCampaign.report_group)
          if (typeof newCampaign !== 'undefined' && newCampaign !== null) {
            this.campaignId = newCampaign.id
          }
        }
        this.campaignChange(this.campaignId)
      })
    },
    campaignChange: function(val) {
      this.campaignId = val
      if (this.campaignId === null) {
        this.showReport = false
      } else {
        this.getMemberCampaignReport({
          user_id: this.userId || this.getMemberDetails.user_id,
          campaign_id: this.campaignId,
        })
        this.showReport = true
      }
    },
    setSelectedDownline(val) {
      this.userId = val.user_id
      this.countryId = val.country_id
      this.refreshCampaignList()
    },
    refreshCampaignList() {
      let oldCampaignList = this.getCampaignList
      let oldCampaign = oldCampaignList.find(item => item.id === this.campaignId)
      this.loadCampaignList(this.countryId).then(response => {
        if (typeof oldCampaign !== 'undefined' && oldCampaign !== null) {
          let newCampaignList = this.getCampaignList
          let newCampaign = newCampaignList.find(item => item.report_group === oldCampaign.report_group)
          if (typeof newCampaign !== 'undefined' && newCampaign !== null) {
            this.campaignId = newCampaign.id
          }
        }
        this.campaignChange(this.campaignId)
      })
    },
  },
  computed: {
    ...mapGetters([
      'getCampaignList',
      'getCampaignOptions',
      'getMemberList',
      'getMemberDetails',
      'getMemberCampaignReportData',
      'getMemberCampaignReportColumns',
      'getMemberCampaignReportFootnotes',
      'isLoading',
    ]),
  },
}
</script>
