<template>
	<view>
		<view class="padding-tb-lg padding-lr bg-white">
			<view class="cu-list menu-avatar margin-bottom-sm">
				<view class="cu-item padding-bottom-sm">
					<view class="cu-avatar xl" :style="'background-image:url(' + curSpec.picUrl + ');'">
					</view>
					<view class="content margin-left">
						<text class="text-price text-red text-xxl">{{curSpec.salePrice}}</text>
						<text class="text-gray text-sm flex justify-between">
							{{curSpec.comments}}
						</text>
					</view>
				</view>
			</view>
			<view class="flex justify-between margin-lr-sm margin-tb-sm padding-lr">
				<view>购买型号</view>
				<view>购买数量</view>
			</view>
			<view class="margin-bottom-lg certern-height-with-scroll">
				<view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in specsList"
					:key="item.id">
					<view class='cu-tag padding' :class="curSpec.id === item.id ? 'line-main-color' : 'line-default'"
						@click="chooseSpecs(item)">{{item.name}}</view>
					<uni-number-box :min="0" :max="item.maxPieces" :value="0" @change="changePiecesNum($event, index)">
					</uni-number-box>
				</view>
			</view>
		</view>
		<!-- 底部操作条 -->
		<view class="cu-bar bg-white tabbar border shop fixed-bottom-bar">
			<view class="action">
				<view class="cuIcon-cartfill">
					<view class="cu-tag badge" v-if="totalPickCount > 0">{{totalPickCount}}</view>
				</view>
			</view>
			<view class="action text-df center-grid">
				<text class="margin-lr-xs">共计</text>
				<text class="text-red text-price">{{totalPrice}}</text>
			</view>
			<view class="bg-main-color submit">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "product-pick",
		props: {
			specsList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {
				curSpec: {},
				// specsList: [],
				totalPrice: 0,
				pickList: [],
				totalPickCount: 0
			}
		},
		onReady() {
			this.loadData();
		},
		methods: {
			loadData() {
				this.curSpec = this.specsList[0];
				this.specsList.forEach(function(item) {
					this.pickList.push({
						price: item.price,
						salePrice: item.salePrice,
						pickCount: 0
					})
				}.bind(this));
			},
			changePiecesNum(piecesNum, index) {
				let spec = this.pickList[index];
				this.totalPrice -= spec.salePrice * (spec.pickCount - piecesNum);
				this.totalPickCount -= spec.pickCount - piecesNum
				this.pickList[index].pickCount = piecesNum;
			},
			chooseSpecs(item) {
				this.curSpec = item;
			}
		},
	}
</script>

<style scoped>
	.fixed-bottom-bar .cuIcon-cartfill:before {
		font-size: 64rpx;
	}

	.fixed-bottom-bar .text-df {
		font-size: 28rpx !important;
	}

	.fixed-bottom-bar .center-grid {
		width: 43% !important;
		text-align: left;
	}

	.certern-height-with-scroll {
		height: 600rpx;
		overflow: scroll;
	}
</style>
