<template name="headerNavBar">
	<uni-nav-bar :fixed="isFixed" :color="navColor" :background-color="navBgColor">
		<template v-slot:left>
			<uni-icons type="left" color="#fff" size="18" @click="goBack" v-if="isBack" />
		</template>
		<view class="title">
			{{title}}
			<uni-badge class="uni-badge-left-margin" v-if="warnNum" :text="warnNum" />
		</view>
		<template v-slot:right>
			<slot name="right"></slot>
		</template>
	</uni-nav-bar>
</template>
<script>
	export default {
		name: "headerNavBar",
		props: {
			title: {
				type: String,
				default: ""
			},
			isFixed: {
				type: Boolean,
				default: false,
			},
			warnNum: {
				type: Number,
				default: 0,
			},
			isBack: {
				type: Boolean,
				default: false,
			},
			isRight: {
				type: Boolean,
				default: false,
			},
			navColor: {
				type: String,
				default: "#fff"
			},
			navBgColor: {
				type: String,
				default: "#3c6dc3"
			},

		},
		methods: {
			goBack() {
            uni.navigateBack()
			}
		}

	}
</script>
<style scoped lang="scss">
	.title {
		width: 100%;
		font-size: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
	}
</style>