text: import _extends from "@babel/runtime/helpers/esm/extends";
  import { createNamespace, isObj } from '../utils';
  import { isMobile } from '../utils/validate/mobile';
  import Area from '../area';
  import Field from '../field';
  import Popup from '../popup';
  import Toast from '../toast';
  import Button from '../button';
  import Dialog from '../dialog';
  import Detail from './Detail';
  import SwitchCell from '../switch-cell';
  
  var _createNamespace = createNamespace('address-edit'),
      createComponent = _createNamespace[0],
      bem = _createNamespace[1],
      t = _createNamespace[2];
  
  var defaultData = {
    name: '',
    tel: '',
    country: '',
    province: '',
    city: '',
    county: '',
    areaCode: '',
    postalCode: '',
    addressDetail: '',
    isDefault: false
  };
  
  function isPostal(value) {
    return /^\d{6}$/.test(value);
  }
  
  export default createComponent({
    props: {
      areaList: Object,
      isSaving: Boolean,
      isDeleting: Boolean,
      validator: Function,
      showDelete: Boolean,
      showPostal: Boolean,
      searchResult: Array,
      showSetDefault: Boolean,
      showSearchResult: Boolean,
      saveButtonText: String,
      deleteButtonText: String,
      showArea: {
        type: Boolean,
        default: true
      },
      showDetail: {
        type: Boolean,
        default: true
      },
      detailRows: {
        type: Number,
        default: 1
      },
      detailMaxlength: {
        type: Number,
        default: 200
      },
      addressInfo: {
        type: Object,
        default: function _default() {
          return _extends({}, defaultData);
        }
      },
      telValidator: {
        type: Function,
        default: isMobile
      },
      postalValidator: {
        type: Function,
        default: isPostal
      },
      areaColumnsPlaceholder: {
        type: Array,
        default: function _default() {
          return [];
        }
      }
    },
    data: function data() {
      return {
        data: {},
        showAreaPopup: false,
        detailFocused: false,
        errorInfo: {
          tel: false,
          name: false,
          postalCode: false,
          addressDetail: false
        }
      };
    },
    computed: {
      areaListLoaded: function areaListLoaded() {
        return isObj(this.areaList) && Object.keys(this.areaList).length;
      },
      areaText: function areaText() {
        var _this$data = this.data,
            country = _this$data.country,
            province = _this$data.province,
            city = _this$data.city,
            county = _this$data.county,
            areaCode = _this$data.areaCode;
  
        if (areaCode) {
          var arr = [country, province, city, county];
  
          if (province && province === city) {
            arr.splice(1, 1);
          }
  
          return arr.filter(function (text) {
            return text;
          }).join('/');
        }
  
        return '';
      }
    },
    watch: {
      addressInfo: {
        handler: function handler(val) {
          this.data = _extends({}, defaultData, {}, val);
          this.setAreaCode(val.areaCode);
        },
        deep: true,
        immediate: true
      },
      areaList: function areaList() {
        this.setAreaCode(this.data.areaCode);
      }
    },
    methods: {
      onFocus: function onFocus(key) {
        this.errorInfo[key] = false;
        this.detailFocused = key === 'addressDetail';
        this.$emit('focus', key);
      },
      onChangeDetail: function onChangeDetail(val) {
        this.data.addressDetail = val;
        this.$emit('change-detail', val);
      },
      onAreaConfirm: function onAreaConfirm(values) {
        if (values.some(function (value) {
          return !value.code;
        })) {
          Toast(t('areaEmpty'));
          return;
        }
  
        this.showAreaPopup = false;
        this.assignAreaValues();
        this.$emit('change-area', values);
      },
      assignAreaValues: function assignAreaValues() {
        var area = this.$refs.area;
  
        if (area) {
          var detail = area.getArea();
          detail.areaCode = detail.code;
          delete detail.code;
  
          _extends(this.data, detail);
        }
      },
      onSave: function onSave() {
        var _this = this;
  
        var items = ['name', 'tel', 'areaCode', 'addressDetail'];
  
        if (this.showPostal) {
          items.push('postalCode');
        }
  
        var isValid = items.every(function (item) {
          var msg = _this.getErrorMessage(item);
  
          if (msg) {
            _this.errorInfo[item] = true;
            Toast(msg);
          }
  
          return !msg;
        });
  
        if (isValid && !this.isSaving) {
          this.$emit('save', this.data);
        }
      },
      getErrorMessage: function getErrorMessage(key) {
        var value = String(this.data[key] || '').trim();
  
        if (this.validator) {
          var message = this.validator(key, value);
  
          if (message) {
            return message;
          }
        }
  
        switch (key) {
          case 'name':
            return value ? '' : t('nameEmpty');
  
          case 'tel':
            return this.telValidator(value) ? '' : t('telInvalid');
  
          case 'areaCode':
            return value ? '' : t('areaEmpty');
  
          case 'addressDetail':
            return value ? '' : t('addressEmpty');
  
          case 'postalCode':
            return value && !this.postalValidator(value) ? t('postalEmpty') : '';
        }
      },
      onDelete: function onDelete() {
        var _this2 = this;
  
        Dialog.confirm({
          title: t('confirmDelete')
        }).then(function () {
          _this2.$emit('delete', _this2.data);
        }).catch(function () {
          _this2.$emit('cancel-delete', _this2.data);
        });
      },
      // get values of area component
      getArea: function getArea() {
        return this.$refs.area ? this.$refs.area.getValues() : [];
      },
      // set area code to area component
      setAreaCode: function setAreaCode(code) {
        this.data.areaCode = code || '';
  
        if (code) {
          this.$nextTick(this.assignAreaValues);
        }
      },
      setAddressDetail: function setAddressDetail(value) {
        this.data.addressDetail = value;
      },
      onDetailBlur: function onDetailBlur() {
        var _this3 = this;
  
        // await for click search event
        setTimeout(function () {
          _this3.detailFocused = false;
        });
      }
    },
    render: function render() {
      var _this4 = this;
  
      var h = arguments[0];
      var data = this.data,
          errorInfo = this.errorInfo,
          searchResult = this.searchResult;
  
      var onFocus = function onFocus(name) {
        return function () {
          return _this4.onFocus(name);
        };
      }; // hide bottom field when use search && detail get focused
  
  
      var hideBottomFields = searchResult && searchResult.length && this.detailFocused;
      return h("div", {
        "class": bem()
      }, [h(Field, {
        "attrs": {
          "clearable": true,
          "label": t('name'),
          "placeholder": t('namePlaceholder'),
          "error": errorInfo.name
        },
        "on": {
          "focus": onFocus('name')
        },
        "model": {
          value: data.name,
          callback: function callback($$v) {
            data.name = $$v;
          }
        }
      }), h(Field, {
        "attrs": {
          "clearable": true,
          "type": "tel",
          "label": t('tel'),
          "placeholder": t('telPlaceholder'),
          "error": errorInfo.tel
        },
        "on": {
          "focus": onFocus('tel')
        },
        "model": {
          value: data.tel,
          callback: function callback($$v) {
            data.tel = $$v;
          }
        }
      }), h(Field, {
        "directives": [{
          name: "show",
          value: this.showArea
        }],
        "attrs": {
          "readonly": true,
          "label": t('area'),
          "placeholder": t('areaPlaceholder'),
          "value": this.areaText
        },
        "on": {
          "click": function click() {
            _this4.showAreaPopup = true;
          }
        }
      }), h(Detail, {
        "directives": [{
          name: "show",
          value: this.showDetail
        }],
        "attrs": {
          "focused": this.detailFocused,
          "value": data.addressDetail,
          "error": errorInfo.addressDetail,
          "detailRows": this.detailRows,
          "detailMaxlength": this.detailMaxlength,
          "searchResult": this.searchResult,
          "showSearchResult": this.showSearchResult
        },
        "on": {
          "focus": onFocus('addressDetail'),
          "blur": this.onDetailBlur,
          "input": this.onChangeDetail,
          "select-search": function selectSearch(event) {
            _this4.$emit('select-search', event);
          }
        }
      }), this.showPostal && h(Field, {
        "directives": [{
          name: "show",
          value: !hideBottomFields
        }],
        "attrs": {
          "type": "tel",
          "maxlength": "6",
          "label": t('postal'),
          "placeholder": t('postal'),
          "error": errorInfo.postalCode
        },
        "on": {
          "focus": onFocus('postalCode')
        },
        "model": {
          value: data.postalCode,
          callback: function callback($$v) {
            data.postalCode = $$v;
          }
        }
      }), this.slots(), this.showSetDefault && h(SwitchCell, {
        "directives": [{
          name: "show",
          value: !hideBottomFields
        }],
        "attrs": {
          "title": t('defaultAddress')
        },
        "on": {
          "change": function change(event) {
            _this4.$emit('change-default', event);
          }
        },
        "model": {
          value: data.isDefault,
          callback: function callback($$v) {
            data.isDefault = $$v;
          }
        }
      }), h("div", {
        "directives": [{
          name: "show",
          value: !hideBottomFields
        }],
        "class": bem('buttons')
      }, [h(Button, {
        "attrs": {
          "block": true,
          "loading": this.isSaving,
          "type": "danger",
          "text": this.saveButtonText || t('save')
        },
        "on": {
          "click": this.onSave
        }
      }), this.showDelete && h(Button, {
        "attrs": {
          "block": true,
          "loading": this.isDeleting,
          "text": this.deleteButtonText || t('delete')
        },
        "on": {
          "click": this.onDelete
        }
      })]), h(Popup, {
        "attrs": {
          "position": "bottom",
          "lazyRender": false,
          "getContainer": "body"
        },
        "model": {
          value: _this4.showAreaPopup,
          callback: function callback($$v) {
            _this4.showAreaPopup = $$v;
          }
        }
      }, [h(Area, {
        "ref": "area",
        "attrs": {
          "loading": !this.areaListLoaded,
          "value": data.areaCode,
          "areaList": this.areaList,
          "columnsPlaceholder": this.areaColumnsPlaceholder
        },
        "on": {
          "confirm": this.onAreaConfirm,
          "cancel": function cancel() {
            _this4.showAreaPopup = false;
          }
        }
      })])]);
    }
  });