<template>
  <b-container fluid>
    <b-row class="my-2">
      <b-col class="col pt-2">
        {{ $t('Eshop.Order.Shipping.Method.SelfCollection.CollectionPoint') }}
        <span class="text-danger">
          *
        </span>
      </b-col>
    </b-row>
    <b-row no-gutters>
      <b-col xs="3" sm="4" md="6" lg="6" xl="3">
        <b-form-select v-model="state" @change="setCities">
          <option value="null" disabled>
            {{ $t('Eshop.Order.GlobalWords.SelectState') }}
          </option>
          <option v-for="(stateData, StateIdx) in states" :value="stateData.id" :key="StateIdx">
            {{ stateData.name }}
          </option>
        </b-form-select>
      </b-col>
      <b-col xs="3" sm="4" md="6" lg="6" xl="3">
        <b-form-select v-model="cityName" @change="changeStateCity">
          <option value="null" disabled>
            {{ $t('Eshop.Order.GlobalWords.SelectCity') }}
          </option>
          <option v-for="(cityData, cityIdx) in cities" :value="cityData.name" :key="cityIdx">
            {{ cityData.name }}
          </option>
        </b-form-select>
      </b-col>
      <b-col md="8">
        <b-link target="_blank" :href="getStockistUrl()">
          {{ $t('Eshop.Order.Shipping.Method.SelfCollection.CheckLocationPointList') }}
        </b-link>
      </b-col>
    </b-row>

    <div v-if="collPointDetail.length > 0" class="pl-3 pt-4">
      <b-row class="collpoint-details" v-for="(pointData, pointIdx) in collPointDetail" :key="pointIdx">
        <b-col>
          <b-row>
            <strong>{{ pointData.state }} - {{ pointData.area }}</strong>
          </b-row>
          <b-row>
            <strong>[ {{ pointData.contactPerson }} ] </strong>
          </b-row>
          <b-row> {{ pointData.streetName }}, {{ pointData.zipCode }} </b-row>
          <b-row> {{ pointData.area }}, {{ pointData.state }} </b-row>
          <b-row>
            {{ $t('OrderHistory.Detail.eVoucher.ShippingMethod.SelfCollection.Tel') }} : {{ pointData.telNo }}
          </b-row>
        </b-col>
      </b-row>
    </div>
  </b-container>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { mapMasterDataId } from '@/app/_global/mixins'
export default {
  name: 'EvoucherShippingSelfcollection',
  components: {},
  props: ['memberData'],
  methods: {
    ...mapActions(['setCollPointState', 'setCollPointCity', 'getEformLink']),
    setCities: function(val) {
      this.cities = null
      let states = this.getStateListByCountryId(this.getSelectedCountry.id)
      states.forEach(state => {
        if (state.id === val) {
          this.stateName = state.name
          this.cities = state.cities
        }
      })
    },
    changeStateCity: function(city) {
      this.setCollPointState('Johor')
      this.setCollPointCity('Johor Bahru')
      this.collPointDetail = this.getCollectionPoint
    },
    getStockistUrl() {
      if (this.getEformLinkData[0] !== undefined) {
        return this.getEformLinkData[0].link
      }
    },
  },
  data() {
    return {
      state: null,
      stateName: '',
      cityName: '',
      states: [],
      cities: [],
      collPointDetail: [],
    }
  },
  mounted() {
    this.states = this.getStateListByCountryId(this.getSelectedCountry.id)
    this.getEformLink([this.stockistListId])
  },
  computed: {
    ...mapGetters([
      'getStates',
      'getCollectionPoint',
      'getSelectedCountry',
      'getStateListByCountryId',
      'getEformLinkData',
    ]),
    ...mapMasterDataId({
      SMART_LIBRARY_EFORM_FILE_TYPE: {
        stockistListId: 'STOCKIST_LIST',
      },
    }),
  },
}
</script>
