<template>
	<view>
		<view class="padding-lr bg-white main-container">
			<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(' + productInfo.goodsImgUrl + ');'">
					</view>
					<view class="content margin-left">
						<view>
							<text class="text-price text-red text-xxl">{{curSpec.goodsPrice}}</text>
							<text class="margin-left-xs">/{{curSpec.goodsUnit}}</text>
							<view class='cu-tag round light bg-blue padding-lr-sm margin-left-xs' v-if="productInfo.deptGoodsCategoryName">
								<text v-if="productInfo.parGoodsCategoryName">
									{{productInfo.parGoodsCategoryName}}
									<text class="margin-lr-xs">/</text>
								</text>
								<text>{{productInfo.deptGoodsCategoryName}}</text>
							</view>
						</view>
						
						<text class="text-gray text-sm flex justify-between">
							{{productInfo.goodsDesc}}
						</text>
					</view>
				</view>
			</view>
			<view class="flex justify-between margin-lr-sm margin-tb-sm padding-lr">
				<view>购买型号</view>
				<view>购买数量</view>
			</view>
			<scroll-view class="certern-height-with-scroll" :scroll-y="true" :scroll-with-animation="true">
				<view class="flex justify-between margin-lr-sm margin-tb-sm" v-for="(item,index) in specsList"
					:key="item.goodsStandardId">
					<view class='cu-tag padding'
						:class="curSpec.goodsStandardId === item.goodsStandardId ? 'line-main-color' : 'line-default'"
						@click="chooseSpecs(item)">{{item.goodsStandardName}}</view>
					<uni-number-box 
					:min="0" 
					:max="item.goodsNum ? item.goodsNum : 999" 
					:value="0" 
					@change="changePiecesNum($event, index)"
					@overstock="overstock">
					</uni-number-box>
				</view>
			</scroll-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" @click="submit">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "product-pick",
		props: {
			shopInfo: {
				type: Object,
				default: () => {}
			},
			productInfo: {
				type: Object,
				default: () => {}
			},
			specsList: {
				type: Array,
				default: () => []
			},
			orderNow: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				curSpec: {},
				// specsList: [],
				totalPrice: 0,
				pickList: [],
				totalPickCount: 0,
				defaultAddress: null
			}
		},
		watch: {
			specsList(newV, oldV) {
				this.loadData();
			}
		},
		mounted() {
			
			this.loadDefaultAddress()
		},
		methods: {
			loadData() {
				this.curSpec = this.specsList[0];
				this.specsList.forEach(function(item) {
					this.pickList.push({
						price: item.goodsPrice,
						salePrice: item.discountPrice,
						pickCount: 0
					})
				}.bind(this));
				
			},
			changePiecesNum(piecesNum, index) {
				let spec = this.pickList[index];
				let price = spec.salePrice ? spec.salePrice : spec.price;
				this.totalPrice = Math.round((this.totalPrice - price * (spec.pickCount - piecesNum)) * 100)/100;
				this.totalPickCount -= spec.pickCount - piecesNum
				this.pickList[index].pickCount = piecesNum;
			},
			chooseSpecs(item) {
				this.curSpec = item;
			},
			getPickedSpecsList() {
				let pickedList = [];
				for (let i = 0; i < this.pickList.length; i++) {
					if (this.pickList[i].pickCount > 0) {
						pickedList.push({
							id: this.specsList[i].goodsStandardId,
							name: this.specsList[i].goodsStandardName,
							pickedNum: this.pickList[i].pickCount,
							maxPieces: this.specsList[i].goodsNum,
						})
					}
				}
				return pickedList;
			},
			
			async loadDefaultAddress() {
				let res = await this.$request.getAddressList({
					customerId: this.$request.getCurUserInfo().customerId,
					isDefault: 1
				});
				if (res && res.data &&res.data.length) {
					this.defaultAddress = res.data[0];
				}
			},
			// 检测当前默认地址是否在服务区域之间
			checkDefaultAddressIfInclude() {
				if(!this.defaultAddress) return true
				const allAreaId = this.shopInfo.workerAreas.map(i => i.districtId)
				return allAreaId.includes(this.defaultAddress.countryId)
			},
			overstock(maxStock) {
				uni.showToast({
					icon: 'none',
					title: '最大库存为：'+maxStock
				})
			},
			submit() {
				if (this.orderNow) {
					// 从立即订购按钮进来的直接跳转到订单详情确认页
					let pickedList = this.getPickedSpecsList();
					if (pickedList.length === 0) {
						uni.showToast({
							icon: 'none',
							title: '请选择型号'
						})
						return;
					}
					this.makeOrder(pickedList)
					
				} else {
					// 从加入购物车按钮进来的触发父页面事件
					uni.$emit('product-detail_add2Cart', this.totalPickCount)
				}
			},
			makeOrder(pickedList) {
				let params = {
					pickedProductList: [{
						...this.shopInfo,
						totalMoney: this.totalPrice,
						product: [{
							...this.productInfo,
							discountPrice: this.specsList[0].discountPrice,
							goodsPrice: this.specsList[0].goodsPrice,
							pickedList
						}],
						insuranceManagers: this.productInfo.insuranceManagers
					}]
				}
				uni.navigateTo({
					url: '../order/order-detail?params=' + encodeURIComponent(JSON.stringify(params))
				})
			}
		},
	}
</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;
		margin-bottom: calc(100rpx - constant(safe-area-inset-bottom)/2);
		margin-bottom: calc(100rpx - env(safe-area-inset-bottom)/2);
	}

	.main-container {
		padding-top: 45rpx;
	}
</style>
