<template>
	<view class="foodIntroduced">
		<loadlogo v-if="!loadlogo" />
		
		<view >
			<far-bottom></far-bottom>
		<view class="foodImg" :style="{width: width + 'px',height: height + 'px'}">
			<view  style="position: absolute;left: 30upx;top: 30upx;z-index: 999;color: #FFFFFF;">
				<view class="bankindex" @click="goindex">
					<text class="iconfont icon-pullleft" style="font-size: 28upx;padding-right: 10upx;"></text>返回
				</view>
			</view>
			<swiper class="swiper"  :indicator-dots="true" :autoplay="true" :style="{width: width + 'px',height: height + 'px'}" :interval="interval" :duration="duration">
				<swiper-item v-for="(item, index) in storeFoodList.thumbs" :key="index" >
					<image :src="item" mode="aspectFill" :style="{width: width + 'px',height: height + 'px'}"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="foodName b-f" style="padding: 30upx;">
			<view class="nameText" style="padding-bottom: 20upx;width: 90vw;">{{ storeFoodList.goodsname }}</view>
			<view class="dis-flex">
				<view style="flex: 3;">
					<view  style="padding-bottom: 20upx;">
						<text class="f-20 c-ff4444">¥</text>
						<text class="f-36 c-ff4444 f-w">{{ storeFoodList.price }}</text>
						<text class="f-22" style="text-decoration: line-through;color: #999999;padding-left: 10upx;text-decoration:line-through;" v-if="Number(storeFoodList.oldprice) > 0" >¥{{ storeFoodList.oldprice }}</text>
					</view>
					<view class="f-22" style="color: #999999;">
						<text>已售{{storeFoodList.salenum}}</text>
						<text style="padding-left: 30upx;" v-if="storeFoodList.deliveryprice != '0.00'">{{storeFoodList.bzftext}}:</text>
						<text style="padding-left: 10upx;" v-if="storeFoodList.deliveryprice != '0.00'">¥{{storeFoodList.deliveryprice}}</text>
					</view>
				</view>
				<view style="flex: 1;">
					<view
						v-if="storeFoodList.specarray.length > 0 && storeFoodList.saleoverflag !== 1"
						style="padding: 10upx 20upx;border-radius: 10upx;background-color: #FF4444;color: #FFFFFF;font-size: 24upx;text-align: center;"
						@click.stop="popupOpen"
					>
						选规格
					</view>
					<view
						v-else-if="storeFoodList.specarray.length == 0 && storeFoodList.num == 0 && storeFoodList.saleoverflag !== 1" 
						style="padding: 10upx 20upx;border-radius: 10upx;background-color: #FF4444;color: #FFFFFF;font-size: 24upx;text-align: center;"
						@click="addShop">
						加入购物车
					</view>
					<view
						v-else-if="storeFoodList.saleoverflag == 1"
						style="padding: 10upx 20upx;border-radius: 10upx;background-color: #999999;color: #FFFFFF;font-size: 24upx;text-align: center;"
						@click.stop="sellout"
					>
						已售罄
					</view>
					<view  style="flex: 3;padding-top: 30upx;height: 100%;" v-else>
						<jumpBall ref="jumpBall" @msg="jbMsg" />
						
						<tui-numberbox  :value="numbers" id="goshop" @change="change($event,'goshop')" :width="60" :min="0" style="float: right;"></tui-numberbox>
					</view>
					
				</view>
			</view>
		</view>
		<!-- 商品详情模块 -->
		<view class="commodityDetails b-f" v-if="storeFoodList.detail">
			<view class="f-w" style="padding-bottom: 30upx;">商品详情</view>
			<view  v-if="storeFoodList.detail" style="position: relative;">
				<!-- <u-parse :content="storeFoodList.detail" /> -->
				<jyf-parser :html="storeFoodList.detail"></jyf-parser>
				<view style="color: #999999;position: absolute;right: 0%;bottom: 30%;" class="f-22" @click="lookAll" v-if="false">
					查看全部
					<text :class="lookAllShow ? 'iconfont icon-fold' : 'iconfont icon-unfold'" style="font-size: 20upx;"></text>
				</view>
			</view>
		</view>
		<!-- 评论模块 -->
		<view ><foodComment :storeFoodList="storeFoodList"></foodComment></view>
		<!-- 飞行的购物车 -->
		<shoppingFixation :sid="sid" @onShows="onShowis" :is_business="storeFoodList.is_business" :num="num"></shoppingFixation>
		<!-- 选规格的弹出层 -->
		<popup-view :show="showBuyMenu" type="center" @clickmask="onToggleTrade">
			<view style="background-color: #FFFFFF;border-radius: 15upx;">
				<view class="footName f-28" style="padding: 20upx 20upx 0;">{{ storeFoodList.goodsname }}</view>
				<view class="p-top-40 f-24" style="color: #999999;padding: 40upx 20upx 0upx;">规格</view>
				<view class="dis-flex" style="padding: 0 20upx 30upx;flex-wrap: wrap;">
					<view
						:class="item.checked ? 'checked' : 'noChecked'"
						style="flex: 0.01;padding: 10upx 30upx;margin: 20upx 10upx 20upx 0;text-align: center;width: 100upx;min-width: 100upx;"
						v-for="(item, index) in storeFoodList.specarray"
						:key="index"
						@click="checkedLabel(item)"
					>
						{{ item.name }}
					</view>
				</view>
				<view  style="background-color: #F8F8F8;padding: 10upx 20upx;">
					<text class="f-26" style="color: #999999;">已选规格:</text>
					<text class="f-26">({{ numberPeople.name }})</text>
				</view>
				<view class="dis-flex" style="padding: 0 20upx;">
					<view  style="flex: 7;padding: 30upx 0;">
						<text class="f-30 f-w" style="color: #FF4444;">¥{{ numberPeople.price }}</text>
						<text class="f-24" style="text-decoration: line-through;color: #999999;padding-left: 10upx;text-decoration:line-through;">¥{{ numberPeople.oldprice }}</text>
					</view>
					<view  style="flex: 3;padding-top: 30upx;">
						<button type="warn" size="mini" style="font-size: 20upx;" @click="addShoping" v-if="numberPeople.cartNum == 0">加入购物车</button>
						<tui-numberbox :value="numberPeople.cartNum"  @change="changes" :width="60" :min="0"  v-if="numberPeople.cartNum > 0"></tui-numberbox>
						</view>
				</view>
			</view>
		</popup-view>
		<!-- 购物车弹窗 -->
		<popup-view :show="show" type="bottom" @clickmask="onShows" :bottom="'7%'" style="margin-bottom: 100upx;">
			<view  style="width: 93vw;border-radius: 15upx 15upx 0 0;background-color: #f7f7f7;padding: 30upx;height: 50vh;overflow: auto;" v-if="shopingList">
				<view class="dis-flex f-24" style="padding: 0 30upx 30upx;">
					<view class="flex-box ">
						已选商品
					</view>
					<view class="dis-il-block" v-if="shopingList.cartinfo.deliveryprice>0" style="padding-left: 30upx;">
						包装费:<text class="c-ff4444" style="padding-left: 10upx;">¥{{shopingList.cartinfo.deliveryprice}}</text>
					</view>
					<view class="flex-box t-r" @click="empty">
						<text class="iconfont icon-delete" style="font-size: 24upx;"></text>
						<text>清空</text>
					</view>
				</view>
				<view class="b-f" style="padding: 30upx;" v-for="(item,index) in shopingList.cartinfo.goodslist" :key="index" v-if="shopingList.cartinfo.goodslist[index].num > 0">
					<view class="dis-flex" style="justify-content: space-between;">
						<view class="name dis-il-block f-28 f-w" style="flex: 0.35;line-height: 40upx;">
							{{item.name}}
						</view>
						<view class="dis-flex" style="flex: 0.8;">
							<view class="flex-box f-20 t-r" style="padding-right: 20upx;color: #999999;line-height: 40upx;text-decoration:line-through;">
								¥{{item.oldprice}}
							</view>
							<view class="flex-box f-32 f-w" style="padding-right: 20upx;color: #FF4444;line-height: 40upx;">
								¥{{item.price}}
							</view>
							<view class="flex-box" style="">
								<tui-numberbox
									style="float: right;"
									:value="shopingList.cartinfo.goodslist[index].num"
									@change="changeis($event,item)"
									:width="60"
									:min="0"
								></tui-numberbox>
							</view>
						</view>
					</view>
					<view class="f-20" style="color: #999999;">
						<text>{{item.specname}}</text>
					</view>
				</view>
				<!-- <view class="dis-flex b-f" style="padding: 30upx;margin-top: 20upx;" v-if="shopingList.cartinfo.goodslist.length > 0">
					<view class="f-32 f-w" style="flex: 0.65;">
						包装费
					</view>
					<view style="flex: 0.55;color: #FF4444;" class="f-32 f-w">
						¥{{shopingList.cartinfo.deliveryprice}}.00
					</view>
				</view> -->
			</view>
			<view style="width: 93vw;border-radius: 15upx 15upx 0 0;background-color: #f7f7f7;padding: 30upx;text-align: center;" v-if="!shopingList">
				购物车空空如也~
			</view>
		</popup-view>
		<!-- 购物车 -->
		<view class="foot"><view class="cart"></view></view>
		</view>
	</view>
