<template>
	<page-meta :page-style="'overflow:'+(pagemetashow?'hidden':'visible')"></page-meta>
	<view class="container">
	
		<!-- 顶部面板 -->
		<view class="top--panel">
			<navseat :opacity='true' :inputshow="true" :readonly="false" :focus="true" @searchVal="searchVal" :titleshow='true' @navigateBacknav='navigateBacknav'
				:navigateBacknavtitle='false'></navseat>
			<!-- 顶部面板，可添加所需要放在页面顶部的内容代码。比如banner图 -->
			<!-- #ifdef MP-WEIXIN -->
			<view :style="{'height':HeighT.customBar+HeighT.heightBar+'px;width:100%;'}"></view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view :style="{'height':systemInfo.titleBarHeight+systemInfo.statusBarHeight+'px;width:100%;'}"></view>
			<!-- #endif -->
		</view>
		<!-- 滚动区域 -->
		<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="goods" @click="clickspecifications(item1,index1)"
					v-for="(item1,index1) in searchList" :key="index1">
					<image class="goodsImg" v-if="item1.coverImg!=null" :lazy-load="true"
						@load="imageLoaded(item1,index1)"
						:src="`${item1.coverImg}${!item1.imgLoad?'?x-oss-process=image/resize,m_lfit,w_300,h_300':''}`"
						mode="aspectFill"></image>
					<!-- 	<image class="goodsImg" v-if="item1.coverImg!=null" :lazy-load="true"
						:src="`${item1.coverImg}`" mode="aspectFill"></image> -->
					<image class="goodsImg" src="@/static/1.gif" mode="" v-else :lazy-load="true"></image>
					<view v-if="item.name=='热销'" class="topSort" :class="'c'+(index1+1)">TOP{{index1+1}}
					</view>
					<view class="goods_right">
						<!-- <text class="suit" v-if="item1.suit > 1">「{{item1.suit}}份起点」</text> -->
						<view class="name">{{ item1.name }}</view>
						<view class="lookBack" v-if="item.name=='热销'">本店回头客第{{index1+1}}名</view>
						<view class="describe"> {{item1.shortTitle?item1.shortTitle:''}} </view>
						<view class="monthlySale">月售{{item1.stockNumber}}</view>
						
						
						<view v-if="item1.isPauseSale != 0 " class="flex-between" >
						<view class="money">
							<view>￥</view>
							<text class="money_num" v-if="isVip ==1 && item1.lowMemberPrice>0" style="margin-right: 10rpx;">{{ item1.lowMemberPrice }}</text>
							<view v-if="isVip ==1 && item1.lowMemberPrice>0" :class="{lineThrough: isVip ==1 && item1.lowMemberPrice>0}">￥</view>
							<text class="money_num" :class="{lineThrough: isVip ==1 && item1.lowMemberPrice>0}">{{ item1.lowPrice }}</text>
							<text v-if="!(isVip ==1 && item1.lowMemberPrice>0)">/{{item1.unitSnap}}</text>
						</view>
							<view class="flex-end" >
								<view class="sku-wrap flex-center" style="background-color: #CECECE;">
									<text class="t" v-if="item1.isSale == 0" >非可售时间</text>
									<text class="t"  v-else-if="item1.isPauseSale != 0" >已售罄</text>
								</view>
							</view>
						</view>
						<view v-else class="flex-between">
							<view class="money">
								<view>￥</view>
								<text class="money_num" v-if="isVip ==1 && item1.lowMemberPrice>0" style="margin-right: 10rpx;">{{ item1.lowMemberPrice }}</text>
								<view v-if="isVip ==1 && item1.lowMemberPrice>0" :class="{lineThrough: isVip ==1 && item1.lowMemberPrice>0}">￥</view>
								<text class="money_num" :class="{lineThrough: isVip ==1 && item1.lowMemberPrice>0}">{{ item1.lowPrice }}</text>
								<text v-if="!(isVip ==1 && item1.lowMemberPrice>0)">/{{item1.unitSnap}}</text>
							</view>
							<view v-if="item1.suit > 1">
								<view class="flex-end" >
									<view class="sku-wrap flex-center"
										@click.stop="clickspecifications(item1,index1)">
										<text class="t">{{item1.suit}}{{item1.unitSnap}}起点</text>
										<text class="dot num"
											v-if="item1.cartNumber != '0'">{{item1.cartNumber<99?item1.cartNumber:'99+'}}</text>
									</view>
								</view>
							</view>
							<view v-else >
								<view class="flex-end" v-if="item1.productSkuResult != null">
									<view class="sku-wrap flex-center"
										@click.stop="clickspecifications(item1,index1)">
										<text class="t">选规格</text>
										<text class="dot num"
											v-if="item1.cartNumber != '0'">{{item1.cartNumber<99?item1.cartNumber:'99+'}}</text>
									</view>
								</view>
								<view class="Controls" v-else>
									<view class="btn" v-if="item1.cartNumber != '0'">
										<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
										<view class="btnClick" @click.stop="cartadd(item1,'-',item1.productSkuResult == null ? '单规格':'',$event)"></view>
									</view>
									<text class="num"> {{ item1.cartNumber }} </text>
									<view class="btn">
										<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
										<view class="btnClick" @click.stop="cartadd(item1,'+',item1.productSkuResult == null ? '单规格':'')"></view>
									</view>
								</view>
							</view>
							
						</view>
						
					</view>
					<view v-if="item1.isPauseSale != 0  || item1.isSale == 0" style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;z-index: 9background-color: rgba(255,255,255,0.5);"></view>
				</view>
				
				
				
			</view>
		</view>

		<!-- 购物车 -->
		<shoppingCart v-if="shopId&&tableCode" ref="shoppingCart" :shopId="shopId" :tableCode="tableCode" :cartLists_count="cartLists_count" :cartLists="cartLists" :showCart="showCart" @addCart="addCart" @close="close"></shoppingCart>
		
		<!-- 购物车结算 -->
		<shoppingCartBilling v-if="shopId&&tableCode" ref="shoppingCartBilling" :cartListsdatashow="cartListsdatashow" :shopId="shopId" :tableCode="tableCode" :storeInfo="shopInfo.storeInfo" :cartLists_count="cartLists_count" :cartLists="cartLists" :showCart="showCart" @isOpen="isOpen"></shoppingCartBilling>

		<!-- 规格 -->
		<u-popup :show="showShopsku" :round="20" mode="bottom" @close="showShopsku = false;pagemetashow=false"
			:safeAreaInsetBottom='false'>
			<view class="shop_sku" :style="{ 'max-height': '80vh;' }">
				<view class="positionabsolute">
					<u-icon name="close-circle" @click="showShopsku = false;pagemetashow=false" color="#000"
						size="50"></u-icon>
				</view>
				<image class="shop_skucimage" :src="specifications.coverImg" mode="aspectFill"></image>
				<view class="shop_sku_name"> {{specifications.name}} </view>
				<view class="shop_sku_returned" v-if="specifications.typeName&&specifications.typeName=='热销'">
					本店回头客第{{specifications.indexb+1}}名 </view>
				<view class="shop_sku_description"> {{specifications.shortTitle?specifications.shortTitle:''}} </view>

				<view class="shop_sku_box" v-for="(item,index) in specifications.tagSnap" :key="index"
					v-if="specifications.tagSnap">
					<view class="shop_sku_box_name">
						{{item.name}}
					</view>
					<view class="flex-start">
						<view class="shop_sku_box_item" v-for="(item1,index1) in item.children" :key="index1"
							@click="morloe(item1,index,index1,item)" 
							:class="{'shop_sku_box_item_selected': item.start == index1, 'disabled': !item1.disabled || !item1.isGrounding || item1.isPauseSale==1}"
							>
							{{item1.name}}
							<view class="shop_sku_box_item_tip" v-if="item1.isGrounding == false">
								<view>下架</view>
							</view>
							<view class="shop_sku_box_item_tip" v-if="item1.isPauseSale == 1 && item1.isGrounding == true">
								<view>售罄</view>
							</view>
							<!-- disabled -->
						</view>
					</view>
				</view>

				<view class="shop_bottom ">
					<view class="flex-between">
						<view class="price">
							<text class="i">￥</text>
							<text class="num">{{salePrice}}</text>
							<text class="i">/{{specifications.unitSnap}}</text>
						</view>
						<view class="operation-wrap">

							<view class="btn">
								<u-icon name="minus-circle-fill" color="#E9AB7A" size="50"></u-icon>
								<view class="btnClick" @click="shopAdd(specifications,'-')"></view>
							</view>
							<text class="num">{{amountcartNumber}}</text>
							<view class="btn" >
								<u-icon name="plus-circle-fill" color="#E9AB7A" size="50"></u-icon>
								<view class="btnClick" @click="shopAdd(specifications,'+')"></view>
							</view>
						</view>
					</view>
					<view class="shop_skuselect flex-start" v-if="specifications.tagSnap">
						<view class="shop_skuselectname">{{skuidname.toString()}}</view>
					</view>
					<view class="addShopping" :class="(amountcartNumber>0&&isSpec)?'active':''"
						@click="addShopping(specifications,'+')">
						{{skuBtnText}}
					</view>
				</view>
			</view>
		</u-popup>
	</view>

