<template>
		<sh-popup :popupShow="popupShow" :maxHeight="maxHeight" :popupTitle="popupTitle">
			<template #contentTop>
				<view class="sku-header sh-flex p-l-30 p-r-30 m-b-38">
					<view class="sku-img">
						<u-image radius="10" :showLoading="true" :src="sku.img" width="75px" height="75px" @click="click"></u-image>
					</view>
					<view class="sku-rt sh-autoFullHig">
						<view class="price t-color fz-34 m-b-20">
							{{sku.price}}
						</view>
						<view class="m-b-10 ">
							<text class="desc fz-24" >库存：{{sku.num>0?sku.num:'无货'}}</text>
						</view>
						<text class="desc1  fz-24">{{sku.text}}</text>
					</view>  
				</view>
			</template>
			<template  #content>
				<!-- 多规格 -->
				<view class="sku-content p-l-20 " v-if="skuInfo.attrFlag">
					<view class="sku-item m-b-20" v-for="(pItem,i) in skuData.ary" :key="i">
						<text class="sku-title fz-28" >{{pItem.text}}</text>
						
						<view class="sku-c-item m-t-24">
							<view class="tag-init m-r-20 m-b-20 sh-inline-flex" v-for="(item,j) in pItem.data" :key="j" >
								<u-tag :color="curr[i] == j?'#f1270c':'#000000'" :bgColor="curr[i] == j?'#ffebeb':'#f0f0f0'" :borderColor="curr[i] == j?'#ffebeb':'#f0f0f0'" :text="item.text" @click="chooseSku(i,j,item)"   shape="circle"></u-tag>
							</view>	
						<!-- 	<view class="tag-init  m-r-20 m-b-20">
								<u-tag color="#000000" bgColor="#f0f0f0" borderColor="#f0f0f0" text="原味1"  shape="circle"></u-tag>
							</view>	 -->
						 
						</view>
					</view>
				</view>
				<!-- 单规格 -->
				<view v-else class="sku-number sh-flex sh-flex-sb m-l-30 m-r-30 m-b-60">
					<view class="lf fz-28">
						 数量
					</view>
					<view class="rt">
						<u-number-box v-model="confirmParams.amount">
							<view slot="minus"  class="minus" >
								<u-icon  name="minus"  size="12" ></u-icon>
							</view>
							<text slot="input"  style="width: 50px;text-align: center;" class="input" >{{confirmParams.amount}}</text>
							<view slot="plus" class="plus" >
								<u-icon  name="plus" color="#FFFFFF"  size="12" ></u-icon>
							</view>
						</u-number-box>
					</view>
				</view>
			</template>
	<!-- 			 <template  #contentBot>
				 	<view class="sku-number sh-flex sh-flex-sb m-l-30 m-r-30 m-b-60">
				 		<view class="lf fz-28">
				 			 数量
				 		</view>
				 		<view class="rt">
				 			<u-number-box v-model="number">
				 				<view slot="minus"  class="minus" >
				 					<u-icon  name="minus"  size="12" ></u-icon>
				 				</view>
				 				<text slot="input"  style="width: 50px;text-align: center;" class="input" >{{number}}</text>
				 				<view slot="plus" class="plus" >
				 					<u-icon  name="plus" color="#FFFFFF"  size="12" ></u-icon>
				 				</view>
				 			</u-number-box>
				 		</view>
				 	</view>
				 </template> -->
			<template #footer>
				<sh-circle-btn v-if="skuInfo.btnFlag == 'addCard'" color="#f2390c" text="确 定" @tap="confirmCart"></sh-circle-btn>
				<sh-circle-btn v-else color="#ffbd1e" text="立即购买" @tap="confirmBuy"></sh-circle-btn>
			</template>
		</sh-popup>
</template>
<script>
	/**
	 * 商品sku
	 * @property {Object} skuInfo - 商品信息
	 * @property {Object} popupShow - 商品信息
	 */
	import http from '@/shopro/request/index';
	import qs from 'qs';
	import shPopup from '@/components/sh-popup/sh-popup.vue';
	import shCirclebtn from '@/components/sh-circle-btn/sh-circle-btn.vue';
	import {Spec} from '@/shopro/utils/spec.js'

	export default {
		props:{
			popupShow: {
				type: Boolean,
				default: ''
			},
			skuInfo:{
				type: Object,
				default: {}
			}
		},
		components: {
			shPopup,
			shCirclebtn
		},
		data(){
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				// popupShow:true,
				maxHeight:'600rpx',
				popupTitle:"选择规格",
				confirmParams:{ //加入购物车、立即购买参数
					attrvalId: 0,
					goodsId: '',
					amount: 1,
					buyNowFlag: 0//0加入购物车，1立即购买
				},
				curr:[],//当前选择
				record:[],
				skuData:[],
				sku:{
					price:'',
					num:'',
					text:'',
					img:''
				}
			}
		},
		methods:{
			// 提交购物车
			confirmCart(){
				if(!this.skuInfo.attrFlag) {
					this.confirmParams.attrvalId = this.skuInfo.attrId;
				}
				this.confirmParams.goodsId = this.skuInfo.goodsId;
				this.confirmParams.buyNowFlag = 0;
				// qs.stringify(
				http('cart.addCartGoods', qs.stringify(this.confirmParams)).then(res => {
					if (!res.code) {
						 this.$u.toast("已加入购物车");
					}else{
						this.$u.toast(res.msg);
					} 
				})
			},
			// 立即购买
			confirmBuy() {
				this.confirmParams.buyNowFlag = 1;
			},
			// 默认选中处理多规格
			defaultSpec(){
				var attr = new Array();  //根据attrs长度，定义一个数组，传递默认值，[0,0,0...] 默认选中[1,0][2,0]
				let defaultCurr = [];//默认当前的值
				
				for(var i =0;i<this.skuInfo.attrs.length;i++){
					defaultCurr.push(0); //[0,0,0]
				}
				this.curr = defaultCurr;
				this.skuData = new Spec(this.skuInfo.attrs, this.skuInfo.skus, this.curr);
				this.sku =  this.skuData.defaultData[0];
				this.confirmParams.attrvalId = this.sku.id;
			},
			// 选择多规格
			chooseSku(i,j,obj){
				if(this.record == i + '' + j) {
					this.$set(this.curr, i, null);
					this.record = '';
				} else {
					this.$set(this.curr, i, j);
					this.record = i + '' + j;
				}
				let skuData = new Spec(this.skuInfo.attrs, this.skuInfo.skus, this.curr);
				this.sku = {
					"price":obj.price,
					"num":obj.num,
					"text":obj.text,
					"img":obj.img,
				}
				this.confirmParams.attrvalId = obj.id;  
			}

		},
		mounted(){
			setTimeout(()=>{
				if(this.skuInfo.attrFlag){
					this.defaultSpec();
				}
			},1000)
			
		}
		
	}
</script>
<style lang="scss" scoped>
	// 多规格
	.sku-header{
		.sku-img{
			width: 150rpx;
			margin-right: 20rpx;
			background-color: #f5f5f5;
			padding: 10rpx;
			border-radius: 20rpx;
		}
		.sku-rt{
			.desc,.desc1{
				color: #868686;
			}
			 
		}
	}
	.sku-content{
		.sku-title{
			font-weight: bold;
		}
		.sku-number{
			 
			.lf{
				font-weight: bold;
			}
		}
		
		
	}


	
	
	
</style>