<template>
	<view class="u-relative u-flex item">

		<up-image :src="data.coverImg" mode="aspectFill" :width="img.width" :height="img.height"></up-image>
		<view class="info u-flex u-row-between u-col-top u-flex-col" >
			<view >
				<view >
					<text class="up-line-1">{{data.name}}</text>
				</view>
				<view class="u-font-32 font-bold u-m-t-16">
					￥{{data.lowPrice}}
				</view>
				<template v-if="data.type=='weight'">
					<view class="btnweigh">称重</view>
				</template>
			</view>
			<view class="u-flex" v-if="!isSellout">
					<template v-if="data.type == 'sku'||data.groupType==1">
						<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(data.type=='weight'?'tapweigh':'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).toFixed(2)}}
								</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>
				


			</view>
			<template v-if="isSellout">
				<view class="isSellout" v-if="data.isSale == 0" >
					<image class="isSellout_icon" src="/pagesCreateOrder/static/images/no-toDown.svg" mode=""></image>
				</view>
				<view class="isSellout" v-else-if="!isProductAvailable(data.days,data.startTime,data.endTime)" >
					<image  class="isSellout_icon" src="/pagesCreateOrder/static/images/no-saleTime.svg" mode=""></image>
				</view>
				<view class="isSellout" v-else-if="data.isSoldStock == 1" >
					<image  class="isSellout_icon" src="/pagesCreateOrder/static/images/no-sold.svg" mode=""></image>
				</view>
				<view class="isSellout" v-else-if="data.isStock == 1 && data.stockNumber <= 0" >
					<image  class="isSellout_icon" src="/pagesCreateOrder/static/images/no-stock.svg" mode=""></image>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import { computed, toRef } from 'vue';
	import util from '../util.js';
	import dayjs from "dayjs";
	import isBetween from "dayjs/plugin/isBetween.js";
	dayjs.extend(isBetween)
	
	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 isGoods() {
		return props.data.hasOwnProperty('id')
	}

	/**
	 * 判断商品是否售尽
	 */
	const isSellout = computed(() => {
		const item = props.data
		if (!isGoods()) {
			return false
		}
		return (
			(item.isStock == 1 && item.stockNumber <= 0) || item.isSoldStock == 1 || item.isSale == 0 || !isProductAvailable(item.days,item.startTime,item.endTime)
		);
	})
	// 判断商品是否在可售时间内
	function isProductAvailable(sellDaysStr, startTimeStr, endTimeStr) {
		// 将后端返回的字符串转换为数组
		const sellDays = sellDaysStr.split(',');
	    const now = dayjs();
	    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
		const currentDay = days[now.day()];
	    const currentTime = now.format('HH:mm:ss');
		
		// console.log('当前日期:', currentDay);
		// console.log('可售日期列表:', sellDays);
	    // 检查当前周几是否在可售周几列表中 
	    if (!sellDays.includes(currentDay)) {
	        // console.log('当前日期不在可售日期列表中');
	        return false;
	    }
	    const startTime = dayjs(`${now.format('YYYY-MM-DD')} ${startTimeStr}`);
	    let endTime = dayjs(`${now.format('YYYY-MM-DD')} ${endTimeStr}`);
		// 处理跨天情况
	    if (endTime.isBefore(startTime)) {
	        endTime = endTime.add(1, 'day');
	    }
	
		// console.log('当前时间:', now.format('YYYY-MM-DD HH:mm:ss'));
	    // console.log('开始时间:', startTime.format('YYYY-MM-DD HH:mm:ss'));
	    // console.log('结束时间:', endTime.format('YYYY-MM-DD HH:mm:ss'));

	    const isInRange = now.isBetween(startTime, endTime, null, '[)');
	    // console.log('当前时间是否在可售时间范围内:', isInRange);

	    return isInRange;

	}

	const emits = defineEmits(['add', 'reduce', 'chooseGuige','tapweigh'])

	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;
	}

	.btnweigh {
		margin: 5rpx 0;
		width: 100rpx;
		background: linear-gradient(124deg, #73c969 6%, #27921b 93%);
		border-radius: 10rpx;
		font-size: 24rpx;
		padding: 6rpx 0;
		text-align: center;
	}

	.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;
		}
	}
	
	.isSellout{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		.isSellout_icon{
			height: 60%;
			width: 60%;
		}
	}
</style>