<template>
<div class="vn-pp row justify-center">
  <q-card class="vn-w-md">
    <q-card-section class="q-gutter-md">
      <q-input v-model="address.nickname" :label="$t('consignatary')" />
    </q-card-section>
    <q-card-section class="q-gutter-md">
      <q-input v-model="address.street" :label="$t('street')" />
    </q-card-section>
    <q-card-section class="q-gutter-md">
      <q-input v-model="address.city" :label="$t('city')" />
    </q-card-section>
    <q-card-section class="q-gutter-md">
      <q-input v-model="address.postalCode" :label="$t('postalCode')" />
    </q-card-section>
    <q-card-section class="q-gutter-md">
      <q-select
        v-model="country"
        :label="$t('country')"
        :options="countries"
        option-value="id"
        option-label="country"/>
    </q-card-section>
    <q-card-section class="q-gutter-md">
      <q-select
        v-model="province"
        :label="$t('province')"
        :options="provinces"
        option-value="id"
        option-label="name"/>
    </q-card-section>
    <q-card-section class="q-gutter-md">
      <q-input v-model="address.phone" :label="$t('phone')" />
    </q-card-section>
  </q-card>
  <q-page-sticky position="bottom-right" :offset="[18, 18]">
    <q-btn
      :title="$t(id ? 'save' : 'create')"
      icon="check"
      color="accent"
      @click="onSave"
      fab/>
  </q-page-sticky>
</div>
</template>

<script>
import Page from 'components/Page'

export default {
  name: 'Address',
  mixins: [Page],
  data () {
    return {
      address: {},
      id: null,
      provinces: null,
      countries: null,
      province: null,
      country: null
    }
  },
  mounted () {
    let filter = {
      fields: ['id', 'country']
    }
    this.$axios.get('Countries', { params: { filter } })
      .then(res => (this.countries = res.data))

    this.loadAddress()
  },
  watch: {
    address () {
      this.updateCountry()
    },
    countries () {
      this.updateCountry()
    },
    provinces () {
      this.updateProvince()
    },
    country () {
      this.loadProvinces()
    },
    province (value) {
      if (!this.address.provinceFk) return
      this.address.provinceFk = value && value.id
    },
    'this.$route.params.id': function () {
      this.loadAddress()
    }
  },
  methods: {
    loadAddress () {
      this.id = this.$route.params.id
      this.address = {}

      if (this.id) {
        let filter = {
          fields: [
            'id',
            'nickname',
            'street',
            'city',
            'postalCode',
            'provinceFk',
            'phone'
          ],
          include: {
            relation: 'province',
            scope: {
              fields: ['countryFk']
            }
          }
        }
        this.$axios.get(`Addresses/${this.id}`, { params: { filter } })
          .then(res => (this.address = res.data))
      } else {
        this.address = {
          clientFk: this.$state.user.id
        }
      }
    },
    loadProvinces () {
      this.provinces = null
      if (!this.country) return

      let filter = {
        fields: ['id', 'name'],
        where: { countryFk: this.country.id }
      }
      this.$axios.get('Provinces', { params: { filter } })
        .then(res => (this.provinces = res.data))
    },
    updateCountry () {
      if (!this.countries || !this.address.province) return
      this.country = this.countries.find(
        i => i.id === this.address.province.countryFk)
    },
    updateProvince () {
      if (!this.provinces) return
      let province = this.provinces.find(
        i => i.id === this.address.provinceFk)
      if (province) this.province = province
    },
    onSave () {
      let promise
      let message

      if (this.id) {
        promise = this.$axios.patch(`Addresses/${this.id}`, this.address)
        message = 'dataSaved'
      } else {
        promise = this.$axios.post(`Addresses`, this.address)
        message = 'addressCreated'
      }

      promise.then(res => {
        this.$q.notify({
          message: this.$t(message),
          icon: 'check',
          color: 'green'
        })
        this.$router.go(-1)
      })
    }
  }
}
</script>
