<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <view class="Mall4j component-search-bar">
    <view class="search-input-con">
      <image
        class="search-icon-prefix"
        src="/static/images/search-prefix.png"
      />
      <input
        v-model="queryString"
        class="search-input"
        type="text"
        :placeholder="placeholder"
        placeholder-class="placeholder-class"
        @confirm="handleSearch"
      >
    </view>
  </view>
</template>

<script setup>
import { watch } from 'vue'

const props = defineProps({
  keyWord: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: () => $t('qingShuRuGuanJianZi')
  }
})

const emit = defineEmits(['handleSearch'])

const queryString = ref('')

watch(() => props.keyWord, (val) => {
  queryString.value = val
}, { deep: true })

const handleSearch = () => {
  emit('handleSearch', queryString.value)
}
</script>

<style lang="scss" scoped>
.component-search-bar {
  width: 100%;

  .search-input-con {
    display: flex;
    align-items: center;
    padding: 10rpx auto;
    width: 100%;
    height: 64rpx;
    background: #F7F8FA;
    border-radius: 32rpx;

    .search-icon-prefix {
      margin-left: 30rpx;
      width: 24rpx;
      height: 24rpx;
    }

    .search-input {
      margin-left: 12rpx;
      font-size: 24rpx;
      width: 100%;
    }
  }
}
</style>
