<template>
	<view v-if="pageShow">
		<!-- 使用标题栏 -->
		<status-nav :statusBackw="true" :whereCome="2" :iscenter="true" :statusTitleImg="true" :statusTitle="true" :title-val="'购物车'" :tabcolor="'#ffffff'"></status-nav>
		<!-- 列表 -->
		<view :style="{paddingTop:(statusHNH+10)+'px'}">
			<view class="padding-zy20 bacb">
				<view v-if="gouwList.length!=0" :class="delCur==index?'fadeOutUp ':''" class="padding-sx30 disba borbot animated " v-for="(item,index) in gouwList" :key="index">
					<view class="disac">
						<!-- 单选按钮 -->
						<view class="margin-y20"><label class="radio"><radio @tap.stop="choose(index)" :checked="item.status" color="#ff7800"/></label></view>
						<!-- 商品图片 -->
						<image @tap="checkDetail(item.spu_id)" class="radius10 gouwcimg" :src="item.src" mode="aspectFill"></image>
					</view>
					<view class="padding-z20">
						<view class="dis">
							<!-- 商品标题 -->
							<view class="clips2 fon28 color33 margin-y20 width100" style="line-height: 46rpx;">{{item.title}}</view>
							<!-- 删除按钮 -->
							<image @tap.stop="clear(item.id,index)" class="flexs margin-s10" style="width: 30rpx;height: 30rpx;" src="../../../static/img/gouwc/del.png" mode=""></image>
						</view>
						<view @tap="chooseCate(index)" class="disbcac margin-s10 margin-x20 xuanz posir fon24 color9 ">
							<!-- 商品类型 -->
							<view class="clips1">{{item.cateArr[0].sku_name}}</view>
							<!-- 下键 -->
							<image class="margin-z20 flexs" style="width: 17rpx;height: 10rpx;" src="../../../static/img/gouwc/xia.png" mode=""></image>
                            <!-- 选择框 -->
                            <view v-if="current==index" class="posia textc padding-x20" style="top: 60rpx;left: 0;right: 0;background-color: rgb(245, 245, 245);border-radius: 6rpx;">
                                <scroll-view scroll-y="true" style="height: 100rpx;">
                                    <view class="discc">
                                        <view @tap="cateChoose(index,index1)" class="clips1 margin-s20" v-for="(item1,index1) in item.cateArr" :key="index1" style="width: 80%;">{{item1.sku_name}}</view>
                                    </view>
                                </scroll-view>
                            </view>
						</view>
						<view class="margin-s30 disba">
							<view class="colorf6 fon24 bold width100">￥<text class="fon28">{{item.price}}</text>.0</view>
							<view class="disac">
								<!-- 递减 -->
								<button @tap.stop="deladdEvent( item.id , index , 0)" class="deladd fon36 color33" :disabled="item.num==1">-</button>
								<!-- 数量框 禁止输入-->
								<input type="text" disabled v-model="item.num" style="width: 60%;background-color: #F5F5F5;text-align: center;padding: 4rpx 0;border-radius: 4rpx;"/>
								<!-- 数量框 可以输入-->
								<!-- <input type="text" @blur="blurEv(index)" @input="changeInput(index,0,$event)" :value="item.num" style="width: 60%;background-color: #F5F5F5;text-align: center;padding: 4rpx 0;border-radius: 4rpx;"/> -->
								<!-- 递增 -->
								<button @tap.stop="deladdEvent( item.id , index , 1)" class="deladd fon36 color33">+</button>
							</view>
						</view>
					</view>
				</view>
				<view v-if="gouwList.length==0" class="kongk">空空如也</view>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="disbcac padding-sx40">
			<view class="gouwcxian "></view>
			<image class="margin-zy20 margin-s10 gouwchh" src="/static/img/gouwc/heh.png" mode=""></image>
			<view class="bold fon32">猜你喜欢</view>
			<view class="gouwcxian margin-z20"></view>
		</view>
		<!-- 喜欢列表 -->
		<twocoluList @addChe="addChe" :dataList="dataList"></twocoluList>
		<!-- 结算 -->
		<view v-if="user_type!='personal'" class="posi-bzy disba padding-zy20 gouwcb-box">
			<view class="disac">
				<label class="radio disac" style="margin-top: -6rpx;">
					<radio :checked="allcheck" @tap="allchoose" color="#ff7800"/><view class="margin-z10 margin-y20 margin-s10">全选</view>
				</label>
				<view class="fon36">合计:<label class="colorf6 bold">￥{{allPrice}}.0</label></view>
			</view>
			<button v-if="allNum!=0" :disabled="disb" @tap="gopay" class="colorb bold gouwcbtn">{{disb?'正在前往...':'去结算('+allNum+')'}}</button>
			<button v-else @tap="goGouw" class="colorb bold gouwcbtn">去购物</button>
		</view>
        <view style="height: 56px;"></view>
	</view>
