<template>
	<popup :show="myShow" @clickBackground="toggleSpec" class="spec">
		<view class="attr-content attr-layer">
			<view class="a-t">
				<image :src="myImage"></image>
				<view class="right">
					<text class="price">¥{{myProduct.sellingPrice}}</text>
					<text class="stock">库存：{{myProduct.productStock}}件</text>
					<view class="selected">
						已选：
						<text class="selected-text" v-for="(sItem, sIndex) in mySpecSelected" :key="sIndex">
							{{sItem.name}}
						</text>
					</view>
				</view>
			</view>
			<scroll-view scroll-y class="attr-view" v-if="mySpecList.length>0">
				<view v-for="(item,index) in mySpecList" :key="index" class="attr-list">
					<text>{{item.name}}</text>
					<view class="item-list">
						<text v-for="(childItem, childIndex) in mySpecChildList" v-if="childItem.pid === item.id" :key="childIndex" class="tit"
						 :class="{selected: childItem.selected}" @click="selectSpec(childIndex, childItem.pid)">
							{{childItem.name}}
						</text>
					</view>
				</view>
			</scroll-view>
			<empty v-else note="没有商品规格"></empty>
			<view class="number-buy">
				<view>
					<text class="title">购买数量</text>
				</view>
				<uni-number-box position='initial' class="step num-box" :min="1" :max="myProduct.productStock" :value="myNumber"
				 :isMax="myNumber>=myProduct.productStock?true:false" :isMin="myNumber===1" :index="myProduct.id" @eventChange="numberInput"></uni-number-box>
			</view>
			<view class="btn-group">
				<button class="btn" @click="toggleSpec">完成</button>
				<button class="btn" @click="joinBag">加入购物车</button>
			</view>

			<!-- #ifdef H5-->
			<view v-if="myHasBar" style="height: 56px;"></view>
			<!-- #endif -->
		</view>
	</popup>
</template>

