<template>
	<view class="container-nav" :style="`width: ${width}px;height: ${(conheight)}px`">
		<!-- <view class="uni-badge badge" :style="`background-color: ${badgeColor};`">
			{{badge}}
		</view> -->
		<view class="nav" :style="`border: ${border};width: ${width}px;height: ${height}px;background:${background}`" @click="click">
			<!-- <image :src="require(src)" /> -->
			<!-- <text><slot/></text> -->
			<slot name="image"/>
		</view>
		<slot name="text"/>
	</view>
	
	
</template>

<script>
	export default {
		props: {
			width: {
				default: 100,
				type: [String, Number]
			},
			height: {
				default: 100,
				type: [String, Number]
			},
			background: {
				default: '#FF0',
				type: [String]
			},
			src: {
				default: '',
				type: [String]
			},
			badge: {
				default: 0,
				type: [String, Number]
			},
			border: {
				default: '0px solid #FFF',
				type: [String]
			},
			badgeColor:{
				default: '#f1f1f1',
				type: [String]
			},
			data: ''
		},
		computed:{
			conheight (){
				return Number(this.height) + 14 + 30;
			}
		},
		methods: {
			click() {
				this.$emit('click', this.data)
			}
		}
	}
</script>

<style>
	.container-nav {
		text-align: center;
		position: relative;
	}
	.badge {
		position: absolute;
		top: -7px;
		right: -17px;
		color: #fff;
		background-color: #4cd964;
	}
	.nav {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 16px;
	}
	
</style>