</template>

<script>
	import twocoluList from '@/components/twocoluList.vue';
	export default {
		components:{
			twocoluList
		},
		data() {
			return {
                current:'-1',
				delCur:'-1',
				gouwList:[],
				dataList:[],
				disb:false,
				allcheck:false,
				cunIdArr:[],
				newId:'',
				newNum:1,
				newType:'',
				inputNum:'',
				dangVal:'',
				orderList:[],//暂存准备下单的订单的coding、num
				statusHNH:uni.getStorageSync('statusHNH'),
				pageShow:true,
				page:1,
				size:10,
				total:'',
				isZanw:true,
				user_type:uni.getStorageSync('user_type')//权限
			}
		},
        onShow() {
			this.$toolAll.tools.guoq()
			uni.hideTabBar()
			this.checkGouCList()
			this.allcheck = false
			uni.removeStorageSync('orderInfo')
        },
		onReachBottom() {
			// console.log(this.total,this.productList.length);
			if(this.total!=this.dataList.length){
				this.page++
				this.like()//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多商品列表','none',1000)
				this.isZanw = false
			}
		},
		onLoad() {
			this.like()
		},
		computed:{
			allPrice(){
				let sum = 0
				this.gouwList.forEach(item=>{
					if(item.status)	sum += item.price*1 * item.num
				})
				return sum;
			},
			allNum(){
				let num = 0
				this.gouwList.forEach(item=>{
					if(item.status)	num +=item.num*1
				})
				return num;
			},
			zhunOrder(){
				let arr = []
				// console.log('数据：',this.gouwList);
				this.gouwList.forEach(item=>{
					let buyObj = {
						sku_coding:item.coding,
						num:item.num
					}
					if(item.status) arr.push(buyObj)
				})
				return arr
			}
		},
		methods: {
			like(){//查询猜你喜欢列表
				this.$requst.post('product/spu/guess',{page:this.page,size:this.size}).then(res=>{
					// console.log('猜你喜欢',res);
					if(res.code==0){
						this.pageShow = true
						this.total = res.data.total
						if(res.data.list.length!=0){
							res.data.list.forEach(item=>{
								let likeObj = {
									id:item.main_sku.id,
									spu_id:item.id,
									src:this.$http + item.main_sku.main_image,
									title:item.name,
									price:item.main_sku.cur_price/100,
									tags:item.tags
								}
								this.dataList.push(likeObj)
							})
						}
					}
				},error=>{})
			},
			checkGouCList(){//购物车商品查询事件
				this.gouwList = []
				let gouParma = {
					page:1,
					size:50//后台默认20
				}
				this.$requst.post('order/shopping-cart',gouParma).then(res=>{
					// console.log('购物车',res);
					if(res.data.length!=0){
						res.data.forEach(item=>{
							if(item.sku!=null){
								let gouObj = {
									id:item.id,
									spu_id:item.spu_id,
									coding:item.sku.coding,
									src:this.$http + item.sku.sku_cover,
									status:false,
									title:item.spu_name,
									price:parseInt(item.price)/100,
									num:item.num,
									cateArr:item.skus
								}
								this.gouwList.push(gouObj)
							} else {
								// console.log('id:',item.id);
								this.$requst.post('order/shopping-cart-del',{id:item.id}).then(res=>{},error=>{})
							}
							// console.log('数据：',this.gouwList);
						})
					}
					// console.log(res);
				},error=>{})
			},
            cateChoose(index,index1){//类型选择
                let dang = this.gouwList[index].cateArr[index1];
                let num = this.gouwList[index].cateArr.indexOf(dang)
                if(num!=-1){
                    this.gouwList[index].cateArr.splice(num,1)
                    this.gouwList[index].cateArr.unshift(dang)
                }
				
				this.gouwList[index].src = this.$http + this.gouwList[index].cateArr[0].sku_cover
				this.gouwList[index].coding = this.gouwList[index].cateArr[0].coding
				this.gouwList[index].price = this.gouwList[index].cateArr[0].sku_price/100
            },
            chooseCate(index){//类型选择调起
                // console.log('下拉选择：'+index);
                this.current==index ? this.current = '-1' : this.current = index
            },
			gopay(){//去结算事件
				let ya = this
				let storageAddress = uni.getStorageSync('storageAddress')
				let buyParma = {
					sku_list: this.zhunOrder,
					address_id: storageAddress || '' 
				}
				// console.log('参数',buyParma);
				this.$requst.post('order/prepare-info',buyParma).then(res=>{
					// console.log(res);
					if(res.code==0){
						ya.disb = true
						uni.setStorageSync('orderInfo',res.data)
						setTimeout(function(){
							ya.disb = false
						},2000)
						uni.navigateTo({
						    url:'/pagesA/confirmOrder/confirmOrder'
						})
					}
				},error=>{ya.disb = false})
			},
			choose(index){//单选
				this.gouwList[index].status = !this.gouwList[index].status
				let one = this.gouwList.filter(function(item){
					 return item.status == false; 
				})
				one.length==0 ? this.allcheck = true : this.allcheck = false
			},
			allchoose(){//全选
				this.allcheck = !this.allcheck
				this.gouwList.forEach((item,index)=>{
					this.allcheck ? item.status = true : item.status = false
				})
			},
			deladdEvent(id,cur,index){//数量加减事件
				if(index==0){//减少数量
					this.gouwList[cur].num--
					this.newType = 'down'
				} else {//增加数量
					this.gouwList[cur].num++
					this.newType = 'up'
				}
				this.newId = id
				this.changeNum()//调用数量变更事件
			},
			changeNum(){//执行数量变更事件
				let bparma = {
					id:this.newId,
					num:this.newNum,
					type:this.newType 
				}
				this.$requst.post('order/shopping-cart-change-num',bparma).then(res=>{},error=>{})
			},
			// changeInput(index,id,e){//数量输入框事件
			// 	// console.log(index,id);
			// 	this.newId = id
			// 	this.inputNum = e.target.value
			// 	this.dangVal = this.gouwList[index].num
			// 	if(this.inputNum>this.dangVal){
			// 		this.newType = 'up'
			// 	} else if(this.inputNum<this.dangVal){
			// 		this.newType = 'down'
			// 	}
			// 	this.newNum = this.gouwList[index].num = this.inputNum
			// },
			// blurEv(index){
			// 	if(this.inputNum==''){
			// 		this.gouwList[index].num = this.dangVal
			// 		this.$toolAll.tools.showToast('请输入正确的产品数量')
			// 	} else {
			// 		this.changeNum()//调用数量变更事件
			// 	}
			// },
			goGouw(){//去购物按钮事件
				// console.log('去购物');
                uni.setStorageSync('whereCome',0)
                uni.switchTab({
                    url:'/pages/tabbar/product/product'
                })
			},
			clear(id,index){//删除商品
				// console.log('删除商品：'+id);
				uni.showModal({
				    content:'确定要删除该商品吗？',
				    cancelText:'取消',
				    cancelColor:'#999999',
				    confirmText:'确定',
				    confirmColor:'#FF7800',
				    success: (res) => {
				        if(res.confirm){
				            this.$requst.post('order/shopping-cart-del',{id:id}).then(res=>{
				            	if(res.code==0){
									this.delCur = index
									setTimeout(()=>{
										this.delCur = '-1'
										this.gouwList.splice(index,1)
									},500)
									// this.checkGouCList()
				            		this.$toolAll.tools.showToast('删除商品成功')
				            	}
				            },error=>{})
				        }
				    }
				})
			},
            checkDetail(id){//查看商品详情
                // console.log('查看详情：'+id);
                uni.navigateTo({
                    url:'/pagesA/productDetail/productDetail?index=0&id='+id
                })
            },
            addChe(){//加入购物车事件
				let ya = this
				setTimeout(function(){
					ya.checkGouCList()
				},500)
            },
		}
	}
</script>

<style>
	
</style>
