<template>
	<div class="headNav">
		<van-nav-bar
			:title="title"
			:right-text="RText"
			:left-text="LText"
			:left-arrow="Larrow"
			@click-left="backPage"
			@click-right="addRoad"
		>
			<template #right>
				<van-icon color="#FFFFFF" v-if="iconName" :name="iconName" size="18" @click="rightIconClick" />
			</template>
		</van-nav-bar>
	</div>
</template>

<script>
export default {
	name: 'headNav',
	props: {
		title: {
			type: String,
			default: ''
		},
		canBack: {
			type: Boolean,
			default: true
		},
		RText: {
			type: String,
			default: ''
		},
		LText: {
			type: String,
			default: ''
		},
		Larrow: {
			type: Boolean,
			default: true
		},
		iconName: {
			type: String,
			default: ''
		},
		id: {
			type: String | Number,
			default: ''
		},
		backRouter: {
			type: Object
		}
	},
	data() {
		return {
			key: '',
			// count: 0
		};
	},
	methods: {
		init() {},

		// 后退
		backPage() {
			if (this.canBack) {
				if (this.backRouter) {
					this.$router.push(this.backRouter);
					return
				}
				this.$router.back();
			}
			else {
				this.$emit('leftAction');
			}
		},

		// 新增占道
		addRoad() {
			this.$emit('addRoad');
			this.$emit('rightClick');
		},

		rightIconClick() {
			this.$emit('rightClick');
		}
	}
};
</script>

<style lang="scss" scoped></style>

<style lang="scss">
.headNav {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 99;

	.van-nav-bar {
		background-color: #3F8DFF !important;
	}

	.van-nav-bar__title {
		font-size: 17px;
		color: #FFFFFF !important;
	}

	.van-nav-bar__right {
		.van-nav-bar__text {
			// color: #0066ff;
			color: #FFFFFF;
			font-size: 14px;
		}
	}

	.van-nav-bar__left {
		.van-icon.van-icon-arrow-left.van-nav-bar__arrow {
			color: #FFFFFF;
		}
	}

	.van-nav-bar__content {
		// border-bottom: 1px solid #b4b4b6;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.van-nav-bar__text {
		font-size: 14px;
	}

	.van-icon {
		font-size: 20px !important;
		color: #0073ac;
	}
}
</style>
