<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="CustomReturn-container" :style="{height: titleHeight, paddingTop: paddingTop, backgroundColor: bgColor}">
			<view class="CustomReturn">
				<view v-if="isShowBreak" class="CustomReturn-r">
					<u-icon name="home" v-if="isFirstPage && !isCustomReturn" @click="toBreak()" size="23" :color="color"></u-icon>
					<u-icon name="arrow-left" v-else @click="toBreak()" size="20" :color="color"></u-icon>
				</view>
				<view style="width: 200rpx;" v-else></view>
				<view class="CustomReturn-title">
					<view class="CustomReturn-title-c">
						<u-icon name="search" size="20"></u-icon>
						<input class="CustomReturn-title-c-c" v-model="value" placeholder="请输入教师姓名" type="text" confirm-type="search" @confirm="confirm">
						<u-icon name="close-circle-fill" size="20" color="#E6E6E6"></u-icon>
					</view>
				</view>
				<view style="width: 200rpx;"></view>
			</view>
			<view class="other">
				<slot></slot>
			</view>
		</view>
		<!-- #endif -->
	</view>
	
	
</template>

<script>
	export default {
		name:"CustomReturn",
		components: {
		},
		props: {
			color: {
				type: String,
				default: '#000000'
			},
			isShowOtherIcon: {
				type: Boolean,
				default: true
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			breakUrl: {
				type: String,
				default: ''
			},
			isShowBreak: {
				type: Boolean,
				default: true
			},
			title: {
				type: [String, Number],
				default: '标题'
			},
			isCustomReturn: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				value: '',
				show: false,
				titleHeight: 0,
				paddingTop: 0,
				otherHeight: 0,
				isFirstPage: false,
				entityHeight: 0
			};
		},
		mounted() {
			this.getHeight()
			this.getOther()
			this.identifyPages()
		},
		methods: {
			confirm() {
				this.$emit('confirm', this.value)
			},
			toExamination() {
				uni.reLaunch({
					url: '/pages/examination/examination'
				})
			},
			toPersonalCenter() {
				uni.reLaunch({
					url: '/pages/personalCenter/personalCenter'
				})
			},
			// 获取除顶部导航栏以外的高度
			getOtherHeight() {
				return this.otherHeight
			},
			getOther() {
				uni.createSelectorQuery().in(this).select('.other')
				.fields({ size: true }, (res) => {
				  if (res) {
					this.otherHeight = res.height
					console.log('元素高度', res.height);
					this.$emit('init', {otherHeight: this.otherHeight, entityHeight: this.entityHeight})
				  }
				}).exec();
			},
			// 辨别页面
			identifyPages() {
				let result = getCurrentPages()
				if(result.length === 1) {
					this.isFirstPage = true
				} else {
					this.isFirstPage = false
				}
			},
			getHeight() {
				this.titleHeight = 88 + 'rpx';
				this.paddingTop = uni.getSystemInfoSync().statusBarHeight + 'px'
				// #ifdef MP-WEIXIN
				let res = wx.getMenuButtonBoundingClientRect();
				// #endif
				this.paddingTop = res.top + 'px'
				this.titleHeight = res.height + 10 + 'px';
				this.entityHeight = res.top + res.height
				
			},
			toBreak(){
				if(!this.isCustomReturn) {
					let result = getCurrentPages()
					if(result.length === 1) {
						uni.reLaunch({
							url: '/pages/examination/examination'
						})
					} else {
						uni.navigateBack({
							delta: 1
						})
					}
				} else {
					this.$emit('goBack')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.CustomReturn-container{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1002;
	transition: all .5s;
	box-sizing: content-box;
}
.CustomReturn{
	display: flex;
	align-items: center;
	flex-grow: 1;
	padding: 0 24rpx;
	justify-content: space-between;
	position: relative;
	z-index: 1002;
	height: 100%;
	padding-bottom: 10px;
	box-sizing: border-box;
	
	.CustomReturn-title{
		font-size: 36rpx;
		.CustomReturn-title-c{
			background-color: #F6F6F6;
			border: 1px solid #E6E6E6;
			border-radius: 200rpx;
			display: flex;
			align-items: center;
			height: 68rpx;
			padding: 0 20rpx;
			.CustomReturn-title-c-c{
				flex-grow: 1;
				margin-left: 10rpx;
				font-size: 28rpx;
			}
		}
	}
	.CustomReturn-r{
		display: flex;
		width: 80rpx;
		align-items: center;
		.CustomReturn-i{
			height: 36rpx;
			width: 36rpx;
			margin-left: 30rpx;
		}
	}
}
</style>