<template>
	<view class="search" :style="{background:bgClor}">
		<view class="search-right" :style="{ width: width, height: height, border: border}">
			<input type="text" class="search-inp" :placeholder="placeholder" :value="value"
				placeholder-class="inputPlaceholder" @input="onInput" @confirm="onConfirm" confirm-type="search"
				placeholder-style="color: #CCCCCC;" />
			<view class="btn_search" @click.stop="onSearch">搜索</view>
			<image class="search-icon" src="/static/images/search.png" @click.stop="onSearch"></image>
		</view>
		<view class="search-add" @click=" $emit(`add`)" v-if="showAdd">
			<image class="add-icon" src="/static/images/recruit/add.png"></image>
			<view class="add-text">
				<text>添加</text>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: "search-box",
		props: {
			value: {
				type: String,
				default: "",
			},
			placeholder: {
				type: String,
				default: "请输入搜索内容",
			},
			showBack: {
				type: Boolean,
				default: true,
			},
			width: {
				type: String,
			},
			height: {
				type: String,
			},
			border: {
				type: String,
			},
			bgClor: {
				type: String,
				default: "linear-gradient(134deg, #f52540 0%, #e8101e 100%)",
			},
			showAdd: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				statusBarHeight: 0,
			};
		},
		computed: {
			searchStyle() {
				// #ifdef APP-PLUS || H5
				return {};
				// #endif
				// #ifdef MP-WEIXIN
				return {};
				// #endif
			},
		},
		created() {
			// #ifdef APP-PLUS || H5
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight;
			// #endif
		},
		methods: {
			goBack() {
				// #ifdef APP-PLUS
				uni.navigateBack();
				// #endif

				// #ifdef MP-WEIXIN || H5
				uni.navigateBack({
					delta: 1,
				});
				// #endif
			},
			onSearch(e) {
				// App阻止冒泡
				// #ifdef APP-NVUE
				e.stopPropagation();
				// #endif
				this.$emit("search");
			},
			onInput(e) {
				// #ifdef APP-PLUS || H5
				this.$emit("input", e.detail.value || e.target.value);
				// #endif

				// #ifdef MP-WEIXIN
				this.$emit("input", e.detail.value);
				// #endif
			},
			onConfirm(e) {
				// #ifdef APP-PLUS || H5
				this.$emit("confirm", e.detail.value || e.target.value);
				// #endif

				// #ifdef MP-WEIXIN
				this.$emit("confirm", e.detail.value);
				// #endif
			},
		},
	};
</script>

<style scoped>
	.search {
		z-index: 2;
		padding: 20rpx 30rpx;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		position: relative;
		background: linear-gradient(134deg, #f52540 0%, #e8101e 100%);
		transform: translateY(0rpx);
	}

	.back {
		width: 16rpx;
		height: 32rpx;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
		margin-right: 20rpx;
	}

	.search-right {
		flex: 1;
		width: 100%;
		height: 70rpx;
		background-color: #fff;
		border-radius: 50rpx;
		position: relative;
		/* #ifdef H5 */
		display: flex;
		align-items: center;
		/* #endif */
	}

	.search-inp {
		flex: 1;
		height: 70rpx;
		font-size: 26rpx;
		color: #000000;
		border-width: 0;
		padding: 0 136rpx 0 72rpx;
		/* #ifdef H5 */
		outline: none;
		background-color: transparent;
		/* #endif */
	}

	.search-icon {
		width: 34rpx;
		height: 34rpx;
		position: absolute;
		left: 20rpx;
		top: 16rpx;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	/* #ifdef H5 */
	.search-inp::-webkit-input-placeholder {
		color: #999999;
	}

	.search-inp::-moz-placeholder {
		color: #999999;
	}

	.search-inp:-ms-input-placeholder {
		color: #999999;
	}

	/* #endif */

	.btn_search {
		width: 112rpx;
		height: 58rpx;
		border-radius: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(306deg, #e8101e 0%, #fc563b 100%);
		background-size: cover;
		color: #fff;
		font-size: 26rpx;
		position: absolute;
		right: 6rpx;
		top: 6rpx;
	}

	.inputPlaceholder {
		font-weight: 400;
		font-size: 30rpx;
		color: #CCCCCC;
		text-align: left;
		font-style: normal;
	}

	.search-add {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-left: 15px;
		flex-wrap: wrap;
		justify-content: center;
	}


	.add-icon {
		width: 38rpx;
		height: 38rpx;
		margin-bottom: 6rpx;
	}

	.add-text {
		font-weight: 500;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 28rpx;
		text-align: left;
		font-style: normal;
	}
</style>