</template>

<script>
import App from '@/common/js/app.js';
import Loadlogo from '@/components/template/loadlogo.vue';
import PopupView from '@/components/template/PopManager.vue';
import foodComment from '@/pages/subPages2/tamplate/foodComment.vue';
import shoppingFixation from '@/pages/subPages2/tamplate/shoppingFixation.vue';
import tuiNumberbox from '@/components/template/numberbox.vue';
import jumpBall from '@/components/hx-jump-ball/hx-jump-ball.vue';
import jyfParser from '@/components/jyf-parser/jyf-parser.vue'
export default {
	components: {
		PopupView,
		foodComment,
		shoppingFixation,
		tuiNumberbox,
		jumpBall,
		Loadlogo
	},
	data() {
		return {
			loadlogo: false,
			duration: 500, //滑动时间
			interval: 2000, //间隔时间
			storeData: {},
			showBuyMenu: false,
			numberPeople: {
				numberPeople: 1,
				originalPrice: '20.00',
				currentPrice: '10.00',
				checked: true
			},
			storeFoodList: {
				thumbs:[],
				specarray:[],
				detail:'',
				num:1
			},
			lookAllShow: true,
			introduce: [
				{
					key: '套餐内容:',
					val: '5个素菜+6个荤菜+1份珍珠米饭'
				},
				{
					key: '掌柜描述',
					val: '5个素菜+6个荤菜+1份珍珠米饭+好多能吃的+小吃+卤蛋+老干妈+肥肉刺身+凉拌生肥肉'
				},
				{
					key: '主料',
					val: '火腿肠+午餐肉+亲嘴肠'
				},
				{
					key: '荤素',
					val: '肃魂'
				},
				{
					key: '制作方法',
					val: '水煮'
				}
			],
			num: 0,
			sid: 0,
			numbers:0,
			show:false,
			shopingList:null,
			element: [],
			width:'100%',
			height:'45vh'
		};
	},
	onLoad(options) {
		let _this = this;
		_this.storeData.id = options.id;
		this.sid = options.id;
		this.width = uni.getStorageSync('imgstyle').width
		this.height = uni.getStorageSync('imgstyle').height
		// debugger
		uni.$on('onShows',function(data){
			this.onShowss();
		})
		// this.numberPeople = this.storeData.specifications[0];
	},
	onShow() {
		this.getCommodity();
	},
	methods: {
		goindex(){
			let pages = getCurrentPages();
			console.log(pages);
			if(pages.length == 1){
				App.navigationTo({
					url: 'pages/subPages2/businessCenter/foodList/foodList?id=' + this.sid + '&storeid=' + this.sid
				});
			}else{
				uni.navigateBack({
					delta:1
				})
			}
			// App.navigationTo({
			// 	url: "pages/mainPages/index/index"
			// })
		},
		jbMsg(){
		},
		changeis(e,item){
			let _this = this;
			this.shopingList.cartinfo.goodslist.map((items,indexs)=>{
				if(items.id == item.id){
					App._post_form(`&p=citydelivery&do=addShopCart&goodid=${item.goodid}&specid=${item.specid}&addtype=${(e.type == "plus")?1:0}`, {}, res => {
						if(res.errno !== 0){
							return
						}
						items.num = e.value;
						let storePrice = res.data;
						storePrice.changenum = e.value;
						storePrice.changemoney = storePrice.changemoney * e.value;
						storePrice.id = item.id;
						if(item.num == 0){
							_this.shopingList.cartinfo.goodslist.splice(indexs,1);
							if(_this.shopingList.cartinfo.goodslist.length == 0){
								_this.show = !_this.show;
								this.getCommodity();
							}
						}
						// this.$emit('getshopPrice',storePrice);
						// this.$store.commit('STOREPRICES',storePrice);
						this.num++;
						
					}, false, () => {
						// _this.loadlogo = true
					})
				}
			})
		},
		// 获取数据并显示
		onShowis(data){
				this.show = !this.show;
				this.shopingList = data;
		},
		withdraw(){
			App._post_form(
				`&p=citydelivery&do=deteShopCart&sid=${this.sid}`,
				{},
				res => {
					if(res.errno == 0){
						uni.showToast({
						    title: '移除成功',
						    duration: 2000
						});
						this.num++;
						this.shopingList = null;
						this.show = false;
						this.getCommodity();
		
					}
				},
				false,
				() => {
					// _this.loadlogo = true
				})
				
		},
		// 清空购物车
		empty(){
			App.showError(
				`确定移除该商店及所属商品？`, (data) => {
					if (data.confirm) {
						!!data && this.withdraw()
					}
				}, true)
		},
		// 纯控制显示隐藏
		onShows(){
			this.show = !this.show;
		},
		// 弹出框监听
		changes(e){
			App._post_form(`&p=citydelivery&do=addShopCart&goodid=${this.storeData.id}&specid=${this.numberPeople.id}&addtype=${(e.type == 'plus')?1:0}`, {}, res => {
				if(res.errno !== 0){
					return
				}
				let storePrice = res.data;
				this.num++
				storePrice.changenum = this.num;
				storePrice.changemoney = storePrice.changemoney * this.num;
				storePrice.id = this.storeData.id;
				this.numberPeople.cartNum = e.value;
				// this.$emit('getshopPrice',storePrice);
				// this.$store.commit('STOREPRICES',storePrice);
				uni.$emit('STOREPRICES',storePrice);
			}, false, () => {
				// _this.loadlogo = true
			})
		},
		// 监听加减
		change: function(e,classis) {
			let _this = this;
			let views; //点击的坐标
			let viewss; //购物车坐标
			App._post_form(`&p=citydelivery&do=addShopCart&goodid=${this.storeData.id}&specid=${0}&addtype=${(e.type == 'plus')?1:0}`, {}, res => {
				if(res.errno !== 0){
					return
				}
				this.numbers = e.value;
				let storePrice = res.data;
				this.num++
				storePrice.changenum = this.num;
				storePrice.changemoney = storePrice.changemoney * this.num;
				storePrice.id = this.storeData.id;
				setTimeout(() => {
					let view = uni
						.createSelectorQuery()
						.in(_this)
						.select('#' + classis);
					view.fields(
						{
							size: true,
							rect: true,
							scrollOffset: true
						},
						data => {
							_this.element.push(data);
							views = data;
							// item.top = h;
							// h += data.height;
							// item.bottom = h;
							let viewis = uni
								.createSelectorQuery()
								.in(_this)
								.select('.cart');
							viewis
								.fields(
									{
										size: true,
										rect: true,
										scrollOffset: true
									},
									datas => {
										_this.element.push(datas);
										viewss = datas;
										// item.top = h;
										// h += data.height;
										// item.bottom = h;
										if (e.type == 'plus') {
											// _this.setData({
											// 	nums:this.nums+1
											_this.$refs.jumpBall.$emit('childMethod', _this.element);
										}
									}
								)
								.exec();
						}
					).exec();
				}, 100);
				// this.$emit('getshopPrice',storePrice);
				// this.$store.commit('STOREPRICES',storePrice);
				uni.$emit('STOREPRICES',storePrice);
				this.getCommodity();
			}, false, () => {
				// _this.loadlogo = true
			})
		},
		// 直接加购物车
		addShop() {
			App._post_form(
				`&p=citydelivery&do=addShopCart&goodid=${this.storeData.id}&specid=${0}&addtype=${1}`,
				{},
				res => {
					if(res.errno !== 0){
						return
					}
					let storePrice = res.data;
					this.num++;
					storePrice.changenum = this.num;
					storePrice.changemoney = storePrice.changemoney * this.num;
					storePrice.id = this.storeData.id;
					// this.$emit('getshopPrice',storePrice);
					// this.$store.commit('STOREPRICES',storePrice);
					this.getCommodity();
					uni.$emit('STOREPRICES', storePrice);
				},
				false,
				() => {
					// _this.loadlogo = true
				}
			);
		},
		// 从弹窗加入购物车
		addShoping() {
			App._post_form(
				`&p=citydelivery&do=addShopCart&goodid=${this.storeData.id}&specid=${this.numberPeople.id}&addtype=${1}`,
				{},
				res => {
					if(res.errno !== 0){
						return
					}
					let storePrice = res.data;
					this.num++;
					storePrice.changenum = this.num;
					storePrice.changemoney = storePrice.changemoney * this.num;
					storePrice.id = this.storeData.id;
					this.numberPeople.cartNum = 1;
					// this.$emit('getshopPrice',storePrice);
					// this.$store.commit('STOREPRICES',storePrice);
					uni.$emit('STOREPRICES', storePrice);
				},
				false,
				() => {
					// _this.loadlogo = true
				}
			);
		},
		// 详情查看全部
		lookAll() {
			this.lookAllShow = !this.lookAllShow;
		},
		// 初始化商品详情
		getCommodity() {
			App._post_form(
				`&p=citydelivery&do=goodsDetail&id=${this.storeData.id}`,
				{},
				res => {
					this.loadlogo = true
					this.setData({
						storeFoodList: res.data
					});
					this.$set(this.storeFoodList,'detail',res.data.detail);
					this.numbers = Number(res.data.num);
					this.sid = res.data.sid;
					if (this.storeFoodList.specarray.length > 0) {
						this.numberPeople = this.storeFoodList.specarray[0];
						this.numberPeople.checked = true;
					}
				},
				false,
				() => {
					
				}
			);
		},
		popupOpen() {
			this.showBuyMenu = true;
		},
		sellout(){
			
		},
		// 规格弹窗开关
		onToggleTrade() {
			//关闭后重置规格数据
			this.showBuyMenu = !this.showBuyMenu;
		},
		// 选中某规格
		checkedLabel(item) {
			this.numberPeople = item;
			this.storeFoodList.specarray.forEach(items => {
				items.checked = false;
				if (items.name == item.name) {
					items.checked = true;
				}
			});
			// this.selectSpecification.map((items,index)=>{

			// })
		}
	}
};
</script>

