<template>
	<view class="zd-row jcflexstart header">
		<view class="zd-col-4">
			<uni-icons @tap="goBack" type="back" size="26" color="#fff"></uni-icons>
		</view>
		<view class="zd-col-16 page_name">{{title}}</view>
		<view v-if="searchActive" class="zd-col-4" style="text-align: right">
			<uni-icons @tap="toSearch" type="search" size="26" color="#fff"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		props: {
			title: String,
			inner: {
				type: Boolean,
				default: false
			},
			inner2: {
				type: Boolean,
				default: false
			},
			searchActive: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			goBack () {
				if (this.inner) {
					uni.navigateBack()
				} else if (this.inner2) {
					this.$emit('goIn')
				} else {
					uni.redirectTo({
						url: '/pages/home/home'
					})
				}
			},
			toSearch () {
				this.$emit('toSearch')
			}
		}
	}
</script>

<style lang="stylus">
@import '@/common/style/mixin.styl';
.header
	position fixed
	_wh(100%, calc(var(--status-bar-height) + 72rpx))
	// background: linear-gradient(to bottom, #ff6800 0%, #ff6400 100%)
	background-color $red
	z-index 200
	padding var(--status-bar-height) 20rpx 0 
.page_name
	_font(32rpx, 32rpx, #fff,700,center)
</style>
