<template>
<view>
    <u-popup :show="showShopCar && goods.length" mode="bottom" :round="10" :overlay="true" :closeOnClickOverlay="true" @close="closeT">
        <view class="shop-car">
            <view class="header">
                <text class="left">购物袋</text>
                <text class="right" @click="clearCar"><text class="delete-icon"></text>清空购物车</text>
            </view>
            <view class="container">
              <view>
		<view class="empty" v-if="show==false">
			<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F82%2F40%2F596fa6dc00bb4_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633499781&t=d37222e32213957ddbdd01d62e071309" mode="widthFix" style="width: 400rpx;"></image>
		<view class="empty-text">空空如也的购物</view>
		<view class="empty-button" @click="goshopping">去选购</view>
		</view>
		<view v-if="show==true">
			<view class="goods-detail" v-for="(item,index) in goods" :key="index">
				<view class="detail-left">
					<view class="goods-left">
						<u-checkbox-group @change="selected(item)">
							<label>
								<u-checkbox shape="circle" class="selected" color="#555555" :checked="item.flag"/><text></text>
							</label>
						</u-checkbox-group>
						  <image :src="item.pics.thumbnailApplet || item.pics.thumbnail" style="width: 150rpx;height: 140rpx;"></image>
					</view>
					<view class="size">
					    <text style="font-size: 28rpx;color: #000000;">{{item.name}}</text>
                        <text style="font-size:20rpx;color:#666666"><text v-for="(rl,index) in item.skus[0].rules" :key="rl.ruleName">{{rl.ruleName}}<text v-if="index!=item.skus.rules.length-1">/</text></text></text>
					    <text><text class="goods-price">￥{{item.discount}}</text><text class="price-x">￥</text><text class="price-xx">{{item.price}}</text></text>
					</view>
				</view>
				<view class="detail-right">
					<text class="subtract" @click="reduce(item,index)">-</text>
					<text class="num">{{item.num}}</text>
					<text @click="add(item)" class="add">+</text>
				</view>
			</view>
		</view>
	</view>
            </view>
            <view style="height:200rpx"></view>
        </view>
        
    </u-popup>
    <view class="end" v-if="goods.length">
			<view class="end-left">
				<!-- <checkbox-group @change="selectgoods()">
					<label>
						<checkbox  :checked="allchecked" />全选
					</label>
				</checkbox-group> -->
				<view style="display:flex">
					<view class="car-img" @click.stop="openShopCar">
                     <text class="badge" v-if="totalNum">{{totalNum}}</text>
                    </view>
                    <text style="color:#000000;font-weight: bold;font-size: 28rpx;display: flex; margin-left: 30rpx; align-items: center;">￥{{totalPrice.toFixed(2)}}</text>
				</view>
				</view>
				<view class="end-right" @click="saveReserve" v-if="userms">
				    付款
                    <!-- ({{totalNum}}) -->
				</view>
				<button v-if="!userms" class="end-right" style="border-radius: 0;" open-type="getPhoneNumber" @getphonenumber="saveReserve">
				    付款
                    <!-- ({{totalNum}}) -->
				</button>
			
			
		</view>
    </view>
</template>

<script>
   import { $EventBus } from "../../utils/EventBus";
   import Menu from '@/request/menu';
   import User from '@/request/user';
	export default{
		data(){
			return{
                showShopCar:false,//是否弹出购物车列表
				show:true,
				 allchecked:true,
                // checked:true,
                goods:[],//购物车商品信息
			}
		},
        created() {
            $EventBus.$off('updateCar');
        },
        mounted() {
                this.goods = uni.getStorageSync('shopCarInfo')||[];
            $EventBus.$on('updateCar',()=> {
                this.goods=uni.getStorageSync('shopCarInfo')||[];
            });
        },
		methods:{
            // 切换购物车列表显示隐藏
            openShopCar() {
                this.$nextTick(()=>{
                    this.showShopCar = !this.showShopCar;
                })
                
            },
			closeT(e) {
        console.log(e,11111)
		this.showShopCar=false;
			},
			// 清空购物车
            clearCar() {
              uni.removeStorageSync('shopCarInfo');
               $EventBus.$emit('updateCar');
            },
			// 购物车为空时点击去购物，收起购物袋
			goshopping(){
				this.showShopCar=false;
			},
			//跳转到结算
			saveReserve(e) {
				let Authorization = uni.getStorageSync('Authorization');
				let shopCarInfo = uni.getStorageSync('shopCarInfo').filter(v=>v.flag==true);
				    if(shopCarInfo && this.totalPrice>0 && this.totalNum>0){
							if(Authorization){
								// 从购物车发起：buyType=1；
								// 立即购买：buyType=2；
								// 扫码进入：buyType=3；
								uni.navigateTo({
									url:`/menuSubPackage/pages/settlement/settlement?totalPrice=${this.totalPrice}&totalNum=${this.totalNum}&buyType=1`
								})
							}else{
								this.loginByPhoneNumber(e)
							}
					}
				return;
			},
			// 付款前未登录发起授权
			loginByPhoneNumber(e) {
				if(e.detail.errMsg=='getPhoneNumber:ok'){
					User.getPhoneNumber(e);
				}else if( e.detail.errMsg=="getPhoneNumber:fail user deny"){
					 uni.showToast({title:'已拒绝手机号授权',icon:'error'})
				}
			},
			change(e){
				console.log(e)
			},
			selected(item){
				item.flag=!item.flag
				if(!item.flag){
					this.allchecked=false
				}else{
					const a=this.goods.filter((item)=>{
						return item.flag==true
					})
					if(a){
						this.allchecked=true
					}else{
						this.allchecked=false
					}
				}
                uni.setStorageSync('shopCarInfo',this.goods);
			},
			selectgoods(){
				this.allchecked=!this.allchecked
				if(this.allchecked){
					this.goods.map(item=>{
						item.flag=true
					})
				}else{
					this.goods.map(item=>{
						item.flag=false
					})
				}
                uni.setStorageSync('shopCarInfo',this.goods);
			},
			reduce(item,index){
				item.num-=1
				if(item.num==0){
                    this.goods.splice(index,1);
                }
                uni.setStorageSync('shopCarInfo',this.goods);
			},
			add(item){
				let s = 0;
				this.goods.forEach(function(val) {
					s += val.num;
				}, 0);
				if(s>=9){
                 uni.showToast({
					 title:'最多可一次购买9杯',
					 icon:'none'
				 });
				 return;
				}
				let num =item.num
				item.num=num+1
                uni.setStorageSync('shopCarInfo',this.goods);
			}
		},
		computed:{
			userms() {
			   return this.$store.getters.Authorization;
		   },
			totalNum(){
				let totalNum = 0;
				this.goods.map(item => {
				    item.flag ? totalNum += item.num : totalNum += 0
				})
				return totalNum
			},
			
			totalPrice() {
			    let totalPrice = 0;
			    this.goods.map(item => {
			        item.flag ? totalPrice += item.num * item.discount : totalPrice += 0
			    })
			    return totalPrice
			}
		}
	}
	
