import "./Search.css";
import _Map from "@babel/runtime-corejs2/core-js/map";

/* script */
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
import Popover from '../Popover';
import Input from '../Input';
import Icon from '../Icon';
import { createComponentName, componentMixin } from '../_utils/component.js';
const __vue_script__ = {
  name: createComponentName('header-search'),
  components: {
    Popover,
    Icon,
    GdInput: Input
  },
  mixins: [componentMixin],
  props: {
    options: {
      type: Array,

      default() {
        return [];
      }

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

      default() {
        return [];
      }

    },
    hots: {
      type: Array,

      default() {
        return [];
      }

    }
  },

  data() {
    return {
      focus: false,
      otpionIndex: null,
      hotIndex: null,
      historyIndex: null,
      // 判断是否在输入法中输入状态
      flag: false,
      minWidth: 200,
      visableOptions: false // hots: ['四川凉山森林大火', '做自己的锦鲤', '防忽悠指南', '整人方式合辑', '整人方式'],
      // searchHistory: ['公众号运营', '愚人节', '清明节思念', '童装换季促销', '公众号首图'],

    };
  },

  computed: {
    historys() {
      const unique = arr => {
        const res = new _Map();
        return arr.filter(a => !res.has(a.search_word) && res.set(a.search_word, 1));
      };

      return unique(this.searchHistory).filter((item, index) => index < 5).filter(item => item.search_word !== '');
    },

    hotsData() {
      return this.hots.filter((hot, index) => index < 5);
    }

  },
  methods: {
    delHistory(item) {
      this.$emit('del-history', item);
    },

    // 清除历史记录
    clearHistory() {
      this.$emit('clear-history');
    },

    keywordLight(label) {
      const keyword = this.value;
      const rStr = new RegExp(keyword, 'g');
      let html = label;

      if (keyword !== '' && label) {
        html = label.replace(rStr, text => `<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, type = 'select') {
      let emitKey;

      if (type === 'history') {
        emitKey = key.search_word;
      } else {
        emitKey = key;
      }

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

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

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

    changeSelectSuggest(e) {
      e.preventDefault();
      if (this.flag) return;
      let 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 () {
  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.visableOptions,
      trigger: "click",
      arrow: false,
      popoverClass: _vm.bem("options")
    },
    on: {
      "update:visible": function ($event) {
        _vm.visableOptions = $event;
      }
    }
  }, [_c("GdInput", {
    class: _vm.bem("input"),
    attrs: {
      placeholder: "搜索海量模板",
      value: _vm.value
    },
    on: {
      keypress: function ($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 ($event) {
        _vm.flag = true;
      },
      compositionend: function ($event) {
        _vm.flag = false;
      },
      input: _vm.onInput,
      blur: _vm.onBlur,
      focus: _vm.onFocue
    }
  }, [_c("Icon", {
    attrs: {
      slot: "append",
      name: "search"
    },
    nativeOn: {
      click: function ($event) {
        return _vm.onClickIcon($event);
      }
    },
    slot: "append"
  })], 1), _vm._v(" "), _c("template", {
    slot: "content"
  }, [!_vm.options.length ? _c("div", {
    on: {
      click: function ($event) {
        $event.stopPropagation();
      }
    }
  }, [!!_vm.hotsData.length ? _c("p", {
    class: _vm.bem("title")
  }, [_vm._v("热搜")]) : _vm._e(), _vm._v(" "), !!_vm.hotsData.length ? _c("ul", {
    on: {
      mouseleave: function ($event) {
        _vm.hotIndex = null;
      }
    }
  }, _vm._l(_vm.hotsData, function (item, i) {
    return _c("li", {
      key: item,
      class: _vm.bem("option", {
        active: i === _vm.hotIndex
      }),
      on: {
        mousemove: function ($event) {
          _vm.hotIndex = i;
        },
        click: function () {
          return _vm.selectOption(item, "hot");
        }
      }
    }, [_c("b", {
      domProps: {
        innerHTML: _vm._s(_vm.keywordLight(item))
      }
    }), _vm._v(" "), i < 3 ? _c("span", {
      class: _vm.bem("hot-icon")
    }) : _vm._e()]);
  }), 0) : _vm._e(), _vm._v(" "), !!_vm.historys.length ? _c("div", {
    class: _vm.bem("title")
  }, [_c("p", [_vm._v("历史记录")]), _vm._v(" "), _c("p", {
    class: _vm.bem("clear-history"),
    on: {
      click: function ($event) {
        $event.stopPropagation();
        return _vm.clearHistory($event);
      }
    }
  }, [_vm._v("清空")])]) : _vm._e(), _vm._v(" "), !!_vm.historys.length ? _c("ul", {
    class: _vm.bem("historys"),
    on: {
      mouseleave: function ($event) {
        _vm.historyIndex = null;
      }
    }
  }, _vm._l(_vm.historys, function (item, i) {
    return _c("li", {
      key: item.timestamp,
      class: _vm.bem("option", {
        active: i === _vm.historyIndex
      }),
      on: {
        mousemove: function ($event) {
          _vm.historyIndex = i;
        },
        click: function () {
          return _vm.selectOption(item, "history");
        }
      }
    }, [_c("b", {
      domProps: {
        innerHTML: _vm._s(item.search_word)
      }
    }), _vm._v(" "), i === _vm.historyIndex ? _c("span", {
      class: _vm.bem("del-btn"),
      on: {
        click: function ($event) {
          $event.stopPropagation();

          _vm.delHistory(item);
        }
      }
    }) : _vm._e()]);
  }), 0) : _vm._e()]) : _vm._e(), _vm._v(" "), _c("ul", {
    on: {
      mouseleave: function ($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 ($event) {
          _vm.otpionIndex = i;
        },
        click: function () {
          return _vm.selectOption(item);
        }
      }
    }, [_c("b", {
      domProps: {
        innerHTML: _vm._s(_vm.keywordLight(item))
      }
    })]);
  }), 0)])], 2)], 1);
};

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

const __vue_inject_styles__ = undefined;
/* scoped */

const __vue_scope_id__ = undefined;
/* module identifier */

const __vue_module_identifier__ = undefined;
/* functional template */

const __vue_is_functional_template__ = false;
/* component normalizer */

import __vue_normalize__ from '../_utils/vue-normalize-component.js';
/* style inject */

/* style inject SSR */

export default __vue_normalize__({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);