<template>
  <!-- 搜索栏 -->
  <view class="search-bar" id="searchBar" :style="{ paddingTop: statusBarHeight + 'px' }">
    <view class="search-input-wrap">
      <image class="search-icon" src="/static/icons/products/icon_search.png" mode="aspectFit" />
      <input
        class="search-input"
        placeholder="搜索产品"
        placeholder-class="search-placeholder"
        :value="keyword"
        @input="onInput"
        @blur="onBlur"
        @confirm="onConfirm"
      />
      <view class="search-btn" @tap="onSearch">搜索</view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SearchBar',
  props: {
    keyword: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      statusBarHeight: 20
    }
  },
  created() {
    try {
      const sysInfo = uni.getSystemInfoSync()
      this.statusBarHeight = sysInfo.statusBarHeight || 20
    } catch (e) {
      this.statusBarHeight = 20
    }
  },
  mounted() {
    // 测量自身高度并 emit 给父组件（小程序端无法跨组件查询 DOM，必须自测量）
    this.$nextTick(() => this.emitHeight())
  },
  methods: {
    emitHeight() {
      const query = uni.createSelectorQuery().in(this)
      query.select('#searchBar').boundingClientRect()
      query.exec((res) => {
        if (res && res[0]) {
          this.$emit('height-change', res[0].height)
        }
      })
    },
    onInput(e) {
      this.$emit('input', e.detail.value)
    },
    onBlur() {
      this.$emit('blur')
    },
    onConfirm() {
      // 键盘确认键与搜索按钮同一行为
      this.$emit('blur')
    },
    onSearch() {
      this.$emit('search')
    }
  }
}
</script>

<style scoped>
/* 设计稿：左右留白 10px(20rpx)，上下留白 6px(12rpx)，搜索框 209x32px(402x62rpx) */
.search-bar {
  padding: 12rpx 20rpx;
  background: #ffffff;
  box-sizing: border-box;
}
.search-input-wrap {
  display: flex;
  align-items: center;
  width: 402rpx;
  height: 62rpx;
  padding: 0 4rpx 0 21rpx;
  background: #f5f5f5;
  border-radius: 31rpx;
  box-sizing: border-box;
}
.search-icon {
  width: 31rpx;
  height: 31rpx;
  flex-shrink: 0;
  margin-right: 8rpx;
}
.search-input {
  flex: 1;
  min-width: 0;
  font-size: 25rpx;
  color: #333333;
}
.search-placeholder {
  color: #929292;
}
/* 设计稿：搜索按钮 50x28px(96x54rpx)，#FF6800，圆角 14px(27rpx)，距边缘 2px(4rpx) */
.search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96rpx;
  height: 54rpx;
  flex-shrink: 0;
  background: #ff6800;
  border-radius: 27rpx;
  font-size: 25rpx;
  color: #ffffff;
}
</style>
