<template>
<view class="uibuydialog">
	<block v-if="isload">
		<view class="buydialog-mask" @tap="buydialogChange"></view>
		<view class="buydialog">
			<view class="buydialog-close" @tap="buydialogChange">
				<image class="buydialog-close__img" :src="event_rul + '/static/img/static/img/close.png'"></image>
			</view>
			<view class="buydialog-product flex">
				<image class="buydialog-product__img" :src="nowguige.pic || product.pic" @tap="previewImage" :data-url="nowguige.pic || product.pic"/>
				<view class="buydialog-product__bd flex1">
					<view class="buydialog-product__price flex al-item-center" :style="{color: colors.priceColor}">￥{{nowguige.sell_price}} <text v-if="nowguige.market_price > nowguige.sell_price" class="original-price">￥{{nowguige.market_price}}</text></view>
					<text class="buydialog-product__choosename" v-if="product.limit_start > 1"> {{product.limit_start}}件起售</text>
					<view class="buydialog-product__stock">库存：{{nowguige.stock}}</view>
					<view class="buydialog-product__choosename" v-if="product.limit_start<=1">已选规格: {{nowguige.name}}</view>
				</view>
			</view>
			<view class="buydialog-bd">
				<view v-if="nowguige.balance_price" class="installment-price" :style="{color:t('color1')}">首付款金额：{{nowguige.advance_price}}元，尾款金额：{{nowguige.balance_price}}元</view>
				<view class="buydialog-specification__list">
					<view v-for="(item, index) in guigedata" :key="index" class="buydialog-specification flex-col">
						<view class="buydialog-specification__name">{{item.title}}</view>
						<view class="buydialog-specification__list flex al-item-center">
							<block v-for="(item2, index2) in item.items" :key="index2">
								<view :data-itemk="item.k" :data-idx="item2.k" :style="{background: ggselected[item.k] == item2.k ? colors.textBgcolor : '#F4F4F4', color: ggselected[item.k] == item2.k ? colors.textColor : '#666'}" :class="'buydialog-specification__item ' + (ggselected[item.k]==item2.k ? 'on':'')" @tap="ggchange">{{item2.title}}</view>
							</block>
						</view>
					</view>
				</view>
				<view class="buydialog-buynum flex al-item-center j-between">
					<view class="buydialog-buynum__txt flex1">购买数量：</view>
					<view class="buydialog-buynum__btn flex al-item-center">
						<view class="sub-btn flex al-item-center j-center"><text class="iconfont icon-jian" :class="{'disabled': gwcnum < 2}" @tap="gwcminus"></text></view>
						<input class="num flex1" type="number" :value="gwcnum" @input="gwcinput"></input>
						<view class="add-btn flex al-item-center j-center"><text class="iconfont icon-shanchu1" :class="{'disabled': gwcnum == nowguige.stock}" @tap="gwcplus"></text></view>
					</view>
				</view>
			</view>
			<view class="buydialog-ft">
				<view v-if="shopset && shopset.showcommission==1 && nowguige.commission > 0" class="buydialog-ft__tips" :style="{color:colors.textColor}">分享好友购买预计可得{{t('佣金')}}：<text class="commission">{{nowguige.commission}}</text>{{nowguige.commission_desc}}</view>
				<view class="buydialog-ft__btns flex">
					<block v-if="nowguige.stock <= 0">
						<button class="buydialog-ft__btn nostock flex1">库存不足</button>
					</block>
					<block v-else>
						<button class="buydialog-ft__btn addcart flex1" :style="{background:colors.purchaseBtn,color:colors.purchaseText}" @tap="addcart" v-if="btntype==0 && canaddcart">加入购物车</button>
						<button class="buydialog-ft__btn tobuy flex1" :style="{background:colors.singleBtn}" @tap="tobuy" v-if="btntype==0">立即购买</button>
						<button class="buydialog-ft__btn addcart flex1" :style="{background:colors.singleBtn}" @tap="addcart" v-if="btntype==1">确 定</button>
						<button class="buydialog-ft__btn tobuy flex1" :style="{background:colors.singleBtn}" @tap="tobuy" v-if="btntype==2">确 定</button>
					</block>
				</view>
			</view>
		</view>
	</block>
	<loading v-if="loading"></loading>
