<template>
	<u-navbar :title="title" placeholder class="custom_nav_bar">
		<template slot="left">
			<slot name="left">
				<view class="u-nav-slot">
					<img @click="leftClick" class="back_icon" width="12" height="20"
						src="static/images/common_left_arrow.png" alt="" srcset="" />
				</view>
			</slot>
		</template>

		<template slot="center">
			<slot name="center"></slot>
		</template>

		<template slot="right">
			<slot name="more">
				<view @click="rightClick" v-if="more" class="u-nav-slot">
					<u-icon class="more_dot" name="more-dot-fill" size="23" color="#0C1C33"></u-icon>
				</view>
			</slot>
		</template>
	</u-navbar>
</template>

<script>
	export default {
		name: "",
		components: {},
		props: {
			title: {
				type: String,
			},
			more: {
				type: Boolean,
				default: false,
			},
			route: {
				type: Boolean,
				default: true,
			},
		},
		data() {
			return {};
		},
		methods: {
			leftClick() {
				if (this.route) {
					uni.navigateBack();
				}
				this.$emit("leftClick");
			},
			rightClick() {
				this.$emit("rightClick");
			},
		},
	};
</script>

<style lang="scss" scoped>
	.custom_nav_bar {
		::v-deep .u-navbar__content__left {
			padding: 0;
		}

		::v-deep .u-navbar__content__right {
			padding: 0;
		}

		.back_icon {
			padding: 24rpx;
			margin-left: 20rpx;
		}

		.more_dot {
			padding: 24rpx;
			margin-right: 20rpx;
		}
	}
</style>