<template>
  <hn-cascader
    ref="hnAddressCascader"
    class="hn-address-cascader"
    :value="addressIDs"
    :props="props"
    :options="districts"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    @change="change">
  </hn-cascader>
</template>

<script>

import { Promise } from 'q';
import HnCascader from 'heiner-ui/packages/cascader';
// include props methods
import mixin from './mixin.js';

export default {
  name: 'HnAddressCascader',
  components: {
    HnCascader
  },
  mixins: [mixin],
  props: {
    placeholder: {
      type: String,
      default: '请选择地区'
    }
  },
  data() {
    const _this = this;
    return {
      props: {
        lazy: true,
        lazyLoad(node, resolve) {
          const { level, value } = node;
          // hack 存在默认值会有记录，应当return
          if (node.children && node.children.length) return resolve([]);
          if (level === 0) {
            if (_this.addressIDs.length) return;
            _this.getAllProvince().then(res => resolve(res));
          } else if (level === 1) {
            _this.getCities(value).then(res => resolve(res));
          } else if (level === 2) {
            _this.getCounties(value).then(res => resolve(res));
          } else {
            _this.getTowns(value).then(res => resolve(res));
          }
        }
      },
      districts: []
    };
  },
  created() {
    if (this.addressIDs.length) {
      this.setDefaultValue(this.addressIDs);
    }
  },
  methods: {
    setCities(provinceID, citys, provinces) {
      const targetProvince = provinces.find(v => v.value === provinceID);
      if (!targetProvince) return;
      targetProvince.children = citys;
    },

    setCounties(cityID, counties, citys) {
      const targetCity = citys.find(v => v.value === cityID);
      if (!targetCity) return;
      targetCity.children = counties;
    },

    setTowns(countyID, towns, counties) {
      const targetCounty = counties.find(v => v.value === countyID);
      if (!targetCounty) return;
      targetCounty.children = towns;
    },

    change(v) {
      if (v.length) {
        const pathLabels = this.$refs.hnAddressCascader.$refs.panel.getNodeByValue(v).pathLabels;
        this.$emit('change', {
          provinceName: pathLabels[0],
          cityName: pathLabels[1],
          countyName: pathLabels[2],
          townName: pathLabels[3],
          provinceID: v[0],
          cityID: v[1],
          countyID: v[2],
          townID: v[3]
        });
      } else {
        this.$emit('change', {
          provinceName: '',
          cityName: '',
          countyName: '',
          townName: '',
          provinceID: '',
          cityID: '',
          countyID: '',
          townID: ''
        });
      }
    },

    setDefaultValue(value) {
      const { level } = this;
      const [provinceID, cityID, countyID] = value;
      const getAddressPipeline = [this.getAllProvince()];
      if (provinceID) {
        getAddressPipeline.push(this.getCities(provinceID));
        if (cityID && level > 2) {
          getAddressPipeline.push(this.getCounties(cityID));
          if (countyID && level > 3) {
            getAddressPipeline.push(this.getTowns(countyID));
          }
        }
      }
      return Promise.all(getAddressPipeline)
        .then(res => {
          const [provinces = [], citys = [], counties = [], towns = []] = res;
          this.setCities(provinceID, citys, provinces);
          this.setCounties(cityID, counties, citys);
          this.setTowns(countyID, towns, counties);
          this.districts = provinces;
        })
        .catch(err => {
          setTimeout(function() { throw err; });
        });
    }
  }
};
</script>
