import WPicker from "../WPicker"; // Mixins

import Picker from "../../../lib/mixins/picker"; // Utils

import mixins from "../../../lib/utils/mixins";
var columnType;

(function (columnType) {
  columnType["province"] = "province";
  columnType["city"] = "city";
  columnType["county"] = "county";
})(columnType || (columnType = {}));

export default mixins(Picker).extend({
  name: 'w-area-picker',
  components: {
    WPicker: WPicker
  },
  props: {
    areaList: {
      type: Object,
      default: function _default() {
        return {};
      }
    },
    visibleItemCount: {
      type: Number,
      default: 7
    },
    columnsCount: {
      type: [String, Number],
      default: 3,
      validator: function validator(value) {
        return value >= 1 && value <= 3;
      }
    },
    value: {
      type: String,
      required: false
    }
  },
  data: function data() {
    return {
      internalValue: this.value,
      columns: [{
        options: []
      }, {
        options: []
      }, {
        options: []
      }]
    };
  },
  computed: {
    province: function province() {
      return this.areaList.province_list || {};
    },
    city: function city() {
      return this.areaList.city_list || {};
    },
    county: function county() {
      return this.areaList.county_list || {};
    },
    displayColumns: function displayColumns() {
      return this.columns.slice(0, +this.columnsCount);
    }
  },
  watch: {
    value: function value(val) {
      this.internalValue = val;
    },
    internalValue: function internalValue(val) {
      this.setOptions();
    },
    areaList: {
      deep: true,
      handler: function handler() {
        this.setOptions();
      }
    }
  },
  mounted: function mounted() {
    this.setOptions();
  },
  methods: {
    getList: function getList(type) {
      var code = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
      var result = [];

      if (type !== 'province' && !code) {
        return result;
      }

      var list = this[type];
      result = Object.keys(list).map(function (listCode) {
        return {
          code: listCode,
          name: list[listCode]
        };
      });

      if (code) {
        result = result.filter(function (item) {
          return item.code.indexOf(code) === 0;
        });
      }

      return result;
    },
    // get index for column
    getIndex: function getIndex(type, code) {
      var compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
      var list = this.getList(type, code.slice(0, compareNum - 2));
      code = code.slice(0, compareNum);

      for (var i = 0; i < list.length; i++) {
        if (list[i].code.slice(0, compareNum) === code) {
          return i;
        }
      }

      return 0;
    },
    // set column options
    setOptions: function setOptions() {
      var _this = this;

      var code = this.internalValue || Object.keys(this.county)[0] || '';
      var picker = this.$refs.picker;
      /* istanbul ignore next */

      if (!picker) {
        return;
      }

      var province = this.getList(columnType.province);
      var city = this.getList(columnType.city, code.slice(0, 2));
      picker.setColumnOptions(0, province);
      picker.setColumnOptions(1, city);

      if (city.length && code.slice(2, 4) === '00') {
        code = city[0].code;
      }

      picker.setColumnOptions(2, this.getList(columnType.county, code.slice(0, 4)));
      picker.$nextTick(function () {
        picker.setIndexes([_this.getIndex(columnType.province, code), _this.getIndex(columnType.city, code), _this.getIndex(columnType.county, code)]);
      });
    },
    // get current selected values of all typeColumns
    getValues: function getValues() {
      return this.$refs.picker ? this.$refs.picker.getValues() : [];
    },
    getArea: function getArea() {
      var values = this.getValues();
      var area = {
        code: '',
        country: '',
        province: '',
        city: '',
        county: ''
      };

      if (!values.length) {
        return area;
      }

      var names = values.map(function (item) {
        return item.name;
      });
      area.code = this.internalValue;

      if (area.code[0] === '9') {
        area.country = names[1] || '';
        area.province = names[2] || '';
      } else {
        area.province = names[0] || '';
        area.city = names[1] || '';
        area.county = names[2] || '';
      }

      return area;
    },
    onChange: function onChange(picker, values, columnIndex) {
      this.internalValue = values[columnIndex].code;
      this.setOptions();
      this.$emit('change', picker, values);
    },
    reset: function reset() {
      this.internalValue = '';
      this.setOptions();
    },
    setColumnByValues: function setColumnByValues(values) {
      this.$refs.picker.setValues(values);
    },
    onCancel: function onCancel() {
      this.isActive = false;
      this.$emit('cancel');
    },
    onConfirm: function onConfirm() {
      this.isActive = false;
      this.$emit('input', this.internalValue);
      this.$emit('confirm', this.internalValue);
    }
  },
  render: function render() {
    var h = arguments[0];
    return h(WPicker, {
      "ref": "picker",
      "attrs": {
        "visible": this.isActive,
        "columns": this.displayColumns,
        "cancelText": this.cancelText,
        "confirmText": this.confirmText,
        "close-on-click-mask": this.closeOnClickMask,
        "visibleItemCount": this.visibleItemCount,
        "valueKey": "name"
      },
      "on": {
        "change": this.onChange,
        "cancel": this.onCancel,
        "confirm": this.onConfirm
      }
    });
  }
});
//# sourceMappingURL=WAreaPicker.js.map