<template>
    <view>
        <view class="bacb disba padding20 posi-bzy" style="border-top: 1rpx solid #eeeeee;">
        	<view class="disba" style="width: 24%;">
        		<view @tap="goHome" class="discc margin-z20">
        			<image class="bottosimg" src="/static/img/public/home.png" mode=""></image>
        			<view class="fon24 bottoc">首页</view>
        		</view>
        		<view @tap="goKef" class="discc posir">
        			<image class="bottokimg" src="/static/img/public/xkef.png" mode=""></image>
        			<view class="fon24 bottoc">客服</view>
					<button v-if="showKf" class="fon24 bottoc posia" style="opacity: 0;" open-type="contact" bindcontact="huik">客服</button>
        		</view>
        	</view>
        	<view v-if="user_type!='personal'" class="disac">
        		<view @tap="diaoq" class="margin-y20 textc bottoj">加入购物车</view>
        		<view @tap="diaoq" class="textc bottol">立即购买</view>
        	</view>
        </view>
        <!-- 底部弹框 -->
        <view @touchmove.stop.prevent="moveHandle" v-if="isBtn" class="posiall zIn5" style="background-color: rgba(0,0,0,.6);">
            <view class="posi-bzy padding20" style="border-top-left-radius: 30rpx;border-top-right-radius: 30rpx;background-color: #FFFFFF;z-index: 6;">
                <view class="margin-s20 dis">
                    <image class="flexs" style="width: 201rpx;height: 201rpx;border-radius: 10rpx;" :src="srcImg"></image>
                    <view class="margin-z20 width100">
                        <view class="colorf6 fon24 bold">￥<text class="fon28">{{detail.sku_list[sku_index].cur_price/100}}</text>.0</view>
                        <view class="fon28 color33">{{detail.name}}</view>
                    </view>
                    <view @tap="isBtn=false" style="flex-shrink: 0; width: 38rpx;height: 38rpx;border-radius: 100%;background-color: rgba(0,0,0,.15);position: relative;display: flex;justify-content: center;align-items: center;top: -10rpx;">
                        <view style="width: 2rpx;height: 20rpx;background-color: #666666;position: absolute;transform: rotate(45deg);"></view>
                        <view style="width: 2rpx;height: 20rpx;background-color: #666666;position: absolute;transform: rotate(-45deg);"></view>
                    </view>
                </view>
                <view class="bold color33 margin-s30" style="font-size: 30rpx;">规格选择</view>
                <view class="disac flw">
                    <view @tap="chooseguig(item.id,indexg)" 
                    :class="guigCurrent==indexg?'guigactive':'guigmo'" 
                    class="fon24 margin-s20 margin-y10 padding-sx10 padding-zy30" 
                    v-for="(item,indexg) in guigArr" :key="indexg"
                    style="background-color: #f3f3f3;border-radius: 30rpx;min-width: 60rpx;text-align: center;max-width: 100%;"><view class="clips1">{{item.title}}</view></view>
                </view>
                <view class="borbot margin-x20 margin-s30"></view>
                <view class="disba">
                    <view class="width100">数量</view>
                    <view class="disac" style="justify-content:flex-end;">
                    	<!-- 递减 -->
						<view @tap="delEvent(0)" class="disbcac padding-sx30">
							<image class="margin-y20" style="width: 18rpx;height: 4rpx;" src="../static/img/product/del.png"></image>
						</view>
                    	<!-- 数量框 -->
                    	<input type="text" disabled v-model="num" style="width: 40%;background-color: #F5F5F5;text-align: center;padding: 4rpx 0;border-radius: 4rpx;"/>
                    	<!-- 递增 -->
						<view @tap="addEvent(1)" class="disbcac padding-sx30">
							<image class="margin-zy20" style="width: 18rpx;height: 18rpx;" src="../static/img/product/add.png"></image>
						</view>
                    </view>
                </view>
                <view class="disbcac padding-sx40">
                    <view @tap="addGowc" class="bold padding-sx20 padding-zy40 colorf78 margin-y10" style="font-size: 30rpx;border: 1rpx solid #FF7800;border-radius: 60rpx;width: 30%;text-align: center;">加入购物车</view>
                    <view @tap="buy" class="bold padding-sx20 padding-zy40 colorb margin-z20" style="font-size: 30rpx;background-color: #ff7800;border-radius: 60rpx;width: 30%;text-align: center;">立即购买</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
		props:{
			detail:{
				type:Object,
				default:function(){
					return {}
				}
			},
			sku_img:{
				type:String,
				default:''
			}
		},
        data() {
            return {
                guigArr:[],
                guigCurrent:0,
                num:1,
                isBtn:false,
				sku_index:0,
				sku_id:'',
				srcImg:'',
				orderList:[],
				showKf:true,
				user_type:uni.getStorageSync('user_type')//权限
            };
        },
		watch:{
			sku_img:function(newImg,oldImg){
				this.srcImg = newImg
			}
		},
		mounted() {
			if(uni.getStorageSync('is_active')==0) {
				this.showKf = false
			}
		},
        methods:{
			huik(){
				// console.log('萨拉丁开发');
			},
            goHome(){uni.switchTab({url:'/pages/tabbar/homePage/homePage'})},
            goKef(){
				if(uni.getStorageSync('is_active')==0) {
					this.$toolAll.tools.showToast('您目前是游客，请授权登录')
					setTimeout(()=>{
						uni.navigateTo({url:'/pages/login/login'})
					},1500)
				}
			},
            diaoq(){
				if(uni.getStorageSync('is_active')==0) {
					this.$toolAll.tools.showToast('您目前是游客，请授权登录')
					setTimeout(()=>{
						uni.navigateTo({url:'/pages/login/login'})
					},1500)
				} else {
					this.$emit('diaoq');
					this.isBtn = true
					this.guigArr = []
					this.orderList = []
					this.detail.sku_list.forEach(item=>{
						this.guigArr.push(item)
						if(item.is_main==1){
							let buyObj = {
								sku_coding:item.coding,
								num:this.num
							}
							this.orderList.push(buyObj)
							// console.log(this.orderList);
						}
					})
				}
			},
            addGowc(){//添加购物车事件
                this.isBtn = false
				if(this.sku_id==''){
					this.sku_id = this.guigArr[0].id
				}
				this.$requst.post('order/shopping-cart-add',{sku_id:this.sku_id,num:this.num}).then(res=>{
					// console.log(res);
					if(res.code==0){
						this.num = 1
						this.sku_id = ''
						this.$toolAll.tools.showToast('加入购物车成功(*^▽^*)')
					}
				},error=>{})
            },
            buy(){//立即购买事件
                this.isBtn = false
				let storageAddress = uni.getStorageSync('storageAddress')
				let buyParma = {
					sku_list: this.orderList,
					address_id: storageAddress || '' 
				}
				console.log('参数',buyParma);
				this.$requst.post('order/prepare-info',buyParma).then(res=>{
					// console.log(res);
					if(res.code==0){
						uni.setStorageSync('orderInfo',res.data)
						uni.navigateTo({
						    url:'/pagesA/confirmOrder/confirmOrder'
						})
					}
				},error=>{})
            },
            chooseguig(id,index){
				this.orderList = []//清空coding、num参数
                this.guigCurrent = index
				let ob = this.guigArr.findIndex((item)=>item.id==id)
				this.sku_index = ob
				this.srcImg = this.$http + this.guigArr[ob].main_image
				this.sku_id = id
				let chooseBuyObj = {
					sku_coding:this.detail.sku_list[this.sku_index].coding,
					num:this.num
				}
				this.orderList.push(chooseBuyObj)
            },
            delEvent(){
                // this.num==1 ? this.num=1 : this.num--
                this.num==1 ? this.num=1 : this.num--
				this.orderList[0].num = this.num
            },
            addEvent(){
                // this.num==10 ? this.num=10 : this.num++
                this.num++
				this.orderList[0].num = this.num
            },
            moveHandle(){
                return
            }
        }
    }
</script>

<style>

</style>
