"use strict";

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

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

var _create = _interopRequireDefault(require("../utils/create"));

var _Key = _interopRequireDefault(require("./Key"));

var DELETE_KEY_THEME = ['delete', 'big', 'gray'];
var CLOSE_KEY_THEME = ['blue', 'big'];

var _default = (0, _create.default)({
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.show,
        expression: "show"
      }],
      style: _vm.style
    }, [_c('transition', {
      attrs: {
        "name": this.transition ? 'vm-slide-up' : ''
      }
    }, [_c('div', {
      ref: "safeKeyboard",
      class: _vm.b({
        unfit: !this.safeAreaInsetBottom
      }),
      style: {
        zIndex: this.zIndex
      },
      on: {
        "touchstart": function touchstart($event) {
          $event.stopPropagation();
        },
        "animationend": _vm.onAnimationEnd,
        "webkitAnimationEnd": _vm.onAnimationEnd
      }
    }, [_c('div', {
      class: _vm.b('header')
    }, [_c('span', {
      class: _vm.b('title-left')
    }, [_vm._t("title-left")], 2), _vm.title ? _c('h2', {
      class: _vm.b('title')
    }, [_vm._v("\n          " + _vm._s(_vm.title) + "\n        ")]) : _vm._e(), _vm.closeButtonText ? _c('button', {
      class: _vm.b('close'),
      attrs: {
        "type": "button"
      },
      on: {
        "click": _vm.onClose
      }
    }, [_vm._v("\n          " + _vm._s(_vm.closeButtonText) + "\n        ")]) : _vm._e()]), _c('div', {
      class: _vm.b('body')
    }, [_vm._l(_vm.keys, function (item, index) {
      return _c('div', {
        key: index,
        class: _vm.b('keys', item.className)
      }, _vm._l(item.list, function (key, j) {
        return _c('Key', {
          key: j,
          attrs: {
            "theme": _vm.themeTemp || _vm.theme,
            "text": key.text,
            "type": key.type,
            "space": key.space,
            "wider": key.wider,
            "color": key.color
          },
          on: {
            "press": _vm.onPress
          },
          scopedSlots: _vm._u([{
            key: "delete",
            fn: function fn() {
              return [_vm._t("delete")];
            },
            proxy: true
          }, {
            key: "extraKey",
            fn: function fn() {
              return [_vm._t("extraKey")];
            },
            proxy: true
          }], null, true)
        });
      }), 1);
    }), _vm.theme === 'custom' || _vm.theme === 'number' && _vm.themeTemp === '' || _vm.theme === 'number' && _vm.themeTemp === 'number' || _vm.theme === 'letter' && _vm.themeTemp === 'number' || _vm.theme === 'letter-number' && _vm.themeTemp === 'number' ? _c('div', {
      class: _vm.b('sidebar')
    }, [_vm.showDeleteKey ? _c('Key', {
      attrs: {
        "text": _vm.deleteButtonText,
        "type": "delete",
        "large": ""
      },
      on: {
        "press": _vm.onPress
      },
      scopedSlots: _vm._u([{
        key: "delete",
        fn: function fn() {
          return [_vm._t("delete")];
        },
        proxy: true
      }], null, true)
    }) : _vm._e(), _c('Key', {
      attrs: {
        "text": _vm.closeButtonText || _vm.closeButtonTextTemp,
        "type": "close",
        "color": "blue",
        "large": "",
        "loading": _vm.closeButtonLoading
      },
      on: {
        "press": _vm.onPress
      }
    })], 1) : _vm._e()], 2)])])], 1);
  },
  name: 'safe-keyboard',
  components: {
    Key: _Key.default
  },
  props: {
    show: Boolean,
    title: String,
    zIndex: [Number, String],
    closeButtonText: String,
    deleteButtonText: String,
    closeButtonLoading: Boolean,
    theme: {
      type: String,
      default: 'default'
    },
    value: {
      type: [String, Number],
      default: ''
    },
    extraKey: {
      type: [String, Array],
      default: ''
    },
    maxlength: {
      type: [Number, String],
      default: Number.MAX_VALUE
    },
    transition: {
      type: Boolean,
      default: true
    },
    showDeleteKey: {
      type: Boolean,
      default: true
    },
    hideOnClickOutside: {
      type: Boolean,
      default: true
    },
    safeAreaInsetBottom: {
      type: Boolean,
      default: true
    }
  },
  data: function data() {
    return {
      capital: false,
      themeTemp: '',
      height: '',
      closeButtonTextTemp: '完成'
    };
  },
  watch: {
    show: function show(val) {
      if (!this.transition) {
        this.$emit(val ? 'show' : 'hide');
      }
    }
  },
  methods: {
    genBasicKeys: function genBasicKeys() {
      var keys = [];

      for (var i = 1; i <= 9; i++) {
        keys.push({
          text: i
        });
      }

      return keys;
    },
    genDefaultKeys: function genDefaultKeys() {
      var keys = [].concat(this.genBasicKeys(), [{
        text: this.extraKey,
        type: 'extra'
      }, {
        text: 0
      }]);

      if (this.showDeleteKey) {
        keys.push({
          text: this.deleteButtonText ? this.deleteButtonText : '',
          type: 'delete'
        });
      }

      return [{
        className: '',
        list: keys
      }];
    },
    genCustomKeys: function genCustomKeys(array) {
      var keys = this.genBasicKeys();
      var extraKey = this.extraKey;
      var extraKeys = Array.isArray(extraKey) ? extraKey : [extraKey];

      if (array) {
        extraKeys = array;
      }

      if (extraKeys.length === 1) {
        keys.push({
          text: 0,
          wider: true
        }, {
          text: extraKeys[0],
          type: 'extra'
        });
      } else if (extraKeys.length === 2) {
        keys.push({
          text: extraKeys[0],
          type: 'extra'
        }, {
          text: 0
        }, {
          text: extraKeys[1],
          type: 'extra'
        });
      }

      return [{
        className: '',
        list: keys
      }];
    },
    getNumberKeys: function getNumberKeys() {
      var keys = this.genBasicKeys();
      keys.push({
        text: '英文',
        type: 'extra'
      }, {
        text: 0
      }, {
        text: '.',
        type: 'extra'
      });
      return [{
        className: '',
        list: keys
      }];
    },
    getLetterAndNumberKeys: function getLetterAndNumberKeys() {
      var keys = [{
        text: 0
      }];
      keys = keys.concat(this.genBasicKeys());
      return [{
        className: '',
        list: keys
      }].concat(this.getLetterKeys());
    },
    getLetterKeys: function getLetterKeys() {
      var _this = this;

      var self = this;
      var letters = [['q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p'], ['a', 's', 'd', 'f', 'g', 'h', 'j', 'k'], ['z', 'x', 'c', 'v', 'b', 'n', 'm']];
      var keys = [];
      letters.forEach(function (val) {
        var key = [];
        var c = false;
        var d = false;
        val.forEach(function (val1) {
          if (val1 === 'a') {
            c = true;
          }

          if (val1 === 'z') {
            d = true;
          }

          if (self.capital) {
            key.push({
              text: val1.toUpperCase()
            });
          } else {
            key.push({
              text: val1
            });
          }
        });

        if (c) {
          keys.push({
            className: 'letter1',
            list: key
          });
          c = false;
        } else if (d) {
          key.unshift({
            text: '',
            type: 'capital'
          });

          if (_this.showDeleteKey) {
            key.push({
              text: _this.deleteButtonText ? _this.deleteButtonText : '',
              type: 'delete'
            });
            keys.push({
              className: 'letter',
              list: key
            });
            d = false;
          }
        } else {
          keys.push({
            className: 'letter',
            list: key
          });
        }
      });
      keys.push({
        className: 'letter',
        list: [{
          text: '123',
          type: ''
        }, {
          text: ',',
          type: ''
        }, {
          text: '',
          type: 'space',
          space: true
        }, {
          text: '.',
          type: ''
        }, {
          text: '',
          type: 'extra'
        }]
      });
      return keys;
    },
    onBlur: function onBlur() {
      this.show && this.$emit('blur');
    },
    onClose: function onClose() {
      this.$emit('close');
      this.onBlur();
    },
    onAnimationEnd: function onAnimationEnd() {
      this.$emit(this.show ? 'show' : 'hide');
    },
    onPress: function onPress(text, type) {
      if (text === '' && type === 'extra') {
        this.onBlur();
        return;
      }

      var value = this.value;

      if (type === 'delete') {
        this.$emit('delete');
        this.$emit('input', value.slice(0, value.length - 1));
      } else if (type === 'close') {
        this.onClose();
      } else if (type === 'capital') {
        this.capital = !this.capital;
      } else if (text === '123') {
        this.themeTemp = 'number';
      } else if (text === '英文') {
        if (this.theme === 'letter-number') {
          this.themeTemp = this.theme;
        } else {
          this.themeTemp = 'letter';
        }
      } else if (value.length < this.maxlength) {
        this.$emit('input', value + text);
        this.$emit('getKey', text);
      }
    }
  },
  updated: function updated() {
    if (this.$refs.safeKeyboard) {
      this.height = this.$refs.safeKeyboard.clientHeight + 'px';
    } else {
      this.height = 0;
    }
  },
  mounted: function mounted() {
    if (this.hideOnClickOutside) {
      document.body.addEventListener('touchstart', this.onBlur);
    }
  },
  computed: {
    style: function style() {
      return {
        height: this.height
      };
    },
    keys: function keys() {
      var keys = [];
      var theme = this.theme;

      if (this.themeTemp) {
        theme = this.themeTemp;
      }

      switch (theme) {
        case 'custom':
          keys = this.genCustomKeys();
          break;

        case 'number':
          keys = this.getNumberKeys();
          break;

        case 'letter':
          keys = this.getLetterKeys();
          break;

        case 'letter-number':
          keys = this.getLetterAndNumberKeys();
          break;

        default:
          keys = this.genDefaultKeys();
          break;
      }

      return keys;
    }
  }
});

exports.default = _default;