<template>
  <view class="header">
    <view class="header-left" @click="resetSearch">
      <text class="iconfont icon-search Sh-left-icon" />
      <input
        v-if="!isSearch"
        v-model.trim="keyWords"
        focus
        type="text"
        placeholder-class="search-placeholder"
        confirm-type="search"
        :placeholder="holder"
        @confirm="searchEnterEvent"
      />
      <view v-if="!isSearch && keyWords" @click="clearInputText">
        <icon type="clear" size="14" />
      </view>
      <view v-if="isSearch && keyWords" class="Sh-left-keywords one-hide" @click="resetSearch">
        <text class="Shl-keywords-text one-hide">{{ keyWords }}</text>
        <text class="iconfont icon-close" @click="clearInputText" />
      </view>
    </view>
  </view>
</template>
<script>
const SEARCH_EVENT = "enter";
const CLEAR_EVENT = "clear";
const placeText = "搜索你想要的宝贝";
export default {
  props: {
    isSearch: {
      type: Boolean,
      default: false
    },
    holder: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      keyWords: ""
    };
  },
  methods: {
    searchEnterEvent() {
      if (this.holder !== placeText || this.keyWords) {
        this.keyWords = this.keyWords || this.holder;
        this.$emit(SEARCH_EVENT, this.keyWords);
      }
    },
    clearInputText() {
      this.keyWords = "";
      this.resetSearch();
    },
    resetSearch() {
      this.$emit(CLEAR_EVENT);
    }
  }
};
</script>
<style lang="scss" scoped>
/* #ifdef MP-BAIDU */
::v-deep .search-placeholder {
  color: #999;
}
/* #endif */
.header {
  padding: $padding-sm $padding-md;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: $white;
  &-left {
    display: flex;
    align-items: center;
    // width: 614rpx;
    width: 100%;
    height: 60rpx;
    background: $bg-color-g1;
    border-radius: $border-radius-1;
    font-size: $font-sm;
    color: $text-color-n6;
    input {
      width: 80%;
      height: 40rpx;
      font-size: 28rpx;
      background-color: transparent;
    }
    icon {
      padding: 15rpx;
    }
    .Sh-left-icon {
      margin: 0 $margin-base;
    }
    .Sh-left-keywords {
      display: flex;
      align-items: center;
      padding: 0 $padding-md;
      height: 48rpx;
      font-size: $font-md;
      color: $white;
      border-radius: $border-radius-1;
      background: $bg-color-gray;
      .Shl-keywords-text {
        padding-right: $padding-sm;
      }
      .icon-close {
        font-size: $font-md - 4;
      }
    }
  }
  &-right {
    font-size: $font-lg;
    color: $text-color-n5;
  }
}
</style>
