<template>
    <view>
        <view class="menu--item" v-for="(item, index) in lists" :key="index" @click="$emit('onMenu', item)" :style="btnStyle">
            <view class="menu--block">
                <view class="menu--number" v-if="isNumber">
                    {{ index + 1 }}
                </view>
                <image class="menu--picture" :src="item.cover ? item.cover : '/static/find/default_img.png'" mode="aspectFill"></image>
            </view>
            <view class="menu--label">
                <view class="nowrap menu--name">
                    {{ item.name }}
                </view>
                <view class="nowrap menu--text">
                    <block v-if="isType == 'rank'">
                         {{ item.heat }}
                    </block>
                    <block v-else-if="isType == 'det'">
                        {{ item.weight }} 克
                    </block>
                    <block v-else>
                        {{ item.sub_title }}
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
	export default{
		props:{
			lists: {
				type	: Array,
				required: true,
				default : () => {
					return []
				}
			},
            // 列表底部距离
            btnStyle: {
            	type	: Object,
            	default	: () => {
            		return {}
            	}
            },
            // 是否显示排行数字
            isNumber: {
            	type: Boolean,
            	default: false
            },
            
            // det是详情  rank为排行
            isType: {
            	type:'',
            	default	: () => {
            		return {}
            	}
            }
		},
		mounted() {
			// console.log(this.$props)
		}
	}
</script>
<style lang="scss" scoped>
    
    .menu--item {
        background-color: white;
        border-radius: $radius;
        position: relative;
        display: flex;
        margin-bottom: $margin - 10;
        &:last-child {
            margin-bottom: 0;
        }
        .menu--block {
            position: relative;
            width: 110rpx;
            height: 110rpx;
            border-radius: $radius;
            overflow: hidden;
            .menu--number {
                top: 0;
                left: 0;
                position: absolute;
                z-index: 9;
                font-size: $title-size-sm;
                padding: 0 $padding - 20;
                background-color: $text-gray-m;
                border-radius: $radius 0 $radius 0;
                color: #FFFFFF;
            }
            .menu--picture {
                z-index: 1;
                top: 0;
                left: 0;
                position: absolute;
                width: 100%;
                height: 100%;
            }
        }
        &:nth-child(1) .menu--number,
        &:nth-child(2) .menu--number,
        &:nth-child(3) .menu--number{
            background-color: $text-price;
        }
        .menu--label {
            width: calc(100% - 140rpx);
            margin: 10rpx 0 0 30rpx;
            &:last-child {
                margin-bottom: 0!important;
            }
            .menu--name {
                font-size: $title-size-lg;
                margin-bottom: $margin - 20;
                font-weight: bold;
                color: $text-color;
            }
            .menu--text {
                color: $text-gray;
                font-size: $title-size-m;
            }
        }
    }
</style>
