<template>
	<view class="container">
		<view class="content">
			<image class="close" src="../../static/close-gray.png" mode="" @click="close()"></image>
			<view class="top">
				<image class="img" :src="selectImg" mode=""></image>
				<view class="integral">{{selectSkuIntegral}}积分</view>
			</view>
			<view class="attr">
				<view class="title">{{goodsData.specsName || '1111'}}</view>
				<view class="item-content">
					<view @click="clickItem(item)" class="item" :class="selectSkuNo===item.skuNo?'active':''" v-for="(item, index) in goodsData.skuList" :key="index">
						{{item.denomination}} 
					</view>
				</view>
			</view>
			<view class="info">
				<view class="left">购买数量：</view>
				<view class="buy-button">
					<image v-if="goodsNum===1" class="reduce" src="../../static/reduce.png" mode="" @click="reduce()"></image>
					<image v-else class="reduce" src="../../static/reduce-h.png" mode="" @click="reduce()"></image>
					<view class="goods-num">{{goodsNum}}</view>
					<image class="plus" src="../../static/add.png" mode="" @click="add()"></image>
				</view>
			</view>
			<view class="info pay-integral">
				<view class="left">支付积分：</view>
				<view class="pay-integral-right">{{payIntegral}}积分</view>
			</view>
			<view class="buy-bottom" @click="buyGoods()">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"goodsSelect",
		data() {
			return {
				selectItem: {},
				selectSkuNo: '',
				selectSkuIntegral: '',
				selectImg: '',
				goodsNum: 1,
				goodsData: {}
			};
		},
		props: {
			goods: {
				type: Object
			},
			closeName: {
				type: String
			}
		},
		watch: {
			goods(newVal, oldVal) {
				this.goodsData = newVal
				this.selectItem = newVal.skuDetail
				this.selectItem.coverImg = newVal.skuDetail.spuImg
				this.selectSkuNo = newVal.skuDetail.skuNo
				this.selectSkuIntegral = newVal.skuDetail.sellingPrice
				this.selectImg = newVal.skuDetail.spuImg
			}
		},
		computed: {
			payIntegral() {
				return this.$numUtils.numMulti(this.selectSkuIntegral, this.goodsNum)
			}
		},
		methods: {
			clickItem(item) {
				this.selectItem = item
				this.goodsNum = 1
				this.selectSkuNo = item.skuNo
				this.selectSkuIntegral = item.sellingPrice
				this.selectImg = item.coverImg
			},
			add() {
				if (this.$numUtils.numMulti(this.selectSkuIntegral, this.goodsNum+1) > Number(this.$store.state.userInfo.surplusIntegral)) {
					this.toast('积分不足')
					return 
				}
				this.goodsNum++
			},
			reduce() {
				if (this.goodsNum === 1) {
					return
				}
				this.goodsNum--
			},
			close() {
				this.$parent[this.closeName] = false
			},
			buyGoods() {
				this.$emit('certain', {'goodsNum': this.goodsNum, 'goods': this.selectItem})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba($color: #000000, $alpha: 0.7);
	z-index: 99999;
	.content {
		border-radius: 24rpx 24rpx 0 0;
		background-color: #FFFFFF;
		padding: 32rpx;
		position: fixed;
		bottom: 0;
		.top {
			display: flex;
			height: 192rpx;
			border-bottom: 2rpx solid #F5F5F5;
			.img {
				display: block;
				height: 160rpx;
				width: 160rpx;
				border-radius: 16rpx;
			}
			.integral {
				margin-top: 110rpx;
				line-height: 50rpx;
				color: #FF0520;
				font-size: 36rpx;
				font-weight: bolder;
				margin-left: 20rpx;
			}
		}
		.close {
			position: absolute;
			top: 24rpx;
			right: 24rpx;
			height: 36rpx;
			width: 36rpx;
		}
		.attr {
			padding: 32rpx 0;
			border-bottom: 2rpx solid #F5F5F5;
			.title {
				font-size: 28rpx;
				color: #333333;
			}
			.item-content {
				display: flex;
				width: 100%;
				flex-flow: wrap;
				.item {
					padding: 12rpx 62rpx;
					color: #666666;
					background-color: #F5F5F5;
					margin-top: 28rpx;
					border-radius: 8rpx;
					margin-right: 44rpx;
					max-width: 686rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28rpx;
				}
				.active {
					color: #FF0520;
					background-color: #FFF7F8;
					border: 2rpx solid #FF0520;
				}
			}
		}
		.info {
			display: flex;
			justify-content: space-between;
			margin-top: 32rpx;
			.left {
				font-size: 28rpx;
				color: #333333;
			}
			.buy-button {
				position: relative;
				display: flex;
				width: 160rpx;
				height: 40rpx;
				font-size: 28rpx;
				align-items: center;
				.reduce {
					width: 40rpx;
					height: 40rpx;
				}
	
				.goods-num {
					width: 78rpx;
					text-align: center;
					color: #333333;
				}
	
				.plus {
					position: absolute;
					top: 0;
					left: 118rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}
		}
		.pay-integral {
			margin-top: 40rpx;
			.pay-integral-right {
				font-size: 28rpx;
				color: #FF0520;
			}
		}
		.buy-bottom {
			margin-top: 96rpx;
			border-radius: 40rpx;
			height: 80rpx;
			width: 686rpx;
			background-color: #FF0520;
			line-height: 82rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 32rpx;
			z-index: 99999;
			margin-bottom: 32rpx;
		}
	}
}
</style>
