<template>
  <view
    class="nav-bar"
    v-show="show"
    :style="{opacity: opacity, height: `${navRect.bottom + 10}px`, background, borderColor}"
  >
    <Back v-if="back" :color="backColor" :back="toBack" />
		
  </view>
</template>

<script>
  import { ref, onMounted, watch, reactive, computed } from 'vue';
  import Back from './back.vue';
	export default {
		props: {
			title: {
			  type: String,
			},
			show: {
			  type: Boolean,
			  default: true,
			},
			opacity: {
			  type: Number,
			  default: 1,
			},
			color: {
			  type: String,
			  default: '#333',
			},
			background: {
			  type: String,
			  default: '#398ae4',
			},
			borderColor: {
			  type: String,
			  default: '#d3d3d3',
			},
			back: {
			  type: Boolean,
			},
			backColor: {
			  type: String,
			  default: '#000',
			},
			navRect: {
				type: Object,
				default: {
					bottom: 0,
					height: 0,
					top: 0,
				}
			},
			onBack: Function,
			cancel: Boolean,
		},
		 
		data() {
			return {
				navRect: {
					bottom: 0,
					height: 0,
					top: 0,
				}
			}
		},
		
		watch: {
			navRect: {
				deep:true, //深度监听设置为 true
				handler:function(newV, oldV) {
					this.navRect = newV
				}
			},
		},
		
		methods: {
			toBack() {
				let pages = getCurrentPages(); // 页面栈
				let beforePage = pages[pages.length - 2]; // 上一页
				uni.navigateBack({
				  success: () => {
				    beforePage.onLoad(beforePage.options); // 执行上一页的onLoad方法
				  }
				});
			},
		},
	}
 
</script>

<style scoped lang="scss">
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000000;
    background: #fff;
		box-shadow: 0rpx 4rpx 30rpx 0rpx rgba(0, 0, 0, 0.2);
    // border-bottom: 1rpx solid;
    .avatar {
			position: absolute;
			display: flex;
			align-items: center;
			left: 40rpx;
			z-index: 10;
			
			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
			}
    }
		
    .title {
      position: absolute;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36rpx;
    }
		
		.home {
			position: absolute;
			left: 70rpx;
			bottom: 35rpx;
			width: 42rpx;
			height: 42rpx;
			z-index: 99;
		}
		
		.cancel {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 28rpx;
			bottom: 25rpx;
			z-index: 99;
			font-size: 30rpx;
			color: #FFFFFF;
		}
  }
</style>