<template>
  <view class="search-bar" :style="{ backgroundColor: backgroundColor,border:border}">
    <view v-if="showChoseCity" class="location-chose" @click="$emit('chooseCity')" :style="{fontSize:fontSize,color:fontColor}">
      {{ city || '选择' }}
      <u-icon name="arrow-down-fill" class="choseIcon" size="15" :color="fontColor" :style="{marginLeft:'2rpx'}" />
    </view>
    <view class="search-input" @click="$emit('search')">
	  <u-icon  v-if="searchIconShowLeft" name="search" size="40" :color="fontColor" class="search-icon-left" />
      <text class="placeholder" :style="{fontSize:fontSize,color:fontColor}">{{ placeholder }}</text>
      <u-icon v-if="!searchIconShowLeft" name="search" size="40" :color="fontColor" class="search-icon-right" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'SearchBar',
  props: {
    city: {
      type: String,
      default: '宜昌市'
    },
	showChoseCity: {
	  type: Boolean,
	  default: false
	},
	fontSize: {
	  type: String,
	  default: '30rpx'
	},
	searchIconShowLeft: {
	  type: Boolean,
	  default: true
	},
	fontColor:{
		type: String,
		default: '#FFFFFF'
	},
	backgroundColor: { 
		type: String, 
		default: 'rgba(255,255,255,0.6)' ,
		},
		border: {
			type: String, 
			default: 'border: 1px solid #FFFFFF' ,
			},
    placeholder: {
      type: String,
      default: '搜索小区/城市/门店'
    }
  }
}
</script>

<style lang="scss" scoped>
.choseIcon {
	margin-left: 5rpx;
}
.search-bar {
  margin-top: 10rpx;
  display: flex;
  align-items: center;
  padding: 6rpx 16rpx;
  border-radius: 10rpx;
  width: 100%;
  
}

.location-chose {
	font-family: Noto Sans S Chinese;
	font-weight: 400;
  display: flex;
  align-items: center;
  width: 25%;
}

.search-input {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  height: 83.5rpx;
  padding: 25rpx 30rpx;
}

.placeholder {
  font-family: Noto Sans S Chinese;
  font-weight: 400;
  flex: 1;
}

.search-icon-right {
  
}

.search-icon-left {
  margin-right: 5%;
}
</style>
