<template>
	<view class="model-c-menu" hover-class="navigator-hover" @tap="toPage">
	
		<image :src="active==1?item.imagePath:item.noImagePath" mode="aspectFill"></image>

		<text class="ico-t-count" v-if="doCout">{{doCout> 99 ? '99+' : doCout}}</text>
	
		<text class="menu-text" :class="{'noFn': !active}">{{item.name}}</text>
		
	</view>
</template>

<script>
	export default {
		props:{
			'item': Object,
			'active': Boolean,
			'doCout':{
				type: Number,
				default: 0
			}
			
		},
		methods:{
			toPage(){
				this.$emit('handleClick',this.item)
			}
		}
	}
</script>

<style scoped>
	.model-c-menu {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 16rpx;
		padding-top: 16rpx;
		min-width: 185rpx;
		border-radius: 6rpx;
		position: relative;
	}

	.model-c-menu image {
		width: 73rpx;
		height: 72rpx;
	}

	.menu-text {
		font-family: 'SimHei';
		font-size: 24rpx;
		color: #3C3C3C;
		margin-top: 8rpx;
	}

	.menu-text.noFn {
		color: #D6D8D9;
	}

	.ico-t-count {
		position: absolute;
		color: #fff;
		border-radius: 18rpx;
		min-width: 16rpx;
		width: auto;
		height: auto;
		padding: 1rpx 8rpx;
		font-size: 20rpx;
		line-height: 1.2;
		text-align: center;
		white-space: nowrap;
		background-color: #ed4d3e;
		position: absolute;
		right: 44rpx;
		top: 16rpx;
	}
</style>
