<template>
	<view :class="[scrolltop?'backs1':'backs']" :style="{'padding-top':statusBarHeight+'px'}">
		<view :class="['header_left_back',backgroundColor==true?'bgcolor':'']" @click="toback">
			<image class="header_icon" v-if="!scrolltop" src="/static/images/zhouWei-navBar/icon_back_white.png" mode="aspectFit"></image>
			<image class="header_icon" v-else src="/static/images/zhouWei-navBar/icon_back_black.png" mode="aspectFit"></image>
		</view>
		<view class="ctitle" v-if="scrolltop">{{title}}</view>
		<view class="sskuang" v-if="info.shou" :style="{height:scrolltop?'80rpx':'100%'}">
			<input :class="[scrolltop?'hinput':'winput']" type="text" value="" v-model="name" v-if="ssshow" @input="come"/>
			<image :src="$getimg(scrolltop?'wfqy-icon-xss.png':'wfqy-icon-xss1.png')" @click="ss" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['info'],
		data() {
			return {
				//true--白色;false--黑色
				navFontColor: false,
				backgroundColor: false,
				name:'',
				statusBarHeight:0,
				ssshow:false,
				scrolltop:false,
				title:''
			}
		},
		onLoad() {

		},
		mounted() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		onReady() {
			this.navFontColor = this.info.color;
			if (this.info.bg) {
				this.backgroundColor = this.info.bg;
			}
		},
		watch:{
			info(){
				this.scrolltop=this.info.num;
				this.title=this.info.name;
				this.$forceUpdate();
			}
		},
		methods: {
			toback() {
				uni.navigateBack();
			},
			ss(){
				var that=this;
				this.ssshow=!this.ssshow;
				if(!this.ssshow){
					this.name='';
					this.$emit('getSsname',{
						name:''
					})
				}
			},
			come(){
				var that=this;
				this.$emit('getSsname',{
					name:that.name
				})
			}
		}
	}
</script>

<style lang="scss">
	@function unit($num) {
		@return $num+0upx;
	}
	.ctitle{
		font-size: 36rpx;
		color: #505050;
		font-weight: 500;
		width: 560rpx;
		text-align: center;
	}
	.sskuang{
		width: 465rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
		height: 100%;
		.hinput{
			margin-right: 20rpx;
			border: 1rpx solid rgba(0,0,0,0.1);
			border-radius: 35rpx;
			height: 70%;
			color: #333;
			padding: 0 20rpx;
			background: rgba(0,0,0,0.1);
			font-size: 24rpx;
			width: 170rpx;
		}
		.winput{
			margin-right: 20rpx;
			border: 1rpx solid #fff;
			border-radius: 35rpx;
			height: 70%;
			color: #fff;
			padding: 0 20rpx;
			background: rgba(255,255,255,0.2);
			font-size: 24rpx;
			width: 170rpx;
		}
		image{
			width: 37rpx;
			height: 36rpx;
		}
	}
	.backs {
		position: absolute;
		left: 0;
		// width: unit(70);
		height: 88rpx;
		z-index: 100;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.backs1{
		position: fixed;
		background: rgba(255,255,255,1);
		/* top: 40rpx; */
		left: 0;
		height: 88rpx;
		z-index: 100;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: left;
		width: 100%;
	}
	.header_left_back {
		width: 70rpx;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bgcolor {
		border-radius: 50%;
		background-color: #446A86;
	}

	.header_icon {
		width: unit(18);
		height: unit(34);
	}
</style>
