<template>
  <view class="search-header">
    <view class="search-header-left " @click="focusInput">
      <text class="iconfont icon-search Sh-left-icon" />
      <input
        v-if="!isSearch"
        v-model="keyWords"
        type="text"
        confirm-type="search"
        :placeholder="placeholderVal"
        @confirm="search"
      />
      <icon v-if="!isSearch && keyWords" type="clear" size="14" @click="clearKeywords" />
      <view v-if="isSearch && keyWords" class="Sh-left-keywords one-hide" @click="clearKeywords">
        <text class="Shl-keywords-text one-hide">{{ keyWords }}</text>
        <text class="iconfont icon-close" />
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      isSearch: false,
      keyWords: "",
      placeholderVal: "在结果中搜索"
    };
  },
  methods: {
    focusInput() {
      this.isSearch = false;
      // this.keyWords = this.placeholderVal;
    },
    clearKeywords() {
      this.keyWords = "";
      this.isSearch = false;
      this.$emit("search", this.keyWords);
    },
    search() {
      this.$emit("search", this.keyWords);
      this.isSearch = true;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/style/icon.scss";
.search {
  height: 100%;
  background: $white;
  &-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>
