<template>
	<view class="top" :class="[sticky ? 'sticky': '']">
		<view v-show="showBack" class="top-back" @click="toBack()">
			<u-icon color="#333" size="20" name="arrow-left"></u-icon>
		</view>
		<view class="top-title"><slot></slot></view>
		<view @click="topgae()" style="color: #387DF7;">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			backUrl:{
				type:String,
				default:''
			},
			showBack:{
				type:Boolean,
				default:false
			},
			goPgae:{
				type:String,
				default:''
			},
      // 启用粘性滚动
      sticky: {
        type: Boolean,
        default: false
      }
		},
		data() {
			return {

			}
		},
		methods: {
			topgae() {
				if(this.goPgae!=''){
					uni.navigateTo({
						url:this.goPgae
					});
				}
			},
			toBack(){
				if(this.backUrl!=''){
					if(this.backUrl == '/pages/my/index'){
						uni.switchTab({
							url:this.backUrl
						})
					}else{
						uni.navigateTo({
							url:this.backUrl
						});
					}
				}else{
					let pages =getCurrentPages();
					//console.log(pages);
					const prevPage=pages[pages.length-2];
					if(!prevPage){
						uni.switchTab({
							url:'/pages/index/index'
						})
					}else{
						uni.navigateBack();
					}

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top{
		height: 40px;
		background-color: #fff;
		display: flex;
		// justify-content: space-between;
		.top-back{
			color: #333;
			padding-top:10px;
			height: 40px;
			line-height: 40px;
			padding-left: 15px;
		}
		.top-title{
			text-align: center;
			font-size: 16px;
			font-weight: 550;
			color: #333;
			height: 40px;
			text-align: center;
			width: 80%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			line-height: 40px;
		}

    &.sticky {
      position: sticky;
      top: 0;
      //防止其他元素遮盖
      z-index: 99;
    }
	}
	 // .arrow:before {
	 //    content: " ";
	 //    display: inline-block;
	 //    -webkit-transform: rotate(45deg);
	 //    -ms-transform: rotate(45deg);
	 //    transform: rotate(45deg);
	 //    height: .5rem;
	 //    width: .5rem;
	 //    border-width: 0 0 2px 2px;
	 //    border-color: #FFFFFF;
	 //    border-style: solid;
	 //    position: relative;
	 //    top: 0
	 //    }
</style>
