<template>
	<uv-navbar
		:fixed="true"
		:safeAreaInsetTop="true"
		:titleWidth="640"
		@leftClick="handleLeft"
		:bgColor="bgColor"
	>
		<template v-slot:left v-if="type == 'user'">
			<view class="uv-nav-slot">
				<image src="@/static/images/default_avatar.png" mode="scaleToFill" />
				<text :style="'color:' + titleColor">{{ title }}</text>
			</view>
		</template>

		<template v-slot:left v-if="type == 'default'">
			<view class="uv-nav-slot">
				<uv-icon name="arrow-left" size="19"></uv-icon>
				<text :style="'color:' + titleColor">{{ title }}</text>
			</view>
		</template>

		<template v-slot:center v-if="type == 'center'">
			<view class="uv-nav-slot">
				<text style="font-weight: bold; font-size: 34rpx; color: #16181a">{{
					title
				}}</text>
			</view>
		</template>
		<template v-slot:left v-if="type == 'center' && isLeft">
			<view class="uv-nav-slot">
				<uv-icon name="arrow-left" size="19"></uv-icon>
			</view>
		</template>
	</uv-navbar>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from "vue";
const emit = defineEmits(["handleLeft"]);
const props = defineProps({
	title: String,
	leftIcon: {
		type: String,
		default: "",
	},
	leftIconColor: {
		type: String,
		default: "#000",
	},
	titleColor: {
		type: String,
		default: "#000",
	},
	bgColor: {
		type: String,
		default: "#c4f2f4",
	},
	type: {
		type: String,
		default: "default",
	},
	isLeft:{
		type: Boolean,
		default: false,
	}
});
const handleLeft = () => {
	emit("handleLeft");
};
</script>

<style lang="scss">
@import "./index.scss";
</style>
