<template>
	<uni-nav-bar :height="height" fixed :statusBar="false" :rightWidth="rWidth" :border="false" :dark="true">
		<block v-slot:left>
			<button type="primary" @click="clickBack">
				<uni-icons type="undo-filled" color="#fff" size="30"></uni-icons>
			</button>
		</block>
		<view class="nav-title" v-if="props.title">{{props.title}}</view>
		<slot v-else></slot>
		<block v-slot:right>
			<slot name="right"></slot>
		</block>
	</uni-nav-bar>
</template>

<script setup name="ChNavBar">
import { reactive, defineProps, computed } from 'vue';
import { back } from '@/useModules/useNavigate.js'

const props = defineProps([
	'title',
	'height',
	'backFn',
	'rightWidth'
])

const data = reactive({
	
})

const rWidth = computed(() => `${props.rightWidth || 110}rpx`)

function clickBack () {
	const fn = props.backFn || back;
	fn();
}
</script>

<style lang="scss" scoped>
@import './ch-nav-bar.scss';
</style>