<template>
	<view class="diy-search">
		<view class="inner" :class="itemStyle.searchStyle" @click="onTargetSearch">
			<view class="search-input" :style="{ textAlign: itemStyle.textAlign }">
				<text class="search-icon iconfont icon-search"></text>
				<input v-model="searchValue" class="input" @confirm="onSearch" focus="true" placeholder="请输入关键词"
					type="text"></input>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue: ''
			}
		},

		methods: {
			/**
			 * 搜索提交
			 */
			onSearch() {
				const {
					searchValue
				} = this
				if (searchValue) {
					// 记录历史搜索
					this.setHistory(searchValue)
					// 跳转到商品列表页
					this.$navTo('pages/goods/list', {
						search: searchValue
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.diy-search {
		background: #e2f2fb;
		padding: 20rpx 40rpx;
		font-size: 26rpx;
		.inner {
			width: 360rpx;
			height: 60rpx;
			background: #fff;
			border-radius: 100rpx;
			overflow: hidden;
		
			&.radius {
				border-radius: 10rpx;
			}
		
			&.round {
				border-radius: 60rpx;
			}
		}
		
		.search-input {
			height: 60rpx;
			color: #999;
			padding: 0 20rpx;
			display: flex;
			align-items: center;
		
			.search-icon {
				margin-right: 8rpx;
			}
		}
		
		
		.flow-delivery {
			background-color: #2C71C7;
			padding: 10rpx 26rpx;
			color: #FFFFFF;
			display: flex;
			justify-content: space-between;
		}
		
		.col-title {
			color: #FFFFFF;
		}
		
		.my-order {
			border: 1px solid #fff;
			border-radius: 20rpx;
			padding: 0rpx 20rpx;
		}
	}
</style>