</template>
<script>
	import navseat from '@/components/navseat.vue'
	import webSocketUtils from '@/common/js/websocket.js';
	import shoppingCart from './components/shoppingCart.vue'
	import shoppingCartBilling from './components/shoppingCartBilling.vue'
	export default {
		components: {
			navseat,
			shoppingCart,
			shoppingCartBilling
		},
		data() {
			return {
				pagemetashow: false,
				userInfo: uni.cache.get('userInfo'), //个人信息
				opacity: false, //是否显示
				fillHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				leftArray: [],
				mainArray: [],
				leftIndex: 0,
				isFixed: false,
				showShopInfo: false, //店铺信息弹窗是否显示
				showShopsku: false, //多规格弹窗是否显示
				skuId: null, // 多规格ID
				cartLists: {}, //购物车
				cartLists_count: 0,
				shopInfo: {}, //店铺信息
				shopProductList: {}, //商品信息
				specifications: {}, // 规格信息
				querySpecList: [],
				socketTicket: null,
				amountcartNumber: 0,
				isSpec: false,
				skuBtnText: "添加到购物车",
				skuNumber: 0,
				skuSuit: 0,
				salePrice: '', //钱数
				cartListsdatashow: false, //是否显示购物车
				showCart: false,
				lastbottom: '', //元素最低端的距离
				scrollxleft: true,
				orderdetailFlag: true,
				
				searchList: [],
				systemInfo: getApp().globalData.systemInfo,
				
				shopId: null,
				tableCode: null,
			}
		},
		onPageScroll(e) {
		
		},
		computed: {
			
			HeighT() { //手机类型的尺寸    导航栏高度
				return this.$store.getters.is_BarHeight
			},
			
		},
		onLoad(e) {
			if ( e.shopId ) { this.shopId = e.shopId }
			if ( e.tableCode ) { this.tableCode = e.tableCode }
		},
		onUnload() {
			if (this.socketTicket) {
				this.socketTicket.Close()
				uni.$off('message')
			}
		},
		onHide() {
			this.socketTicket.Close()
			uni.$off('message')
		},
		async onShow() {
			this.shopId = uni.cache.get('shopId');
			let _this = this;
			this.orderdetailFlag = true;
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			});
			
			this.productqueryShop();
		},

		methods: {
	
			/**
			 * socket初始化
			 */
			handlemessage() {
				this.socketTicket ? this.socketTicket.Close() : null //调用前先判断是否有socket正在进行 先关闭后链接
				this.socketTicket = new webSocketUtils(`${uni.conf.baseUrlwws}`, 5000, {
					tableId: uni.cache.get('tableCode'),
					shopId: this.shopId,
					userId: uni.cache.get('userInfo').id,
					"type": "connect",
				})
				uni.$on('message', this.getMessage)
			},

			/**
			 * 通过桌码获取店铺信息
			 */
			async productqueryShop() {
				let res = await this.api.productqueryShop({
					code: uni.cache.get('tableCode'),
					shopId: this.shopId,
					lng: uni.cache.get('getLocationstorage').lng ? uni.cache.get('getLocationstorage').lng :
						'',
					lat: uni.cache.get('getLocationstorage').lat ? uni.cache.get('getLocationstorage').lat :
						'',
				})
				if (res.code == 0) {
					this.shopInfo = res.data;
					this.productqueryProduct() //list  数据
					this.handlemessage() //监听websocket返回
				} else {
					setTimeout(() => {
						uni.pro.switchTab('index/index')
					}, 1000)
				}

			},
			
			/**
			 * 获取商品数据
			 */
			async productqueryProduct() {
				let res = await this.api.productqueryProduct({
					"shopId": this.shopId,
					"productGroupId": ''
				})
				if (res.code == 0) {
					this.shopProductList = res.data;
					if (this.cartLists && this.cartLists.data && this.cartLists.data.length >= 0) {
						this.setNumber()
					}
				}
			},
			
			/**
			 * 图片加载
			 */
			imageLoaded(item, index) {
				this.searchList[index]['imgLoad'] = true;
			},
			
			/**
			 * 搜索内容
			 * @param {Object} val
			 */
			searchVal (val) {
				this.searchList = [];
				if ( val == "") {
					return;
				}
				this.shopProductList.productInfo.forEach((v,e)=>{
					v.products.forEach((o,i)=>{
						if ( o.name.indexOf(val) > -1) {
							this.searchList.push(o)
						}
					})
				})
			},
			/**
			 * 商品数量增加/减少
			 * @param {Object} item
			 * @param {Object} index
			 * @param {Object} index1
			 * @param {Object} a
			 * @param {Object} b
			 */
			async cartadd(item, a, b) { //列表添加 a传参加减号   b是判断单规格多规格\
				if (b == '单规格') { //没有规格为空
					this.skuidname = []
				}
				if ( a == "+" && item.isVip == 1 && item.cartNumber >= item.limitNumber){
					uni.showToast({
						title: '当前商品已达到最大赠送数量',
						icon: 'none'
					})
					return;
				}
				let cartNumber = a == '+' ? item.cartNumber + 1 : item.cartNumber - 1;
				this.hodgepodge(item, 1, a, cartNumber) //获取skuid  /1添加购物车
			},

			/**
			 * 详情商品增减
			 * @param {Object} item
			 * @param {Object} index
			 * @param {Object} index1
			 * @param {Object} a
			 * @param {Object} b
			 */
			shopAdd(item, a) {
				if (a == "+") {
					if ( item.isVip == 1 && this.amountcartNumber >= item.limitNumber){
						uni.showToast({
							title: '当前商品已达到最大赠送数量',
							icon: 'none'
						})
						return;
					}
					if (this.skuNumber < this.skuSuit && this.amountcartNumber < this.skuSuit) {
						this.amountcartNumber = this.amountcartNumber + (this.skuSuit == 0 ? 1 : this.skuSuit);
					} else {
						this.amountcartNumber++;
					}
				} else {

					if (this.amountcartNumber > 0) {
						if (this.skuNumber < this.skuSuit && this.amountcartNumber <= this.skuSuit) {
							this.amountcartNumber = this.amountcartNumber - (this.skuSuit == 0 ? 1 : this.skuSuit);
						} else {
							this.amountcartNumber = this.amountcartNumber - 1;
						}
					}
				}
			},

			/**
			 * 添加购物车
			 */
			addShopping(item, a) {
				if (this.amountcartNumber <= 0 || !this.isSpec) {
					return;
				}
				let num = 0;
				if ( item.isVip == 1 && item.cartNumber >= item.limitNumber){
					uni.showToast({
						title: '当前商品已达到最大赠送数量',
						icon: 'none'
					})
					return;
				}
				if (item.typeEnum == "normal") {
					num = item.cartNumber + this.amountcartNumber;
				} else {
					num = this.skuNumber + this.amountcartNumber;
				}
				let params = {
					"skuId": this.skuId,
					"num": num, //数量
					"type": a == '+' ? 1 : 0,
					"isVip": item.isVip,
					"productId": item.id, //商品id
					"shopId": this.shopId,
					"userId": uni.cache.get('userInfo').id,
					"tableId": uni.cache.get('tableCode'),
				}
				this.addCart(params);
			},
			
			/**
			 * 关闭购物车
			 */
			close (e) {
				this.showCart = e;
			},
			
			/**
			 * 显示购物车
			 */
			isOpen (e) {
				this.showCart = e;
			},
			
			/**
			 * 添加到购物车
			 */
			async addCart(data) {
				let res = await this.api.cartAdd(data)
				if (res.code == 0) {
					this.showShopsku = false;
					this.pagemetashow = false;
				}
			},

			/**
			 * 商品数量\购物车数量处理
			 */
			setNumber() {
				// 处理购物车相同id的情况下  数量相加
				var summedArray = this.cartLists.data.reduce((acc, current) => {
					const existing = acc.find(item => item.productId === current.productId && item.isVip === current.isVip);
					if (existing) {
						existing.number += current.number;
					} else {
						acc.push({
							...current
						})
					}
					return acc;
				}, []);
				// 购物车总数据与列表页面互通
				this.shopProductList.productInfo.forEach((item) => {
					return item.products.filter(e => {
						e.cartNumber = 0;
						return summedArray.find(i => {
							if (e.id == i.productId && e.isVip == i.isVip) {
								e.cartNumber = i.number
							}
						})
					})
				})
				// 处理招牌菜商品数量
				this.shopProductList.hots.forEach((item) => {
					item.cartNumber = 0;
					return summedArray.find(i => {
						if (item.id == i.productId) {
							item.cartNumber = i.number
						}
					})
				})
				this.cartListsdatashow = this.cartLists.data.length == 0 ? false : true
				if (this.cartLists.data.length > 0) {
					this.cartLists_count = 0;
					this.cartLists.data.forEach((v, e) => {
						this.cartLists_count += v.number;
					})
				} else {
					this.cartLists_count = 0;
				}
			},
			
			/**
			 * 多规格选择
			 * @param {Object} item1
			 * @param {Object} index
			 * @param {Object} index1
			 */
			async clickspecifications(item1, index1, type) {
				if ( item1.isPauseSale != 0 ||  item1.isSale == 0) {
					return;
				}
				this.skuidname = []
				this.specifications = item1
				this.specifications.indexb = index1
				this.specifications.typeName = type
				try {
					if (item1.productSkuResult == null) {
						this.isSpec = true;
						// 但但单个规格弹框的处理
						this.hodgepodge(this.specifications, 2) //获取skuid /2查找价格和数量
						this.skuBtnText = `添加到购物车`
					} else {
						// 多规格数据处理
						this.isSpec = false;
						let obj = await this.api.productquerySpec({
							productId: item1.id, //商品id
						})
						this.querySpecList = obj.data;
						this.specifications.tagSnap = JSON.parse(item1.productSkuResult.tagSnap).map((item,index) => {
							let res = {
								id: item1.id, //商品id
								name: item.name,
								start: -1,
								children: []
							}
							item.value.split(",").forEach((v, e) => {
								res.children.push({
									name: v,
									disabled: index == 0 ? true : false,
									isGrounding: index == 0 ? false : true,
									isPauseSale: index == 0 ? 1 : 0,
								})
							})
							return res
						})
						//初始化第一列规格可编辑
						let filteredJson;
						let isSkuidname = [];
						for (let o = 0; o < this.specifications.tagSnap[0].children.length; o++) {
							isSkuidname = JSON.parse(JSON.stringify(this.skuidname));
							isSkuidname.push(this.specifications.tagSnap[0].children[o].name)
							//筛选符合条件的规格列表
							filteredJson = this.querySpecList.filter(obj => obj.specSnap.indexOf(isSkuidname) == 0);
							// 上下架初始化处理
							for (let i = 0; i < filteredJson.length; i++) {
								if (filteredJson[i].isGrounding) {
									this.specifications.tagSnap[0].children[o].isGrounding = true;
									break; // 终止循环
								}
							}
							// 售罄状态初始化
							for (let i = 0; i < filteredJson.length; i++) {
								if (filteredJson[i].isPauseSale == 0) {
									this.specifications.tagSnap[0].children[o].isPauseSale = 0;
									break; // 终止循环
								}
							}

						}
						this.skuBtnText = `您还没选择${this.specifications.tagSnap[0].name}哦`
						this.hodgepodge(this.specifications, 2) //获取skuid /2查找价格和数量
					}

				} catch (e) {
					//TODO handle the exception
				}
			},

			/**
			 * 规格选择监听
			 * @param {Object} e
			 * @param {Object} index
			 * @param {Object} index1
			 * @param {Object} item
			 */
			async morloe(e, index, index1, item) {
				
				if (!e.isGrounding || !e.disabled || e.isPauseSale == 1) {
					return;
				}
				
				let querySpecList = [];
				this.skuBtnText = "添加到购物车";
				this.isSpec = true;
				// 设置当前选中下标
				if (this.specifications.tagSnap[index].start != index1) {
					this.$set(this.specifications.tagSnap[index], 'start', index1)
				} else {
					this.$set(this.specifications.tagSnap[index], 'start', -1)
					index = index - 1;
				}
				this.skuidname = [];
				// 选择规格下面的其他规格可点击状态重置
				this.specifications.tagSnap.forEach((val, i, arr) => { 
					if (i > index) {
						val.children.forEach((v1, e1) => {
							v1.isGrounding = i == (index+1) ? false : true;
							v1.isPauseSale = i == (index+1) ? 1 : 0;
							v1.disabled = i == (index+1) ? true : false;
						})
						val.start = -1;
					}
					if (val.start >= 0) {
						this.skuidname.push(val.children[val.start].name)
					}
				})
				
				// 获取下一个没有选中的分类
				for (let i = 0; i < this.specifications.tagSnap.length; i++) {
					if (this.specifications.tagSnap[i].start < 0) {
						this.isSpec = false;
						this.skuBtnText = `您还没选择${this.specifications.tagSnap[i].name}哦`
						break; // 终止循环
					}
				}
				
				let filteredJson;
				let isSkuidname = [];
				//提前下一列规格循环，查看是否有下架规格
				if (this.specifications.tagSnap[index + 1]) {
					for (let o = 0; o < this.specifications.tagSnap[index + 1].children.length; o++) {
						isSkuidname = JSON.parse(JSON.stringify(this.skuidname));
						isSkuidname.push(this.specifications.tagSnap[index + 1].children[o].name)
						// 上下架状态处理
						filteredJson = this.querySpecList.filter(obj => obj.specSnap.indexOf(isSkuidname) == 0);
						for (let i = 0; i < filteredJson.length; i++) {
							if (filteredJson[i].isGrounding) {
								this.specifications.tagSnap[index + 1].children[o].isGrounding = true;
								break; // 终止循环
							}
						}
						// 售罄状态处理
						for (let i = 0; i < filteredJson.length; i++) {
							if (filteredJson[i].isPauseSale == 0) {
								this.specifications.tagSnap[index + 1].children[o].isPauseSale = 0;
								break; // 终止循环
							}
						}
				
					}
				}

				this.$forceUpdate();
				this.hodgepodge(item, 2)
			},

			/**
			 * 获取规格信息
			 * @param {Object} item
			 * @param {Object} a
			 * @param {Object} c
			 * @param {Object} num
			 */
			async hodgepodge(item, a, c, num) { //此接口去获取商品id ！！！赋值库存  数量  价格等
				try {
					let res = await this.api.productqueryProductSku({
						code: uni.cache.get('tableCode'),
						shopId: this.shopId,
						productId: item.id, //商品id
						isVip: item.isVip, //商品id
						spec_tag: this.skuidname.join(","),
					})
					this.salePrice = res.data.salePrice // 价格
					let data = null;
					if (a == 1) { //1添加购物车  2是websocket返回这个商品的价格(应为不同的多规格商品返回不同的价格)
						let params = {
							"skuId": res.data.id,
							"num": num, //数量
							"type": c == '+' ? 1 : 0,
							"productId": item.id, //商品id
							"isVip": item.isVip,
							"shopId": this.shopId,
							"userId": uni.cache.get('userInfo').id,
							"tableId": uni.cache.get('tableCode'),
						}
						this.addCart(params);
					} else {
						this.skuId = res.data.id;
						this.skuNumber = res.data.number || 0;
						this.skuSuit = res.data.suit;
						this.showShopsku = true //打开弹框
						this.pagemetashow = true
					}
					this.$set(this, 'amountcartNumber', 0);
					if ( this.isSpec ) {
						if ( this.skuSuit > 1) {
							this.$set(this, 'amountcartNumber', 0);
						} else {
							this.$set(this, 'amountcartNumber', 1);
						}
					}
					
				} catch (e) {}
			},

			/**
			 * 结算直接生成订单
			 */
			orderdetail() {
				if (!this.orderdetailFlag) {
					return;
				}
				this.orderdetailFlag = false;
				if (this.cartLists.data.length == 0) {
					uni.showToast({
						title: '请先添加商品',
						icon: 'none'
					})
					return false
				}
				uni.redirectTo({
					url: `/pagesOrder/confirm_order/index?storeInfo=${JSON.stringify(this.shopInfo.storeInfo)}&cartList=${JSON.stringify(this.cartLists)}`
				});

			},

			/**
			 * 获取消息
			 * @param {Object} msg
			 */
			getMessage(msg) { //wss  回显数据
				if (msg == 1) { // 网络在连接
					return false
				}
				if (msg.type == 'heartbeat') { //后台心跳  处理返回  不然控制台一直报错
					return false
				}
				try {
					if (msg.status != 'success') {
						uni.showToast({
							title: msg.msg,
							icon: "none",
						})
						if (msg.msg == '桌码不存在') { //卓码不存在直接退出
							this.socketTicket.Close()
							uni.$off('message')
							uni.navigateBack()
							return false;
						}
					} else {
						switch (msg.type) {
							case 'sku': // sku  数量 查询这个商品的价格和数量
								break;
							case 'order':
								this.cartLists_count = 0;
								this.skuidname = [];
								this.cartListsdatashow = false;
								this.showCart = false;
								this.cartLists = msg;
								this.productqueryProduct() //list  数据
								break;
							case 'addCart': //初始化add
								this.cartLists = msg
								this.setNumber()
								break;
							case 'addcart':
								this.cartLists = msg
								try {
									//购物车为空的情况
									if (msg.data.length == 0) {
										this.showCart = false;
									}
									this.setNumber()
								} catch (e) {}
								break;
						}


					}
				} catch (e) {
					//TODO handle the exception
				}
			},

			
			
		}
	}
