"use strict";

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

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

require("core-js/modules/es6.regexp.search");

require("core-js/modules/es6.regexp.replace");

require("core-js/modules/es6.regexp.constructor");

require("./Search.css");

var _Popover = _interopRequireDefault(require("../Popover"));

var _Input = _interopRequireDefault(require("../Input"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _component = require("../_utils/component.js");

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

/* script */
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var __vue_script__ = {
  name: (0, _component.createComponentName)('header-search'),
  components: {
    Popover: _Popover.default,
    Icon: _Icon.default,
    GdInput: _Input.default
  },
  mixins: [_component.componentMixin],
  props: {
    options: {
      type: Array,

      default() {
        return [];
      }

    },
    light: {
      type: Boolean,
      default: false
    },
    value: {
      type: [String, Number],
      required: true
    }
  },

  data() {
    return {
      focus: false,
      otpionIndex: null,
      flag: false,
      minWidth: 200,
      visableOptions: false
    };
  },

  methods: {
    keywordLight(label) {
      var keyword = this.value;
      var rStr = new RegExp(keyword, 'g');
      var html = label;

      if (keyword !== '' && label) {
        html = label.replace(rStr, function (text) {
          return `<span class="gd-header-search__keyword">${text}</span>`;
        });
      }

      return html;
    },

    search() {
      if (this.otpionIndex !== null) {
        this.$emit('input', this.options[this.otpionIndex]);
      } else {
        this.$emit('input', this.value);
      }

      this.closeOptions();
      this.$emit('search', this.value);
    },

    onClickIcon() {
      this.closeOptions();
      this.$emit('search', this.value);
    },

    onInput(value) {
      if (value === this.value) return;
      this.visableOptions = true;
      this.$emit('input', value);
    },

    selectOption(key) {
      this.closeOptions();
      this.$emit('input', key);
      this.$emit('search', this.value);
    },

    onFocue() {
      this.visableOptions = true;
      this.focus = true;
      this.$emit('focus');
    },

    onBlur() {
      this.focus = false;
      this.visableOptions = false;
      this.$emit('blur');
    },

    changeSelectSuggest(e) {
      e.preventDefault();
      if (this.flag) return;
      var index = this.otpionIndex;

      if (index === null) {
        index = e.keyCode === 40 ? 0 : this.options.length - 1;
        this.otpionIndex = index;
        return;
      }

      index += e.keyCode === 40 ? 1 : -1;

      if (index < 0) {
        this.otpionIndex = this.options.length - 1;
      } else if (index === this.options.length) {
        this.otpionIndex = 0;
      } else {
        this.otpionIndex = index;
      }
    },

    closeOptions() {
      this.otpionIndex = null;
      this.visableOptions = false;
    }

  }
};
/* 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({
      focus: _vm.focus,
      light: _vm.light
    })
  }, [_c("Popover", {
    attrs: {
      visible: !!_vm.options.length && _vm.visableOptions,
      trigger: "focus",
      arrow: false,
      popoverClass: _vm.bem("options")
    },
    on: {
      "update:visible": function updateVisible(v) {
        return !v ? _vm.closeOptions() : _vm.visableOptions = true;
      }
    }
  }, [_c("GdInput", {
    class: _vm.bem("input"),
    attrs: {
      placeholder: "搜索海量模板",
      value: _vm.value
    },
    on: {
      keypress: function keypress($event) {
        if (!("button" in $event) && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter")) {
          return null;
        }

        return _vm.search($event);
      },
      keydown: [function ($event) {
        if (!("button" in $event) && _vm._k($event.keyCode, "esc", 27, $event.key, ["Esc", "Escape"])) {
          return null;
        }

        return _vm.closeOptions($event);
      }, function ($event) {
        if (!("button" in $event) && _vm._k($event.keyCode, "down", 40, $event.key, ["Down", "ArrowDown"]) && _vm._k($event.keyCode, "up", 38, $event.key, ["Up", "ArrowUp"])) {
          return null;
        }

        return _vm.changeSelectSuggest($event);
      }],
      compositionstart: function compositionstart($event) {
        _vm.flag = true;
      },
      compositionend: function compositionend($event) {
        _vm.flag = false;
      },
      input: _vm.onInput,
      blur: _vm.onBlur,
      focus: _vm.onFocue
    }
  }, [_c("Icon", {
    attrs: {
      slot: "append",
      name: "search"
    },
    nativeOn: {
      click: function click($event) {
        return _vm.onClickIcon($event);
      }
    },
    slot: "append"
  })], 1), _vm._v(" "), _c("template", {
    slot: "content"
  }, [_c("ul", {
    on: {
      mouseleave: function mouseleave($event) {
        _vm.otpionIndex = null;
      }
    }
  }, _vm._l(_vm.options, function (item, i) {
    return _c("li", {
      key: item,
      class: _vm.bem("option", {
        active: i === _vm.otpionIndex
      }),
      on: {
        mouseenter: function mouseenter($event) {
          _vm.otpionIndex = i;
        },
        click: function click() {
          return _vm.selectOption(item);
        }
      }
    }, [_c("b", {
      domProps: {
        innerHTML: _vm._s(_vm.keywordLight(item))
      }
    })]);
  }), 0)])], 2)], 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;