<style lang="scss" scoped>
	.bankindex{
		position: absolute;
		left: 3%;
		top: 3%;
		background-color: rgba(254, 213, 95,1);
		box-shadow: 0 5px 15px rgba(255,255,255,0.5);
		padding: 10upx 20upx;
		color: #FFFFFF;
		font-size: 24upx;
		border-radius: 60upx;
		width: 12vw;
	}
.footName {
	width: 70vw;
	overflow: hidden; /*超出部分隐藏*/
	white-space: nowrap; /*不换行*/
	text-overflow: ellipsis; /*超出部分文字以...显示*/
	font-weight: 600;
}
.foot {
	position: fixed;
	bottom: 60upx;
	height: 90upx;
	left: 10upx;
	width: 100%;
}
.foot .cart {
	width: 180upx;
	height: 90upx;
	line-height: 90upx;
	text-align: center;
}
.checked {
	background-color: #fff5f5;
	border: 1upx solid #ff4444;
	border-radius: 10upx;
	font-size: 24upx;
	color: #ff4444;
}
.noChecked {
	background-color: #ffffff;
	border: 1upx solid #999999;
	border-radius: 10upx;
	font-size: 24upx;
}
.foodImg {
	height: 45vh;
}
.swiper {
	height: 100%;
}
.commodityDetails {
	padding: 30upx;
	margin: 20upx 0;
}
</style>
<style>
page {
	background-color: #f8f8f8;
}
</style>
