<template>
	<uni-popup ref="goodsPopup" type="bottom">
		<view class="wrap w-100">
			
			<view
				class="flex j-start a-center"
				v-if="goods"
			>
				<image 
					class="goods-cover mr-2"
					:src="goods.cover"
					mode="aspectFit"
				/>
				<view class="font-28 font-bold">{{goods.title}}</view>
			</view>
			
			<scroll-view scroll-y class="sku-list w-100 font-28">
				<view
					class="sku-item py-2"
					v-for="(item, index) in skuData"
					:key="item.sku_id"
				>
					<view class="w-100 flex j-between a-center mb-2">
						<view class="flex-1">{{item.spec_str}}</view>
						<view class="step-wrap">
							<input-number
								:defaultVal="item.counts"
								:index="index"
								@change="numberChange"
							/>
						</view>
					</view>
					<view class="w-100 flex j-between a-center">
						<view class="flex-1 text-left price-txt">
							<!-- 如果不是阶梯价 ? 价格 === 0 ? 询价 : 固定售价 -->
							<text v-if="item.is_tiered === '1'">¥{{item.tiered_pri}}</text>
							<text v-else-if="item.is_tiered === '0' && item.price === '0'">询价</text>
							<text v-else>¥{{item.price}}</text>
							
							<text class="originPrice ml-1">¥{{item.original_price}}</text>
						</view>
						<view class="flex-1 text-center">库存:{{item.inventory}}</view>
						<view class="payCount text-center">{{item.origin_number_sku}}件起购</view>
					</view>
				</view>
			</scroll-view>
			
			<view class="flex w-100 a-center flex-column font-28 mt-2">
				<view class="as-end">
					共<text class="btn-theme">{{totalCounts}}</text>件
					<text class=" ml-2 price btn-theme">¥{{totalPrice}}</text>
				</view>
			</view>
			
			<!-- btn -->
			<view class="w-100 btn-wrap flex j-between a-center text-center font-32">
				<view class="btn-cart flex-1" @click.stop="handleCart">加入购物车</view>
				<view class="btn-pay flex-1" @click.stop="handlePay">立即购买</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
import uniPopup from '@/components/uni-popup/index.vue'
import price from '@/components/price/index.vue'
import inputNumber from '@/components/inputNumber/index.vue'
import { addCart } from '@/apis/carts.js'
import { mapActions } from 'vuex'
export default {
	name: 'goods-popup',
	
	data() {
		return {
			goods: null,
			skuData: [],
			currentSku: null, // 一次只能提交一个规格到购物车: 0,
			totalCounts: 0,
			totalPrice: 0
		}
	},
	
	components: {
		uniPopup,
		inputNumber,
		price
	},
	
	computed: {
		// 总数
		// totalCounts() {
		// 	return this.skuData.reduce((pre, cur) => {
		// 		return pre + cur.counts
		// 	}, 0)
		// },
		
		// // 总价
		// totalPrice() {
		// 	return 1
		// }
	},
	
	methods: {
		...mapActions('cart', ['setCount']),
		/**
		 * @param {Object} params
		 * goodsInfo: {
			 cover 封面
			 title 
		 }
		 goodsSku  sku
		 */
		async show(params) {
			try{
				console.log(params)
				this.goods = params.goodsInfo
				this.skuData = params.skuData
				this.skuData.forEach(item => item.counts = 0)
				this.$refs.goodsPopup.open()
			}catch(e){
				console.log(e)
				this.$toast({title: e.msg || '程序错误'})
			}
			
		},

		hide() {
			this.$refs.goodsPopup.close()
			this.showSku = false
			this.detail = null
			this.currentSku = null
			this.skuData = []
			this.goods = null
		},

		numberChange(e) {
			console.log(e)
			const skuData = this.skuData
			const idx = e.index
			const value = e.val
			this.currentSku = {
				goods_id: skuData[idx].goods_id,
				cart_number: value,
				sku_id: skuData[idx].sku_id
			}
			this.$set(this.skuData[idx], 'counts', value)
			this.total()
		},
		
		total() {
			const skuData = this.skuData
			this.totalCounts = skuData.reduce((pre, cur) => { return pre + cur.counts}, 0)
			this.totalPrice = skuData.reduce((pre, cur) => { return pre + ~~cur.price * cur.counts }, 0)
		},
		
		// 加入购物车
		async handleCart() {
			console.log('33333333')
			try{
				console.log('00003333')
				console.log(this.currentSku)
				if(!this.currentSku) return
				const { status, data } = await addCart(this.currentSku)
				if(status) {
					this.$toast({title: '加入购物车成功', cb: this.hide})
					this.setCount()
				}
			}catch(e){
				console.log(e)
				this.$toast({title: '加入购物车失败'})
				//TODO handle the exception
			}
		},
		
		// 下单
		handlePay() {
			console.log('00000')
		}
	}
}
</script>

<style lang="scss" scoped>
.wrap {
	position: relative;
	@include borderBox(20rpx, 20rpx);
	padding-bottom: 118rpx;// 20 + 98
	background-color: #fff;
	
	.goods-cover {
		width: 160rpx;
		height: 160rpx;
	}
	
	.sku-list {
		height: 372rpx;
		@include borderBox(30rpx, 20rpx);
		.sku-item {
			border-bottom: 1rpx solid $line;
		}
		.step-wrap {
			flex: 0 0 224rpx;
			width: 224rpx;
			height: 64rpx;
		}
		
		.payCount {
			flex: 0 0 224rpx;
			font-size: 20rpx;
			color: $desc;
		}
		
		.price-txt {
			color: $primary;
			.originPrice {
				color: $desc;
				text-decoration: line-through;
			}
		}
		
	}
	
	.btn-wrap {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		height: 98rpx; 
		.btn-cart, .btn-pay {
			color: #fff;
			font-weight: bold;
			line-height: 98rpx;
		}
		.btn-cart {
			background-color: #FFBB33;
		}
		.btn-pay {
			background-color: $primary;
		}
	}
	
	.btn-theme {
		color: $primary;
	}
}
</style>