<template>
  <div class="order-search-header flex-default">
    <m-icon icon="icon-back" :size="18" @click="goBack" />
    <div class="search flex-default">
      <m-icon icon="icon-search2" :size="15" />
      <!-- v-show="focus" -->
      <input
        ref="searchInput"
        class="search-input"
        :placeholder="placeholderTxt"
        @keyup.enter="handleConfirm"
        type="text"
        autocomplete="off"
        enterkeyhint="search"
        :autofocus="focus"
        v-model="searchKey"
      />
    </div>
  </div>
</template>


<script>
import { OrderType, OrderTypeObj } from "@/enums";
export default {
  props: ["type", "focus"],
  computed: {
    placeholderTxt() {
      return `搜索我的${OrderTypeObj[this.type].label}`;
    },
  },
  data(){
    return{
      searchKey: ''
    }
  },
  methods: {
    handleConfirm(val) {
      this.$emit("update:focus", true);
      setTimeout(() => {
        this.$emit("update:focus", false);
      }, 0);

      this.$emit("search", this.searchKey.trim());
    },
    inputFocus() {
      this.$refs.searchInput.focus();
    },
  },
};
</script>


<style lang="less">
.order-search-header {
  background: #ffffff;
  padding: 8px 16px;
  align-items: center;
  width: 100%;

  .search {
    flex: 1;
    align-items: center;
    padding: 0 14px;
    height: 30px;
    margin-left: 18px;
    background: #f1f1f1;
    border-radius: 15px;
  }
  .search-input {
    flex: 1;
    font-size: 13px;
    margin-left: 10px;
  }
  .uni-input-placeholder {
    color: #aeaeae;
  }
}
</style>