"use strict";

var _interopRequireDefault = require("@babel/runtime-corejs2/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _assign = _interopRequireDefault(require("@babel/runtime-corejs2/core-js/object/assign"));

require("./index.css");

var _input = _interopRequireDefault(require("../../input"));

var _icon = _interopRequireDefault(require("../../icon"));

var _base = require("../../../utils/base");

var _popover = _interopRequireDefault(require("../../popover"));

var _vueNormalizeComponent = _interopRequireDefault(require("../../../utils/vue-normalize-component.js"));

/* script */
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var __vue_script__ = {
  name: (0, _base.createComponentName)('phone-number'),
  components: {
    GdInput: _input.default,
    Icon: _icon.default,
    Popover: _popover.default
  },
  mixins: [_base.componentMixin],
  model: {
    event: 'update',
    name: 'value'
  },
  props: {
    value: {
      type: Object,
      required: true
    },
    countries: {
      type: Array,

      default() {
        return [{
          name: '中国',
          code: 86
        }, {
          name: '中国香港',
          code: 852
        }, {
          name: '中国澳门',
          code: 853
        }, {
          name: '中国台湾地区',
          code: 886
        }];
      }

    },
    loading: {
      type: Boolean,
      defalut: false
    },
    checked: {
      type: Boolean,
      defalut: false
    }
  },

  data() {
    return {
      showCountryList: false,
      innerValue: (0, _assign.default)({}, this.value)
    };
  },

  watch: {
    value(value) {
      if (value) this.innerValue = value;
    }

  },
  methods: {
    onUpdateVisible(value) {
      if (value) return;
      this.showCountryList = value;
    },

    selectCountry(code) {
      this.showCountryList = false;
      this.innerValue.code = code;
      this.$emit('update', (0, _assign.default)({}, this.innerValue));
    },

    toggleCountryList() {
      this.showCountryList = !this.showCountryList;
    }

  }
};
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c("div", {
    class: _vm.bem()
  }, [_c("Popover", {
    attrs: {
      trigger: "click",
      offset: "4px",
      visible: _vm.showCountryList,
      placement: "bottom-start"
    },
    on: {
      "update:visible": _vm.onUpdateVisible
    }
  }, [_c("GdInput", _vm._g(_vm._b({
    attrs: {
      type: "tel",
      maxlength: "20",
      autocomplete: "on",
      placeholder: "输入手机号码"
    },
    on: {
      input: function input(e) {
        return _vm.$emit("update", _vm.innerValue);
      }
    },
    model: {
      value: _vm.innerValue.number,
      callback: function callback($$v) {
        _vm.$set(_vm.innerValue, "number", $$v);
      },
      expression: "innerValue.number"
    }
  }, "GdInput", _vm.$attrs, false), _vm.$listeners), [_c("template", {
    slot: "prepend"
  }, [_c("label", {
    class: _vm.bem("code", {
      active: _vm.showCountryList
    }),
    on: {
      click: _vm.toggleCountryList
    }
  }, [_vm._v("\n                    " + _vm._s("+" + _vm.innerValue.code) + "\n                    "), _c("Icon", {
    attrs: {
      name: "triangle-down"
    }
  })], 1)]), _vm._v(" "), _c("template", {
    slot: "append"
  }, [_c("div", {
    directives: [{
      name: "show",
      rawName: "v-show",
      value: _vm.loading,
      expression: "loading"
    }],
    staticClass: "loading-status"
  }), _vm._v(" "), _c("Icon", {
    directives: [{
      name: "show",
      rawName: "v-show",
      value: _vm.checked,
      expression: "checked"
    }],
    staticStyle: {
      color: "60C94D"
    },
    attrs: {
      name: "check"
    }
  })], 1)], 2), _vm._v(" "), _c("div", {
    directives: [{
      name: "show",
      rawName: "v-show",
      value: _vm.showCountryList,
      expression: "showCountryList"
    }],
    class: _vm.bem("country-list"),
    attrs: {
      slot: "popup",
      pla: ""
    },
    slot: "popup"
  }, [_c("ul", _vm._l(_vm.countries, function (country, index) {
    return _c("li", {
      key: index,
      on: {
        click: function click($event) {
          _vm.selectCountry(country.code);
        }
      }
    }, [_vm._v(_vm._s(country.name + " +" + country.code))]);
  }), 0)])], 1)], 1);
};

var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = undefined;
/* module identifier */

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* component normalizer */

/* style inject */

/* style inject SSR */
var _default = (0, _vueNormalizeComponent.default)({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);

exports.default = _default;