<template>
	<view class="flex">
		<view class="m-t-24 rad8 ofh" style="width:192rpx;height: 144rpx;">
			<u--image :src="cart.photo" width="192rpx" height="144rpx"></u--image>
		</view>
		<view class="flex1 flex column p-24">
			<view class="fz28 m-b-24">{{cart.spu_name}}</view>
			<view v-for="(item,index) in cart.sku_nameG" :key="index" v-if="cart.sku_nameG.length>1"
				class="fz24 fcb l-h-12">1 X {{item}}</view>
			<view class="fz32 fcm fb m-t-24" style="height: 36rpx;">¥{{cart | calculateTotal}}</view>
		</view>
		<view class="flex md">
			<u-number-box disabledInput="false" :integer="true" v-model="cart.countG[0]" @change="valChange"
				@overlimit="subZero"></u-number-box>
		</view>
	</view>
</template>

<script>
	import {
		calculateTotal
	} from '@/utils/index.js'

	export default {
		name: "cart",
		data() {
			return {

			};
		},
		props: {
			index: {
				type: Number,
				deep: true
			}
		},
		computed: {
			cart() {
				let cart = this.$store.state.cartList[this.index]
				const spu = this.$store.state.spuList.find(item => item.id === cart.spu_id)
				cart.spu_name = spu.name //添加spu名字
				cart.photo = spu.photo[0] //添加spu照片
				let skuNG = []
				cart.skuG.forEach(item => {
					let sku = this.$store.state.skuList.find(i => i.id === item.toString())
					skuNG.push(sku.name)
				})
				cart.sku_nameG = skuNG
				return cart
			}
		},
		methods: {
			//计数器只改了购物车列表项 第一个商品的数量 此函数将所有商品数量同步
			valChange(e) {
				let countG = this.$store.state.cartList[this.index].countG
				if (countG.length != 1) {
					for (let i = 1; i < countG.length; i++) {
						countG[i] = e.value
					}
				}
			},
			//计数器 减号 到1时候 再次执行 从购物车清除
			subZero() {
				this.$store.state.cartList.splice(this.index, 1);
			}
		},
		onReady() {
			// console.log(this.cart)
		},
		filters: {
			calculateTotal, //计算spu单价
		}
	}
</script>

<style>

</style>