</view>
</template>
<script>
	var app = getApp();
	export default {
		data() {
			return {
				ks:'',
				product:{},
				guigelist:{},
				guigedata:{},
				ggselected:{},
				nowguige:{},
				gwcnum:1,
				isload:false,
				loading:false,
				canaddcart:true,
				shopset:{},
				
				event_rul: app.globalData.event_url,
				pagesUrl: '',
				colors:{
					priceColor: '#ED5925',  // 价格颜色
					textBgcolor: '#E2F7EF', // 规格选中背景色
					textColor: this.t('color1'),   // 规格选中字体颜色
					singleBtn: 'linear-gradient(to right, #01A664, #096741)',   // 单个按钮背景色
					purchaseBtn: 'linear-gradient(to right, #E9FAF4, #CAF6E5)',   // 购买按钮背景色
					purchaseText: this.t('color1'), // 购买按钮字体颜色
				},
			}
		},
		props: {
			btntype:{default:0},
			menuindex:{default:-1},
			controller:{default:'ApiShop'},
			needaddcart:{default:true},
			proid:{},
			showtaos: {default: 0},
			themsColor: {default: 0}
		},
		created() {
			if(this.themsColor == 1) { // 海纳百川
				this.colors = {
					priceColor: '#FF4800',  // 价格颜色
					textBgcolor: '#E6EFFF', // 规格选中背景色
					textColor: '#1870C5',   // 规格选中字体颜色
					singleBtn: 'linear-gradient(to right, #269DD1, #5487D7)',   // 单个按钮背景色
					purchaseBtn: 'linear-gradient(to right, #E9F1FF, #E6EFFF)',   // 购买按钮背景色
					purchaseText: '#1870C5', // 购买按钮字体颜色
				}
			}
			if(this.themsColor == 2) { // 百里挑一
				this.colors = {
					priceColor: '#CE0000',  // 价格颜色
					textBgcolor: '#FFE4C2', // 规格选中背景色
					textColor: '#CE0000',   // 规格选中字体颜色
					singleBtn: 'linear-gradient(to right, #AECA00, #8CB400)',   // 单个按钮背景色
					purchaseBtn: 'linear-gradient(to right, #FFE8EC, #FFE8EC)',   // 购买按钮背景色
					purchaseText: '#CE0000', // 购买按钮字体颜色
				}
			}
			if(this.themsColor == 3) { // 橙心如意
				this.colors = {
					priceColor: '#ED5925',  // 价格颜色
					textBgcolor: '#FFE8EC', // 规格选中背景色
					textColor: '#FB5E00',   // 规格选中字体颜色
					singleBtn: 'linear-gradient(to right, #FF7D16, #FF640A)',   // 单个按钮背景色
					purchaseBtn: 'linear-gradient(to right, #FFE7C8, #FFE4C2)',   // 购买按钮背景色
					purchaseText: '#FB5E00', // 购买按钮字体颜色
				}
			}
			if(this.themsColor == 4) {  // 红福齐天
				this.colors = {
					priceColor: '#ED5925',  // 价格颜色
					textBgcolor: '#FFE4E6', // 规格选中背景色
					textColor: '#D11800',   // 规格选中字体颜色
					singleBtn: 'linear-gradient(to right, #FA5F47, #FD5A54)',   // 单个按钮背景色
					purchaseBtn: 'linear-gradient(to right, #FFF4F5, #FFE0E1)',   // 购买按钮背景色
					purchaseText: '#D11800', // 购买按钮字体颜色
				}
			}
			
			if(this.themsColor == 5) {  // 和气生财
				this.colors = {
					priceColor: '#ED5925',  // 价格颜色
					textBgcolor: '#FFD9A4', // 规格选中背景色
					textColor: '#E64520',   // 规格选中字体颜色
					singleBtn: 'linear-gradient(150deg, #F65326, #C40000)',   // 单个按钮背景色
					purchaseBtn: '#FFD9A4',   // 购买按钮背景色
					purchaseText: '#E64520', // 购买按钮字体颜色
				}
			}
			if(this.themsColor == 6) {  // 青山绿水
				this.colors = {
					priceColor: '#E55554',  // 价格颜色
					textBgcolor: '#EAFFFA', // 规格选中背景色
					textColor: '#5CBB62',   // 规格选中字体颜色
					singleBtn: 'linear-gradient(150deg, #95E196, #65B76A)',   // 单个按钮背景色
					purchaseBtn: '#EAFFFA',   // 购买按钮背景色
					purchaseText: '#5CBB62', // 购买按钮字体颜色
				}
			}
		},
		mounted:function(){
			var pages = getCurrentPages()
			this.pagesUrl = pages[pages.length - 1].route
			this.getdata();
		},
		methods:{
			getdata:function(){
				var that = this;
				if(this.controller == 'ApiShop' && app.globalData.isdouyin == 1){
					app.showLoading('加载中');
					app.post('ApiShop/getDouyinProductId',{proid:that.proid},function(res){
						app.showLoading(false);
						if(res.status == 1){
							tt.openEcGood({promotionId:res.douyin_product_id});
						}else{
							app.alert(res.msg)
						}
					});
					return;
				}

				that.loading = true;
				app.post(this.controller+'/getproductdetail',{id:that.proid},function(res){
					that.loading = false;
					that.product = res.product;
					that.shopset = res.shopset;
					if(!that.product.limit_start){
						that.product.limit_start = 1;
					}
					that.guigelist = res.guigelist;
					that.guigedata = res.guigedata;
					var guigedata = res.guigedata;
					var ggselected = [];
					for (var i = 0; i < guigedata.length; i++) {
						ggselected.push(0);
					}
					that.ks = ggselected.join(','); 
					that.nowguige = that.guigelist[that.ks];
					that.ggselected = ggselected;
					if(that.nowguige.limit_start > 0)
						that.gwcnum = that.nowguige.limit_start;
					else
						that.gwcnum = that.product.limit_start;
					that.isload = true;
					if(that.product.freighttype==3 || that.product.freighttype==4){ //虚拟商品不能加入购物车
						that.canaddcart = false;
					}
				});
			},
			buydialogChange:function(){
				this.$emit('buydialogChange');
			},
			//选择规格
			ggchange: function (e){
				var idx = e.currentTarget.dataset.idx;
				var itemk = e.currentTarget.dataset.itemk;
				var ggselected = this.ggselected;
				ggselected[itemk] = idx;
				var ks = ggselected.join(',');
				this.ggselected = ggselected;
				this.ks = ks;
				this.nowguige = this.guigelist[this.ks];
				if(this.nowguige.limit_start > 0) {
					if (this.gwcnum < this.nowguige.limit_start) {
						this.gwcnum = this.nowguige.limit_start;
					}
				}
			},
			tobuy: function (e) {
				var that = this;
				var ks = that.ks;
				var proid = that.product.id;
				var ggid = that.guigelist[ks].id;
				var stock = that.guigelist[ks].stock;
				var num = that.gwcnum;
				if (num < 1) num = 1;
				if (stock < num) {
					app.error('库存不足');
					return;
				}
				var prodata = proid + ',' + ggid + ',' + num;
				this.$emit('buydialogChange');
				if(this.controller == 'ApiShop'){
					app.goto('/pagesA/shop/buy?prodata=' + prodata);
				}else if(this.controller == 'ApiSeckill'){
					app.goto('/activity/seckill/buy?prodata=' + prodata);
				}else if(this.controller == 'ApiSeckill2'){
					app.goto('/activity/seckill2/buy?prodata=' + prodata);
				}else if(this.controller == 'ApiRestaurantTakeaway'){
					app.goto('/restaurant/takeaway/buy?prodata=' + prodata);
				}else if(this.controller == 'ApiRestaurantShop'){
					app.goto('/restaurant/shop/buy?prodata=' + prodata);
				}
			},
			//加入购物车操作
			addcart: function () {
				var that = this;
				var ks = that.ks;
				var num = that.gwcnum;
				var proid = that.product.id;
				var ggid = that.guigelist[ks].id;
				var stock = that.guigelist[ks].stock;
				if (num < 1) num = 1;
				if (stock < num) {
					app.error('库存不足');
					return;
				}
				if(this.needaddcart){
					app.post(this.controller+'/addcart', {proid: proid,ggid: ggid,num: num}, function (res) {
						if (res.status == 1) {
							app.success('添加成功');
						} else {
							app.error(res.msg, 1500);
							if(that.showtaos == 1){
								uni.hideToast()
							}
							if(that.pagesUrl == 'pages/shop/product') {
								that.$emit('cartPuch',res.goods);
							}
							
						}
					});
				}
				this.$emit('addcart',{proid: proid,ggid: ggid,num: num});
				this.$emit('buydialogChange');
			},
			//加
			gwcplus: function (e) {
				var gwcnum = this.gwcnum + 1;
				var ks = this.ks;
				if (gwcnum > this.guigelist[ks].stock) {
					app.error('库存不足');
					return 1;
				}
				if (this.product.perlimitdan > 0 && gwcnum > this.product.perlimitdan) {
					app.error('每单限购'+this.product.perlimitdan+'件');
					return 1;
				}
				this.gwcnum = this.gwcnum + 1;
			},
			//减
			gwcminus: function (e) {
				var gwcnum = this.gwcnum - 1;
				var ks = this.ks;
				if(this.nowguige.limit_start > 0) {
					if (gwcnum <= this.nowguige.limit_start - 1) {
						if(this.nowguige.limit_start > 1){
							app.error('该规格' + this.nowguige.limit_start + '件起售');
						}
						return;
					}
				}else{
					if (gwcnum <= this.product.limit_start - 1) {
						if(this.product.limit_start > 1){
							app.error('该商品' + this.product.limit_start + '件起售');
						}
						return;
					}
				}
				
				this.gwcnum = this.gwcnum - 1;
			},
			//输入
			gwcinput: function (e) {
				var ks = this.ks;
				var gwcnum = parseInt(e.detail.value);
				if (gwcnum < 1) return 1;
				if (gwcnum > this.guigelist[ks].stock) {
					return this.guigelist[ks].stock > 0 ? this.guigelist[ks].stock : 1;
				}
				if(this.nowguige.limit_start > 0) {
					if (gwcnum <= this.nowguige.limit_start - 1) {
						if(this.nowguige.limit_start > 1){
							app.error('该规格' + this.nowguige.limit_start + '件起售');
						}
						gwcnum = this.nowguige.limit_start;
					}
				}else{
					if (gwcnum <= this.product.limit_start - 1) {
						if(this.product.limit_start > 1){
							app.error('该商品' + this.product.limit_start + '件起售');
						}
						gwcnum = this.product.limit_start;
					}
					
				}
				if (this.product.perlimitdan > 0 && gwcnum > this.product.perlimitdan) {
					app.error('每单限购'+this.product.perlimitdan+'件');
					gwcnum = this.product.perlimitdan;
				}
				
				this.gwcnum = gwcnum;
			},
		}
	}
