<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 class="limit-discount" v-if="is_time_discount">限时折扣</view>
			<view class="nowStockerNumber" v-if="data.isAutoSoldStock&&nowStockerNumber<=10&&nowStockerNumber>0">
				剩余库存：{{nowStockerNumber}}
			</view>
			<view>
				<view>
					<text class="up-line-1">{{ data.name }}</text>
				</view>
				<view>
					<text class="u-font-32 font-bold u-m-t-16" v-if="is_time_discount"> ￥{{ limitPrice }} </text>
					<text class="u-font-32 font-bold u-m-t-16" :class="[is_time_discount ? 'line-through' : '']">
						￥{{ data.lowPrice }}
					</text>
				</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">
						<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.toFixed(2) }}
							</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>
				</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>
					<image class="isSellout_icon" src="/pagesCreateOrder/static/images/no-stock.svg" mode=""></image>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import {
		computed,
		toRef,
		inject
	} from "vue";
	import util from "../util.js";
	import dayjs from "dayjs";
	import isBetween from "dayjs/plugin/isBetween.js";
	const yskUtils = inject("yskUtils");
	const shopInfo = inject("shopInfo");
	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,
				};
			},
		},
		limitTimeDiscount: {
			type: Object,
			default: () => {
				return {};
			},
		},
		consStockList: {
			type: Array,
			default:[]
		}
	});

	//判断是否是时间折扣商品
	const is_time_discount = computed(() => {
		if (!props.limitTimeDiscount || !props.limitTimeDiscount.id) {
			return false;
		}

		const isCanuse = yskUtils.limitUtils.canUseLimitTimeDiscount(
			props.data,
			props.limitTimeDiscount,
			shopInfo,
			null,
			"id"
		);
		return isCanuse;
	});

	const limitPrice = computed(() => {
		if (!is_time_discount.value) {
			return 0;
		}
		console.log("props.data", props.data);
		const price = yskUtils.limitUtils.returnPrice({
			goods: props.data,
			shopInfo: shopInfo,
			limitTimeDiscountRes: props.limitTimeDiscount,
			shopUserInfo: null,
			idKey: "id",
		});
		return price;
	});

	/**
	 * 判断是否是菜品
	 */
	function isGoods() {
		return props.data.hasOwnProperty("id");
	}

	/**
	 * 判断商品是否售尽
	 */
	const isSellout = computed(() => {
		const item = props.data;
		if (!isGoods()) {
			return false;
		}
		return (
			!consStockisFull(item) ||
			item.isSoldStock == 1 ||
			item.isSale == 0 ||
			!isProductAvailable(item.days, item.startTime, item.endTime)
		);
	});
	const stockNumber=computed(()=>{
		
	})
	
	// 1. 筛选匹配的耗材列表，增加对应商品数量
	const conslist=computed(()=>{
		if(props.consStockList.length<=0){
			return []
		}
		return props.consStockList.filter(v => {
			return props.data.consList.find(i =>{
				return  i.consInfoId == v.consId
			});
		}).map(v=>{
			const cItem=props.data.consList.find(c=>c.consInfoId==v.consId)
			const goodsNumber=Math.floor(v.stockNumber/cItem.surplusStock)
			console.log('props.data',props.data.name);
			console.log('goodsNumber',goodsNumber);
			return {
				...v,
				goodsNumber
			}
		}).sort((a,b)=>{
			return a.goodsNumber-b.goodsNumber
		})
	})
	
	const nowStockerNumber=computed(()=>{
		return conslist.value[0]?conslist.value[0].goodsNumber:9999
	})
	function consStockisFull(item) {
		if(!item.isAutoSoldStock){
			return true
		}
		
		// 4. 判断：最小库存 > 每份消耗库存 → 返回 true，否则 false
		if (nowStockerNumber.value>=1) {
			return true;
		} else {
			return false;
		}
	}
	// 判断商品是否在可售时间内
	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('开始时间:', startTime.format('YYYY-MM-DD HH:mm:ss')); // console.log('结束时间:', endTime.format('YYYY-MM-DD HH:mm:ss'));

		// console.log('当前时间:', now.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: 0.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: 52rpx 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%;
		}
	}

	.limit-discount {
		background-color: #cc5617;
		padding: 10rpx 20rpx;
		white-space: nowrap;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0;
		font-weight: 400;
		font-size: 24rpx;
		color: #ffffff;
		border-radius: 0 0rpx 20rpx 0rpx;
		color: #fff;
	}

	.line-through {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		text-decoration: line-through;
	}
	.nowStockerNumber{
		position: absolute;
		left: 24rpx;
		bottom: 80rpx;
		background-color: rgba(255, 255, 255, .8);
		color: red;
		padding: 4rpx 8rpx;
		font-size: 24rpx;
		border-radius: 4rpx ;
	}
</style>