<template>
	<view class="nav flex-line" :style="`background-color:${bgColor}`">
		<view class="icon-image">
			<slot v-if="isLeftSlot" name="leftView"></slot>
			<img  v-else src="@/static/image/help/back.png" alt="" @click="back" />
		</view>
		<view class="color-3 title font-w500 font-36">
			{{navTitle}}
		</view>
		<view class="flex-line">
			<slot name="rightView"></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name: "navBar",
		props: {
			bgColor: {
				type: String,
				default: () => "transparent",
			},
			navTitle: {
				type: String,
				default: () => "标题",
			},
			emitBack:{
				type: Boolean,
				default: () => false,
			},
			isLeftSlot:{
				type: Boolean,
				default: () => false,
			}
		},
		methods:{
			back(){
				if(this.emitBack) {
					this.$emit('backEvent')
				} else {
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.nav {
		padding: 32rpx;
		width: calc(100% - 64rpx);
		justify-content: start;
		.icon-image {
			width: 48rpx;
			height: 48rpx;
		}
		.title {
			width: calc(100% - 3rem);
			text-align: center;
		}
	}
</style>