<template>
  <div class="hn-address-select">
    <hn-select
      v-model="currentProvince"
      :placeholder="placeholder[0]"
      class="hn-address-select--province"
      value-key="value"
      :disabled="disabled"
      :clearable="clearable">
      <hn-option
        v-for="item in provinces"
        :key="item.value"
        :label="item.label"
        :value="item" />
    </hn-select>
    <hn-select
      v-if="level > 1"
      v-model="currentCity"
      :placeholder="placeholder[1]"
      class="hn-address-select--city"
      value-key="value"
      :disabled="disabled"
      :clearable="clearable">
      <hn-option
        v-for="item in cities"
        :key="item.value"
        :label="item.label"
        :value="item" />
    </hn-select>
    <hn-select
      v-if="level > 2"
      v-model="currentCounty"
      :placeholder="placeholder[2]"
      class="hn-address-select--county"
      value-key="value"
      :disabled="disabled"
      :clearable="clearable">
      <hn-option
        v-for="item in counties"
        :key="item.value"
        :label="item.label"
        :value="item" />
    </hn-select>
    <hn-select
      v-if="level > 3"
      v-model="currentTown"
      :placeholder="placeholder[3]"
      class="hn-address-select--town"
      value-key="value"
      :disabled="disabled"
      :clearable="clearable">
      <hn-option
        v-for="item in towns"
        :key="item.value"
        :label="item.label"
        :value="item" />
    </hn-select>
  </div>
</template>

<script>
  import debounce from 'lodash/debounce';
  import HnSelect from 'heiner-ui/packages/select';
  import HnOption from 'heiner-ui/packages/option';
  // include props methods
  import mixin from './mixin.js';

  export default {
    name: 'HnAddressSelect',
    components: {
      HnSelect,
      HnOption
    },
    mixins: [mixin],
    props: {
      placeholder: {
        type: Array,
        default: () => (['请选择省', '市', '区/县', '乡/镇/街道'])
      }
    },
    data() {
      return {
        provinces: [],
        cities: [],
        counties: [],
        towns: [],

        currentProvince: null,
        currentCity: null,
        currentCounty: null,
        currentTown: null
      };
    },
    computed: {},
    watch: {
      currentProvince(val) {
        this.cities = [];
        val && this.setCities(val.value, !!val.label);
        if (val && !val.label) return;
        this.currentCity = null;
        this.change();
      },

      currentCity(val) {
        this.counties = [];
        val && this.setCounties(val.value, !!val.label);
        if (val && !val.label) return;
        this.currentCounty = null;
        this.change();
      },

      currentCounty(val) {
        this.towns = [];
        val && this.setTowns(val.value);
        if (val && !val.label) return;
        this.currentTown = null;
        this.change();
      },

      currentTown(val) {
        if (val && !val.label) return;
        this.change();
      }
    },
    created() {
      this.setProvinces();
      if (this.addressIDs.length) {
        this.setDefaultValue(this.addressIDs);
      }
    },
    mounted() {},
    methods: {
      setProvinces() {
        this.getAllProvince()
          .then(provinces => {
            this.provinces = provinces;
          });
      },

      setCities(provinceID, forceInit) {
        this.getCities(provinceID)
          .then(cities => {
            this.cities = cities;

            if (forceInit) {
              this.counties = [];
            }
          });
      },

      setCounties(cityID, forceInit) {
        if (this.level <= 2) return;
        this.getCounties(cityID)
          .then(counties => {
            this.counties = counties;

            if (forceInit) {
              this.towns = [];
            }
          })
          .catch(() => {
            if (forceInit) {
              this.towns = [];
            }
          });
      },

      setTowns(countyID) {
        if (this.level <= 3) return;
        this.getTowns(countyID)
          .then(towns => {
            this.towns = towns;
          });
      },

      change: debounce(function() {
        const { currentProvince, currentCity, currentCounty, currentTown } = this;
        this.$emit('change', {
          provinceName: currentProvince.label,
          cityName: currentCity && currentCity.label,
          countyName: currentCounty && currentCounty.label,
          townName: currentTown && currentTown.label,
          provinceID: currentProvince.value,
          cityID: currentCity && currentCity.value,
          countyID: currentCounty && currentCounty.value,
          townID: currentTown && currentTown.value
        });
      }, 500),

      setDefaultValue(addressIDs) {
        const [provinceID, cityID, countyID, townID] = addressIDs;
        if (provinceID) {
          this.currentProvince = { value: provinceID };
        }
        if (cityID) {
          this.currentCity = { value: cityID };
        }
        if (countyID) {
          this.currentCounty = { value: countyID };
        }
        if (townID) {
          this.currentTown = { value: townID };
        }
      }
    }
  };
</script>
