<template>
	<view class="itemBox flex1 m-b-24 rad16 border flex ofh bg-w">
		<u--image :src="spu.photo[0]" radius="8rpx" width="288rpx" height="216rpx"></u--image>
		<view class="flex1 flex column md msb p-r-24 p-t-24">
			<view class="flex1 flex column md">
				<view class="fz28" style="height: 36rpx;line-height: 36rpx;">{{spu.name}}</view>
				<view class="fz28 fcm flex mac" style="height: 36rpx;line-height: 36rpx;">¥{{spu.minPrice}}<text
						class="fz24" v-if="!isPlus">起</text></view>
			</view>
			<view class="flex msb" v-if="isPlus">
				<view v-if="spuCount > 0" class="tc bg-g radLT8 radRT8 fz28" style="width:40rpx;line-height: 48rpx;"
					@click="handleSub">
					-
				</view>
				<view v-if="spuCount > 0" class="tc fz28 p-l-12 p-r-12" style="line-height: 48rpx;">
					{{spuCount}}
				</view>
				<view class="tc bg-m radLT8 radRT8 fci fz28" style="width:40rpx;line-height: 48rpx;" @click="handleAdd">
					+
				</view>
			</view>
			<navigator v-else :url="'/pages/shop/content?spu_id='+spu.id" hover-class="navigator-hover">
				<view class="bg-m radLT8 radRT8 fci fz28 p-l-12 p-r-12" style="line-height: 48rpx;">
					选规格
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		name: "listItem",
		data() {
			return {}
		},
		props: {
			spu: {
				type: Object,
				deep: true
			}
		},
		computed: {
			//判断否是 是单sku
			isPlus() {
				if (this.spu.bind_sku.length === 1 && this.spu.bind_sku[0].value.length === 1) {
					return true
				} else {
					return false
				}
			},
			//购物车列表
			cartList() {
				return this.$store.state.cartList
			},
			//spu计数器
			spuCount() {
				let count = 0
				this.cartList.forEach(item => {
					if (Number(item.spu_id) === Number(this.spu.id)) {
						count += item.countG[0]
					}
				})
				return count
			}
		},
		onReady() {
			// console.log(this.spu)
		},
		methods: {
			// 仅用于 单品spu 减少
			handleSub() {
				this.cartList.forEach((item, index) => {
					if (Number(item.spu_id) === Number(this.spu.id)) {
						if (item.countG[0] === 1) {
							// 如果数量为1，则从购物车中删除该项
							this.$store.state.cartList.splice(index, 1)
						} else {
							// 否则，减少数量
							this.$set(item.countG, 0, item.countG[0] - 1)
						}
					}
				})
			},
			// 仅用于 单品spu 增加
			handleAdd() {
				let existingItem = this.cartList.find(item => Number(item.spu_id) === Number(this.spu.id))

				if (existingItem) {
					// 如果购物车已经存在相同的SPU，则增加数量
					this.$set(existingItem.countG, 0, existingItem.countG[0] + 1)
				} else {
					// 如果购物车未添加过相同的SPU，则将其添加到购物车中
					this.$store.state.cartList.push({
						"spu_id": this.spu.id,
						"skuG": this.spu.bind_sku[0].value,
						"countG": [1],
						"priceG": [this.spu.minPrice]
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.itemBox {
		height: 216rpx;
	}
</style>