</script>

<style lang="scss" >
	page {
		background: #F6F6F6;
	}
	
	/* 容器 */
	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		
		::v-deep .u-input  input{
			background-color: transparent;
		}
		
		&>view {
			width: 100%;
		}
		.top--panel {
			background-color: #fff;
			
		}
		
		.list-box {
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			justify-content: flex-start;
			align-items: flex-start;
			align-content: flex-start;
			font-size: 28rpx;
			position: relative;
			padding: 0 30rpx 200rpx 30rpx;
			
			.goods {
				width: 100%;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: flex-start;
				align-content: center;
				position: relative;
				margin-top: 30rpx;
				
			
				&>image {
					width: 120rpx;
					height: 120rpx;
					margin-right: 18rpx;
					margin-left: 2px;
				}
			
				.goodsImg {
					width: 200rpx;
					height: 200rpx;
					border-radius: 18rpx;
					flex-shrink: 0;
				}
			
				.topSort {
					width: 92rpx;
					height: 38rpx;
					text-align: center;
					line-height: 38rpx;
					position: absolute;
					top: 0;
					left: 0;
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
					border-radius: 20rpx 0rpx 20rpx 0rpx;
			
				}
			
				.topSort.c1 {
					background: #FC5C2E;
				}
			
				.topSort.c2 {
					background: #EF994E;
				}
			
				.topSort.c3 {
					background: #F4B951;
				}
			
				.goods_right {
					width: 100%;
					display: flex;
					flex-direction: column;
					position: relative;
					padding-top: 5rpx;
					padding-right: 20rpx;
					box-sizing: border-box;
			
					.name {
						font-size: 28rpx;
						color: #333;
						font-weight: bold;
						margin-bottom: 8rpx;
					}
			
					.describe,
					.monthlySale,
					.lookBack {
						font-weight: 400;
						font-size: 20rpx;
						color: #999999;
						margin-bottom: 8rpx;
					}
			
					.describe,
					.name {
						width: 270rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
			
			
					.lookBack {
						color: #FF534B;
					}
			
					.money {
						font-weight: bold;
						font-size: 24rpx;
						color: #333;
			
						.money_num {
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
						}
					}
			
					.suit {
						font-weight: 400;
						font-size: 24rpx;
						color: #666666;
					}
			
					.sku-wrap {
						padding: 10rpx 20rpx;
						background: #E3AD7F;
						border-radius: 32rpx;
						// position: absolute;
						// bottom: 10rpx;
						// right: 20rpx;
						align-items: center;
						position: relative;
			
						.t {
							font-size: 28rpx;
							color: #fff;
						}
			
						.dot {
							position: absolute;
							top: -15rpx;
							right: -10rpx;
							background-color: #FF4B33;
							color: #fff;
							border-radius: 58rpx;
							padding: 5rpx 14rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20rpx;
						}
					}
			
					.Controls {
						display: flex;
						align-items: center;
						justify-content: flex-end;
			
						// position: absolute;
						// bottom: 10rpx;
						// right: 20rpx;
						.num {
							
							margin: auto 16rpx;
						}
						.btn{
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							.btnClick{
								width: 100rpx;
								height: 100rpx;
								position: absolute;
								// bottom: 0;
							}
						}
					}
				}
			
			
			}
			
			
		}

		

		.shop_sku {
			width: 100%;
			position: relative;
			border-radius: 20rpx;
			background: #fff;
			overflow-y: auto;
			padding-bottom: 320rpx;
			box-sizing: border-box;

			.positionabsolute {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}

			.shop_skucimage {
				width: 100%;
				height: 500rpx !important;
				border-radius: 20rpx 20rpx 0 0;
			}

			.shop_sku_name {
				padding: 0 $paddingSize;
				margin-top: 20rpx;
				font-weight: bold;
				font-size: 32upx;
				margin-bottom: 16rpx;
			}

			.shop_sku_returned {
				padding: 0 $paddingSize;
				font-weight: 400;
				font-size: 24rpx;
				color: #FF534B;
			}

			.shop_sku_description {
				padding: 0 $paddingSize;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				margin-top: 16rpx;
				padding-bottom: 32rpx;
				box-sizing: border-box;
				border-bottom: 2rpx solid #F0F0F0;
			}


			.shop_sku_box {
				padding: 0 $paddingSize;

				.shop_sku_box_name {
					margin-top: 20rpx;
					font-weight: 500;
					font-size: 28upx;
					color: #333;
				}

				.flex-start {
					.shop_sku_box_item {
						margin-top: 16rpx;
						padding: 12rpx 28rpx;
						border-radius: 8rpx;
						font-size: 24upx;
						margin-right: 56rpx;
						background: #EFEFEF;
						border: 2rpx solid #EFEFEF;
						position: relative;
						color: #666666;
						.shop_sku_box_item_tip{
							width: 62rpx;
							height: 47rpx;
							// background-color: #CECECE;
							text-align: right;
							position: absolute;
							top: 0;
							right: 0;
							background: linear-gradient(45deg, transparent, transparent  50%, #CECECE 50%, #CECECE 100%);		
							view{
								font-size: 18rpx;
								color: #666666;
								transform: rotate(45deg);
								position: absolute;
								top: 5rpx;
								right: 3rpx;
							}
						}
					}

					.shop_sku_box_item:nth-child(1) {
						margin-left: 0;
					}
					.disabled{
						color: #999;
						background-color: #F5F5F5;
						border: 2rpx solid #F5F5F5;
					}
					.shop_sku_box_item_noselected {
						color: #666;
					}

					.shop_sku_box_item_selected {
						background: #FEFAF7;
						border-radius: 8rpx;
						border: 2rpx solid #E8AD7B;
						color: #E8AD7B;
					}
				}

			}

			.shop_skuselect {
				margin-top: 16rpx;
				width: 100%;
				// background: #f7f7f7;
				color: #999;
				font-size: 24upx;

				.shop_skuselectname {
					color: #000;
					font-size: 26upx;
				}
			}

			.shop_bottom {
				width: 100%;
				box-sizing: border-box;
				padding: 30rpx $paddingSize;
				background-color: #fff;
				box-shadow: 0rpx -6rpx 14rpx 2rpx rgba(0, 0, 0, 0.1);
				position: fixed;
				left: 0;
				bottom: 0;

				.price {
					display: flex;
					align-items: flex-end;

					.i {
						font-size: 28rpx;
						color: #E8AD7B;
						position: relative;
						bottom: 4upx;
						font-weight: bold;
					}

					.num {
						font-size: 42rpx;
						color: #E8AD7B;
						position: relative;
						top: 6upx;
						padding: 0 4upx;
					}
				}

				.operation-wrap {
					display: flex;
					align-items: center;

					.num {
						font-size: 32upx;
						padding: 0 16upx;
					}

					.btn{
						display: flex;
						align-items: center;
						justify-content: center;
						position: relative;
						.btnClick{
							width: 100rpx;
							height: 100rpx;
							position: absolute;
							// bottom: 0;
						}
					}
				}

				.addShopping {
					width: 100%;
					height: 96rpx;
					line-height: 96rpx;
					text-align: center;
					background: #ccc;
					border-radius: 48rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					margin-top: 36rpx;
				}

				.addShopping.active {
					background: #E8AD7B;
				}
			}
		}

		

	}


	
</style>