</script>
<style lang="scss">
.uibuydialog {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999990;
}
.buydialog-mask{ position: fixed; top: 0rem; left: 0rem; width: 100%; background: rgba(0,0,0,0.5); bottom: 0rem;z-index:10}
.buydialog {
	position: fixed;
	width: 100%;
	left: 0;
	bottom: 0;
	background: #fff;
	z-index:9999995;
	padding: 0 24rpx 28rpx;
	padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(20rpx + env(safe-area-inset-bottom));	
	border-radius:20rpx 20rpx 0 0;
	&-close {
		position: absolute;
		top: 26rpx;
		right: 26rpx;
		z-index:12;
		&__img {
			width: 28rpx;
			height:28rpx;
		}
	}
	&-product {
		padding: 16rpx 6rpx;
		border-bottom: 1rpx solid #F4F4F4;
		&__img {
			flex-shrink: 0;
			width: 204rpx;
			height:204rpx;
			border-radius: 10rpx;
			margin-right: 24rpx;
		}
		&__price {
			margin-top: 34rpx;
			font-size: 36rpx;
			font-weight: bold;
			color: #ED5925;
			line-height: 32rpx;
			.original-price {
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
				font-weight: normal;
				text-decoration:line-through;
				margin-left: 20rpx;
			}
		}
		&__stock,&__choosename {
			font-size: 26rpx;
			color: #999999;
			line-height: 36rpx;
			margin-top: 12rpx;
		}
		&__choosename {
			margin-top: 16rpx;
		}
	}
	.installment-price {
		margin-top: 10rpx;
		font-size: 24rpx;
		line-height: 32rpx;
	}
	&-specification{
		padding-top: 28rpx;
		&__name {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			line-height: 40rpx;
			margin-bottom: 20rpx;
		}
		&__list {
			flex-wrap:wrap;
			margin-bottom: -10rpx;
		}
		&__item {
			background: #F4F4F4;
			color:#666666;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
			border-radius: 8rpx;
			padding: 0 16rpx;
			font-size: 24rpx;
			line-height: 60rpx;
			&.on {
				color: #0A5D3B;
				background: #E2F7EF;
			}
		}
	}
	&-buynum {
		padding-top: 28rpx;
		font-size: 28rpx;
		color: #333333;
		font-weight: bold;
		line-height: 56rpx;
		&__btn {
			border: 1rpx solid #CCCCCC;
			border-radius: 6rpx;
			width: 96px;
			.sub-btn,.add-btn {
				width: 56rpx;
				height: 56rpx;
				flex-shrink: 0;
				.iconfont {
					font-size: 26rpx;
					color: #333333;
					&.disabled {
						color: #CCCCCC;
					}
					&.icon-shanchu1 {
						font-size: 24rpx;
						transform: rotate(45deg);
					}
				}
			}
			.num {
				height: 56rpx;
				padding: 0 10rpx;
				text-align: center;
				border-left: 1rpx solid #CCCCCC;				
				border-right: 1rpx solid #CCCCCC;
			}
		}
	}
	&-ft {
		&__tips {
			margin-top:20rpx;
			font-size: 22rpx;
			line-height: 32rpx;
			.commission {
				font-weight: bold;
				padding: 0 3rpx;
			}
		}
		&__btns {
			margin-top: 32rpx;
			border-radius: 40rpx;
			overflow: hidden;
		}
		&__btn {
			height: 80rpx;
			line-height: 80rpx;
			font-size:28rpx;
			font-weight:bold;
			color: #fff;
			&:first-child {border-top-left-radius: 40rpx;border-end-start-radius: 40rpx;}
			&:last-child {border-top-right-radius: 40rpx;border-end-end-radius: 40rpx;}
			&.nostock{
				background:#ccc;
			}
		}
	}
}
</style>