<template>
	<view class="title-header-box" :style="{height:`${height+padHeight}px`}">
		<view class="title-header" :style="{paddingTop:`${padHeight}px`,height:`${height}px`}">
			<view class="left" @click="goBack" v-if="title !== '太湖'"><i class="iconfont">&#xe64b;</i></view>
			<view class="center">{{title ? title.substr(0,10) : '太湖'}}</view>
			<view class="right"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "SearchHeader",
		props: ['title', 'icon'],
		watch: {
			'title'(newVal, oldVal) {
				this.title = newVal
			}
		},
		data() {
			return {
				keywords: '',
				padHeight: 0,
				height: 88
			}
		},
		methods: {
			search() {
				uni.$emit('search', {
					keywords: this.keywords
				})
			},
		},
		created() {
			let systemInfo = uni.getSystemInfoSync(),
				rect = uni.getMenuButtonBoundingClientRect();
			let height = (rect.top - systemInfo.statusBarHeight) * 2 + rect.height
			this.height = height
			this.padHeight = systemInfo.statusBarHeight
			this.right = (systemInfo.screenWidth - rect.right) + rect.width
		}
	}
</script>

<style scoped>
	.title-header-box {
		background-color: #F8F8F8;
		color: #000000;
	}

	.title-header {
		/* background-color: #FFC825; */
		background: white;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 88rpx;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		z-index: 1000;
		padding-top: 40rpx;
	}

	.title-header .left {
		padding-left: 30rpx;
		width: 58rpx;
		display: flex;
		position: absolute;
		left: 0;
	}

	.title-header .search-box {
		width: 502rpx;
		height: 58rpx;
		border-radius: 29rpx;
		background: #F0F0F0;
		padding: 0 26rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
	}

	.title-header .search-box .iconfont {
		flex-shrink: 0;
		color: #999999;
		font-size: 30rpx;
		margin-right: 10;
	}

	.title-header .search-box .input {
		flex: 1;
		border: none;
		outline: none;
		background: none;
		color: #666;
	}
</style>
