<template>
	<view class="u-relative u-flex item box-shadow " @tap="emitEvent('showDetail')">
		<!-- 已下架 -->
		<view v-if="!data.isSale"
			style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;z-index: 9999;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: rgba(0, 0, 0, .6);">
			<image style="width: 220px;height: 220px;" src="@/static/iconImg/icon_goods_yxj.svg" />
		</view>
		<!-- 未开售 -->
		<view v-else-if="!isProductAvailable(data.days,data.startTime.substring(11),data.endTime.substring(11))"
			style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;z-index: 9999;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: rgba(0, 0, 0, .6);">
			<image style="width: 220px;height: 220px;" src="@/static/iconImg/icon_goods_wks.svg" />
		</view>

		<!-- 已售罄 -->
		<view v-else-if="(data.isStock && data.stockNumber<=0) "
			style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;z-index: 9999;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: rgba(0, 0, 0, .6);">
			<image style="width: 220px;height: 220px;" src="@/static/iconImg/icon_goods_sq.svg" />
		</view>
		<!-- 库存不足 -->
		<view v-else-if="data.isSoldStock"
			style="display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;z-index: 9999;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);background-color: rgba(0, 0, 0, .6);">
			<image style="width: 220px;height: 220px;" src="@/static/iconImg/Insufficient_inventory.svg" />
		</view>


		<view class="img">
			<image lazy-load :src="data.coverImg" mode="aspectFill"></image>
		</view>
		<!-- <image lazy-load class="img" :src="data.coverImg" mode="" ></image> -->
		<view class="info u-flex u-flex-col  u-row-right ">
			<view class="u-flex w-full u-row-right u-p-r-20 u-p-b-16 u-flex-1 u-flex-col">
				<template v-if="!isSellout">
					<template v-if="data.type=='sku'||data.groupType==1">
						<view class="u-flex u-row-right w-full">
							<view class="u-flex">
								<button class="btn" hover-class="btn-hover-class"
									@tap.stop="emitEvent('chooseGuige')">选规格</button>
							</view>
						</view>

					</template>
					<template v-else-if="data.type=='weight'">
						<view class="u-flex u-row-right w-full">
							<view class="u-flex">
								<button class="btn" hover-class="btn-hover-class"
									@tap.stop="emitEvent('tapweigh')">称重</button>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="u-flex w-full u-row-right ">
							<view class="u-flex icon-btn">
								<template v-if="data.chooseNumber">
									<view class="u-flex" @tap.stop="emitEvent('reduce')">
										<image src="/pagesCreateOrder/static/images/icon-reduce.svg" class="icon"
											mode="">
										</image>
									</view>
									<view class="u-font-32 ">
										{{data.chooseNumber}}
									</view>
								</template>
								<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>
							</view>


						</view>
					</template>
				</template>
				<template v-else>
					<view class=" u-m-t-16  u-row-center u-col-center">
						已售罄
					</view>
				</template>
			</view>
			<view class="bg-fff u-p-20 w-full">
				<view class="u-flex u-row-between u-font-16">
					<view>{{data.name}}</view>
					<view class=" font-bold u-m-t-16">
						￥{{data.lowPrice}}
					</view>
				</view>


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

<script setup>
	import {
		computed,
		toRef,
		toRefs,
		watch
	} from 'vue';
	import dayjs from "dayjs";
	import isBetween from "dayjs/plugin/isBetween";
	dayjs.extend(isBetween)
	import {
		onLoad
	} from '@dcloudio/uni-app'
	const props = defineProps({
		img: {
			type: Object,
			default: {
				width: '250rpx',
				height: '272rpx'
			}
		},
		windowWidth: {
			//px
			type: Number,
			default: 0
		},
		windowHeight: {
			//px
			type: Number,
			default: 0
		},
		layout: {
			type: String,
			default: 'default'
		},
		index: {
			type: [Number, String],
		},
		isSeatFee: {
			//是否为餐位费
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default: () => {
				return {
					chooseNumber: 0
				}
			}
		},
		gap: {
			//px
			type: Number,
			default: 20
		}
	})

	watch(() => props.windowWidth, (newval) => {
		console.log(newval);
	})


	const computedImgStyle = computed(() => {
		const stylobj = {
			width: props.img.width,
			height: props.img.height
		}
		if (props.layout == 'default') {
			stylobj.width = (props.windowWidth - props.gap * 3) / 2 + 'px'
			stylobj.height = (props.windowHeight - props.gap * 2 - 40) / 2 + 'px'
			console.log(stylobj);
			return stylobj
		}
		return stylobj
	})

	// const asd = computed(()=>{

	// })
	// 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', 'showDetail', 'tapweigh'])
	// 判断商品是否在可售时间内
// 判断商品是否在可售时间内
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()];

    // 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;
}
// 新增兼容了隔天时间区域兼容，需引入isBetween插件

	function emitEvent(emitName) {
		if (isGoods()) {
			emits(emitName, props.index)
		}
	}
</script>

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

	.icon-btn {
		gap: 14rpx;
	}

	.btn {
		background: #EB4F4F;
		border-radius: 100rpx;
		font-size: 32rpx;
		font-weight: bold;
		padding: 0 50rpx;
		color: #fff;
	}

	.btn-hover-class {
		opacity: .6;
	}

	.item {
		// width: 250rpx;
		// height: 272rpx;
		background: #F9B798;
		border-radius: 12px;
		overflow: hidden;
		width: 100%;
		height: 100%;
		position: relative;

		&.default {
			.img {}
		}

		.img {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			z-index: 1;
			object-fit: contain;

			image {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}

		.info {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			// background: rgba(37, 22, 15, 0.5);
			border-radius: 0 0 12px 12px;
			overflow: hidden;
			z-index: 2;
		}


	}
</style>