<template>
	<view class="menu" @click="handleClick">
		<div class="menu-image" :class="{'round':round }" :style="imageBoxStyle||''">
			<image :src="src || item.src" mode="aspectFit" :style="{'max-width': size+'rpx','height': '100%'}"></image>
			
		</div>
		<view class="menuName" :style='nameStyle'>{{item.name}}</view>
	</view>
</template>

<script>
	export default {
		name:"menuItem",
		props: {
			name: {type: String},
			src: {type: String},
			item: {type:Object,required:true},
			size: {
				type: Number,
				required: false,
				default: 60
			},
			imageBoxStyle: {
				required: false,
			
			},
			round:{type:Boolean ,default:false},
			nameStyle: {
				required: false,
				
			}
		},
		
		data() {
			return {
				
			};
		},
		methods:{
			handleClick(){
				this.$emit('handleClick',this.item)
			}
		}
		
	}
</script>

<style scoped>
.menu { 
	text-align: center;
	min-width: 185rpx;
	padding: 24rpx 0;
}
.menuName {
	color: #120E2B;
	font-size: 24rpx;
	text-align: center;
	margin-top: 16rpx;
}
.menu-image {
	padding: 12rpx 8rpx;
	height: 80rpx;
	box-sizing: border-box;
	margin: 0 auto;
	text-align: center;
}
.menu-image image{
	max-width: 100%;
	max-height: 100%;
}
.round {
	border-radius: 50%;
}
</style>
