<template>
	<view class="u-relative u-flex item">
		
		<up-image :src="data.coverImg" mode="aspectFill"  :width="img.width" :height="img.height"></up-image>
		<!-- <image lazy-load class="img" :src="data.coverImg" mode="aspectFill" :style="computedImgStyle()"></image> -->
		<view class="info u-flex u-row-between u-col-top u-flex-col" @tap="emitEvent('add')">
			<view>
				<view>
					<text class="u-line-2">{{data.name}}</text>
				</view>
				<view class="u-font-32 font-bold u-m-t-16">
					￥{{data.price}}
				</view>
			</view>
			<view class="u-flex">
				<template v-if="!isSellout">
					<template v-if="!data.isDan">
						<button class="btn" hover-class="btn-hover-class" @tap="emitEvent('chooseGuige')">选规格</button>
					</template>
					<template v-else>
						<view class="u-flex icon-btn">
							<view class="u-flex" @tap.stop="emitEvent('add')">
								<image src="/pagesCreateOrder/static/images/icon-add.svg" class="icon" mode=""></image>
							</view>
							<template v-if="data.chooseNumber">
								<view class="u-font-32">
									{{data.chooseNumber}}
								</view>
								<view class="u-flex" @tap.stop="emitEvent('reduce')">
									<image src="/pagesCreateOrder/static/images/icon-reduce.svg" class="icon" mode="">
									</image>
								</view>
							</template>
						</view>
					</template>
				</template>
				<template v-else>
					<view class=" u-m-t-16">
						已售罄
					</view>
				</template>


			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		toRef,
		toRefs,
		watch
	} from 'vue';
	import util from '../util.js';
	const props = defineProps({
		img:{
			type:Object,
			default:{
				width:'250rpx',
				height:'272rpx'
			}
		},
		index: {
			type: [Number,String],
		},
		isSeatFee:{
			//是否为餐位费
			type:Boolean,
			default:false
		},
		data: {
			type: Object,
			default: () => {
				return {
					chooseNumber: 0
				}
			}
		}
	})
	
	function computedImgStyle(){
		return {
			width:props.img.width,
			height:props.img.height
		}
	}
	
	//判断是否是菜品
	function isGoods(){
		return props.data.hasOwnProperty('id')
	}
	
	//判断商品是否售尽
	const isSellout = computed(() => {
		const item = props.data
		if(!isGoods()){
			return false
		}
		return (
			item.isPauseSale ||
			(item.typeEnum !== "sku" && item.isStock==1&& item.stockNumber <= 0)
		);
	})


	const emits = defineEmits(['add', 'reduce', 'chooseGuige'])
	
	function emitEvent(emitName){
		if(isGoods()){
			emits(emitName, props.index)
		}
	}
</script>

<style lang="scss" scoped>
	.icon {
		width: 48rpx;
		height: 48rpx;
	}

	.icon-btn {
		gap: 14rpx;
	}

	.btn {
		background: #EB4F4F;
		border-radius: 100rpx;
		font-size: 28rpx;
		height: 56rpx;
		line-height: 56rpx;
		color: #fff;
	}

	.btn-hover-class {
		opacity: .6;
	}
	image{will-change: transform}
	.item {
		// width: 250rpx;
		// height: 272rpx;
		background: #F9B798;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		overflow: hidden;

		.img {
			width: 250rpx;
			height: 272rpx;
		}

		.info {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			color: #fff;
			padding: 32rpx 24rpx 24rpx 24rpx;
			top: 0;
			background: rgba(37, 22, 15, 0.5);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			overflow: hidden;
		}
	}
</style>