<script>
	import popup from './popup.vue'
	import {
		arrayDuplicateRemoval,
		addCommodityListToBog,
		productPreviewPicture,
		commodityDetailsSpecifications,
		productItem
	} from '../js/request.js'

	import empty from './empty-content.vue'
	import uniNumberBox from './uni-number-box.vue'

	export default {
		props: ['image', 'product', 'specSelected', 'specList', 'specChildList', 'show', 'number', 'hasBar'],
		components: {
			popup,
			uniNumberBox,
			empty
		},
		data() {
			return {
				myNumber: this.number || 1,
				mySpecList: this.specList || [],
				mySpecChildList: this.specChildList || [],
				mySpecSelected: this.specSelected || [],
				myShow: this.show || false,
				myProduct: productItem(this.product) || {},
				myImage: this.image || productPreviewPicture(this.myProduct),
				myHasBar: this.hasBar || false
			}
		},
		watch: {
			product(val) {
				this.myProduct = productItem(val)
			},
			myProduct: {
				handler() {},
				immediate: true
			},
			mySpecSelected: {
				handler(val) {
					this.$emit('changeSpecSelected', val)
				},
				immediate: true
			},
			myShow(val) {
				this.$emit('changeShow', val)

				if (val) {
					this.handler()
					this.specListSelectDefault()
				}
			},
			show(val) {
				this.myShow = val
			}
		},
		mounted() {

		},
		onShow() {},
		methods: {
			handler(val = this.myProduct) {
				const vo = val.vo
				if (vo) this.myProduct = vo
				this.setDataAfterInit()
				this.myImage = productPreviewPicture(this.myProduct)
			},
			async setDataAfterInit(product = this.myProduct) {
				if (!product) return
				let productStandards = product.ProductStandards || []
				if (productStandards.length <= 0 && product.id) {
					try {
						const {
							data
						} = await commodityDetailsSpecifications(product.id, {
							errTipHide: true
						})
						productStandards = data
					} catch (e) {
						this.$info(`Notfond commodityDetailsSpecifications`, e)
					}
				}

				const specList = productStandards.map(it => {
					return {
						id: it.productStandardGroupId,
						name: it.productStandardGroupName
					}
				})
				this.mySpecList = arrayDuplicateRemoval(specList)

				this.mySpecChildList = productStandards.map(it => {
					return {
						id: it.id,
						pid: it.productStandardGroupId,
						name: it.name
					}
				})

				this.specListSelectDefault()
			},
			//选择规格
			selectSpec(index, pid) {
				let list = this.mySpecChildList
				list.forEach(item => {
					if (item.pid === pid) {
						this.$set(item, 'selected', false);
					}
				})

				this.$set(list[index], 'selected', true);
				//存储已选择
				/**
				 * 修复选择规格存储错误
				 * 将这几行代码替换即可
				 * 选择的规格存放在选中中
				 */
				this.mySpecSelected = []
				list.forEach(item => {
					if (item.selected === true) {
						this.mySpecSelected.push(item)
					}
				})
			},
			specListSelectDefault() {
				this.mySpecSelected = []
				//规格 默认选中第一条
				this.mySpecList.forEach(item => {
					for (let cItem of this.mySpecChildList) {
						if (cItem.pid === item.id) {
							this.$set(cItem, 'selected', true);
							this.mySpecSelected.push(cItem);
							break; //forEach不能使用break
						}
					}
				})
			},
			numberInput(e) {
				this.$info(`Edit numberInput`, e)
				const v = e.number || e.target.value
				this.$emit('changeNumber', v)
				this.myNumber = v
			},
			editNumber(dir) {
				let benchmark = 1
				if (!dir) benchmark *= -1
				let number = parseInt(this.number)
				if ((number <= 1 && benchmark < 0) || (number >= 99 && benchmark > 0)) {
					this.message('范围错误', 'pro-fail')
					return;
				}
				this.myNumber = number + benchmark
				this.$emit('changeNumber', this.myNumber)
				this.$emit('editNumber', dir)
			},
			editNumberInput() {
				this.$emit('editNumberInput')
			},
			toggleSpec() {
				this.myShow = !this.myShow
				this.$emit('toggleSpec')
			},
			async joinBag() {
				const body = {
					product: {
						id: this.myProduct.id
					},
					number: this.myNumber,
					specificationList: this.mySpecChildList.map(it => {
						return {
							id: it.id,
							content: it.name
						}
					})
				}
				await addCommodityListToBog(JSON.stringify([body]))
				this.message('加入成功', 'pro-success')
				this.toggleSpec()
				this.$emit('joinBag')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.number-buy {
		display: flex;
		justify-content: space-between;

		.title {
			color: #4399FC;
			line-height: 80upx;
		}

		.num-box {}
	}

	.btn-group {
		display: flex;
		justify-content: space-around;

		.btn {
			height: 66upx;
			line-height: 66upx;
			border-radius: 100upx;
			background: $uni-color-primary;
			font-size: $font-base + 2upx;
			color: #fff;
			margin: 30upx auto 20upx;
			width: 40%;
		}
	}

	.attr-view {
		height: 500upx;
	}

	/* 规格选择弹窗 */
	.attr-content {
		padding: 10upx 30upx;

		.a-t {
			display: flex;

			image {
				width: 170upx;
				height: 170upx;
				flex-shrink: 0;
				margin-top: -40upx;
				border-radius: 8upx;
				;
			}

			.right {
				display: flex;
				flex-direction: column;
				padding-left: 24upx;
				font-size: $font-sm + 2upx;
				color: $font-color-base;
				line-height: 42upx;

				.price {
					font-size: $font-lg;
					color: $uni-color-primary;
					margin-bottom: 10upx;
				}

				.selected-text {
					margin-right: 10upx;
				}
			}
		}

		.attr-list {
			display: flex;
			flex-direction: column;
			font-size: $font-base + 2upx;
			color: $font-color-base;
			padding-top: 30upx;
			padding-left: 10upx;
		}

		.item-list {
			padding: 20upx 0 0;
			display: flex;
			flex-wrap: wrap;

			text {
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-right: 20upx;
				margin-bottom: 20upx;
				border-radius: 100upx;
				min-width: 60upx;
				height: 60upx;
				padding: 0 20upx;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.selected {
				background: #fbebee;
				color: $uni-color-primary;
			}
		}
	}
</style>
