import _typeof from "@babel/runtime/helpers/esm/typeof";
import _mergeJSXProps from "@vue/babel-helper-vue-jsx-merge-props";
import "../../../src/scss/search-bar.scss";
import WCell from "../WCell"; // Utils

import mixins from "../../../lib/utils/mixins"; // Mixins

import Validatable from "../../../lib/mixins/validatable";
export default mixins(Validatable
/* @vue/component */
).extend({
  name: 'w-search-bar',
  components: {
    WCell: WCell
  },
  props: {
    autofocus: Boolean,
    show: Boolean,
    placeholder: {
      type: String,
      default: '搜索'
    },
    cancelText: {
      type: String,
      default: '取消'
    },
    resultTextKey: String,
    result: {
      type: Array
    }
  },
  data: function data() {
    return {
      currentValue: this.value,
      isActive: false
    };
  },
  watch: {
    currentValue: function currentValue(val) {
      this.$emit('input', val);
    },
    value: function value(val) {
      this.currentValue = val;
    }
  },
  mounted: function mounted() {
    if (this.autofocus) {
      this.isActive = true;
    }
  },
  methods: {
    textClick: function textClick() {
      // focus the input
      this.$refs.input.focus();
      this.isActive = true;
    },
    // 清除输入
    clear: function clear() {
      this.currentValue = '';
    },
    // 取消搜索
    cancel: function cancel() {
      this.$emit('cancel');
      this.clear();
      this.isActive = false;
    }
  },
  render: function render() {
    var _this = this;

    var h = arguments[0];
    return h("div", [h("div", {
      "class": "weui-search-bar"
    }, [h("div", {
      "class": "weui-search-bar__form"
    }, [h("div", {
      "class": "weui-search-bar__box"
    }, [h("i", {
      "class": "weui-icon-search"
    }), h("form", {
      "attrs": {
        "action": "javascript:"
      },
      "on": {
        "submit": this.$emit('search', this.currentValue)
      }
    }, [h("input", _mergeJSXProps([{
      "on": {
        "input": function input($event) {
          if ($event.target.composing) return;
          _this.currentValue = $event.target.value;
        }
      },
      "class": "weui-search-bar__input",
      "attrs": {
        "type": "search",
        "placeholder": this.placeholder,
        "autofocus": this.autofocus
      },
      "ref": "input",
      "domProps": {
        "value": _this.currentValue
      }
    }, {
      directives: [{
        name: "model",
        value: _this.currentValue,
        modifiers: {}
      }]
    }]))]), h("div", {
      "class": "weui-icon-clear",
      "on": {
        "click": this.clear
      }
    })]), h("label", {
      "class": "weui-search-bar__label",
      "on": {
        "click": function click() {
          _this.textClick();
        }
      },
      "directives": [{
        name: "show",
        value: !this.isActive
      }]
    }, [h("i", {
      "class": "weui-icon-search"
    }), h("span", {
      "domProps": {
        "textContent": this.placeholder
      }
    })])]), h("div", {
      "class": "weui-search-bar__cancel-btn",
      "on": {
        "click": function click() {
          _this.cancel();
        }
      },
      "directives": [{
        name: "show",
        value: this.isActive
      }],
      "domProps": {
        "textContent": this.cancelText
      }
    })]), this.$slots.default || h("div", {
      "class": "weui-cells searchbar-result",
      "directives": [{
        name: "show",
        value: this.show || this.result
      }]
    }, [this.result && this.result.map(function (item, index) {
      return h(WCell, {
        "key": index,
        "attrs": {
          "title": _typeof(item) === 'object' ? item[_this.resultTextKey] : item
        },
        "on": {
          "click": function click() {
            _this.$emit('click-result', item);
          }
        }
      });
    })])]);
  }
});
//# sourceMappingURL=WSearchBar.js.map