</script>

<style lang="scss">
    .shop-car {
        display: flex;
        flex-direction: column;
        height: 860rpx;
        .header{
            height: 88rpx;
            display: flex;
            border-bottom:1rpx solid rgb(235,235,235);
            .left{
                flex: 1;
                display: flex;
                align-items: center;
                padding-left: 40rpx;
                font-size: 28rpx;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #000000;
            }
            .right{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                padding-right: 40rpx;
                font-size: 20rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
				.delete-icon{
                    width:18rpx;
					height: 18rpx;
					background: url(../../static/imgs/icon-delete.png) center center no-repeat;
					background-size: cover;
					display: inline-block;
					margin-right: 8rpx;
				}
            }
        }
        .container{
           flex: 1;
           overflow: auto;
        }
    }
	.goods{
		line-height: 80rpx;
		background-color: #FFFFFF;
		&-detail{
		    display: flex;
		    padding: 30rpx 15rpx 30rpx 30rpx;
		    background-color: #fff;
		    justify-content: space-between;
		    align-items: center;
		    .detail-left{
		        display: flex;
		        .goods-left{
		            display: flex;
		            align-items: center;
		        }
		    }
		    .size{
		        display: flex;
		        justify-content: space-around;
		        flex-direction: column;
		        margin-left: 30rpx;
		        .goods-price{
		            font-size: 24rpx;
                    font-family: Arial-BoldMT, Arial;
                    font-weight: normal;
                    color: #FF5200;
		        }
                .price-x{
                margin-left:6rpx; 
                font-size:20rpx;
                font-family: ArialMT; 
                line-height: 22rpx;
                color: #666666;
            }
            .price-xx{
                font-size:20rpx;
                    text-decoration:line-through;
            }
		    }
		    .detail-right{
		        text{
		            width: 40rpx;
		            line-height: 40rpx;
		            text-align: center;
		            display: inline-block;
		            margin-right: 10rpx;
                    color:#000000;
		        }
		        .add {
		            color: #FFFFFF;
		            border-radius: 40rpx;
		            margin-right: 20rpx;
                    background:#006ECF;
		        }
		        .subtract{
                    border:1rpx solid #006ECF;
		            border-radius: 40rpx;
                    color:#006ECF;
		        }
		    }
		}
	}
	.empty{
		
		    position: relative;
		    top: 220rpx;
		    text-align: center;
		    display: flex;
		    align-items: center;
		    flex-direction: column;
		    &-text{
		        color: #808080;
		        margin-bottom: 50rpx;
		    }
		    &-button{
		        width: 300rpx;
		        height: 90rpx;
		        color:orange;
		        border: 1rpx solid orange;
		        text-align: center;
		        line-height: 90rpx;
		        border-radius: 48rpx;
		    }		
	}
	.end{
	    width: 100%;
	    height: 92rpx;
	    background-color:rgb(253, 253, 253);
	    position: fixed;
	    bottom: 50px;
	    left: 0;
	    display: flex;
        z-index: 10075;
	    align-items: center;
	    &-left{
	        width: 70%;
	        display: flex;
	        justify-content: space-between;
	        padding: 0 30rpx;
	        .end-flex{
	            display: flex;
	            align-items: center;
	        }
            .car-img{
                width:40rpx;
                height: 48rpx;
                display: inline-block;
				background:url('../../static/imgs/icon-shop-package.png') center center no-repeat;
				background-size:cover;
                position: relative;
                .badge{
                    position: absolute;
                    height: 24rpx;
                    background: #006ECF;
                    right:-16rpx;
                    top: -4rpx;
                    min-width: 24rpx;
                    font-size: 16rpx;
                    font-family: Arial-BoldMT, Arial;
                    font-weight: normal;
                    color: #FFFFFF;
                    line-height: 18rpx;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 50%;

                }
            }
	    }
	    &-right{
	        width: 169rpx;
			font-size: 32rpx;
	        line-height: 92rpx;
	        background-color: #006ECF;
	        text-align: center;
	        color: #fff;
			font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
	    }
	}
</style>