<template>
	<view class="container">
		<view :class="navBtn?'footer-block-act':'footer-block'">
			<view v-if="!is_business" class="content-gice-is_business flex-center">
				店铺不在营业时间
			</view>
			<view v-else class="content-gice flex flex-y-center"  >
				<view class="car-block flex flex-x-center flex-y-center" @click="showCarGoods">
					
					<uni-icons type="cart" size="20"></uni-icons>
 
					<view class="car-num" v-if="carNum>0">{{carNum}}</view>
				</view>
				<view class="money-block" v-if="carNum>0">
					<view class="flex-y-center">
						<view class="txt">预计到手:</view>
						<view class="sign">￥</view>
						<view class="money">{{carTotal}}</view>
					</view>
					<view class="ft22" v-if="teen_index==2" style="color: #F1F1F1">
						另需配送费￥{{deliveryPrice}}
					</view>
				</view>
				<view class="no-goods" v-if="carNum == 0">
					购物车空空如也呢！
				</view>
				<view v-if="isDistance==2&&teen_index==2" class="sub-btn flex-center"
					style="background:#999;width:300rpx;">
					<view>
						超出配送范围
					</view>
				</view>
				<view v-if="isDistance==3&&teen_index==2" class="sub-btn flex-center"
					style="background:#999;width:300rpx;">
					<view @click="getWechatAddress">
						请选择地址
					</view>
				</view>
				<view v-else class="sub-btn flex-center">
					<view style="width: 100%;height: 100%;">
						<view class="sub-btn-font flex-center" style="background:#999;width:300rpx;"
							v-if="teen_index==2&&Number(carTotal)<Number(systemInfo.set.delivery_price)">
							￥{{systemInfo.set.delivery_price}}起送
						</view>
						<view v-else class="sub-btn-settlement flex-center" @click="onCreatOrder">
							去结算
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-mask" v-if="carGoodsPop" @click="showCarGoods"></view>
		<view :class="navBtn?'car-goods-block1':'car-goods-block'" class="car-goods-block" v-if="carGoodsPop">
			<view class="top flex flex-x-between flex-y-center">
				<view class="title">已选商品</view>
				<view class="clear-btn flex flex-nowarp flex-y-center" @click="clearCar">
					<image src="../static/icon_3.png" mode="aspectFit" class="icon-3"></image>
					<view class="btn-text">清空购物车</view>
				</view>
			</view>
			<scroll-view scroll-y class="car-goods-list">
				<view class="list">
					<block>
						<view v-for="(goods,idx) in carGoods" :key="idx">
							<view class="flex-y-center radio" @click="chooseBag(goods.pocket)">
								<view class="radio__inner"
									:style="is_checked == goods.pocket?('border: 1rpx solid' + getColorItem):''">
									<view :style="is_checked== goods.pocket?('background:'+ getColorItem):''"
										class="radio__inner-icon radio__inner-icon is-default-checked">
									</view>
								</view>
								装入口袋{{goods.pocket}}
								<block v-if="teen_index==2 && goods.packing_fee">（包装费 <text
										style="color: red;">￥{{goods.packing_fee}}</text> ）</block>
							</view>
							<view class="item flex flex-y-center flex-nowarp" v-for="(item,index) in goods.list"
								:key="index" v-if="item.num>0">
								<image :src="getImgSrc(item.spec_image)" mode="aspectFill" class="img"></image>
								<view class="goods-info">
									<view class="name">{{item.name}}</view>
									<view class="unit">{{item.spec}}</view>
									<view class="price flex-y-bottom">
										<block v-if="item.is_rebate==1">
											<view>￥{{item.first_price}}</view>
											<view class="textDecoration">￥{{item.price}}</view>
										</block>
										<block v-else>
											<view>￥{{item.price}}</view>
										</block>
									</view>
								</view>
								<view class="goods-num-block " :style="{color:getColorItem}">
									<view class="flex flex-x-between flex-y-center">
										<view class="num-btn num-btn-1 iconfont icon-jian1"
											@click="changeNum(item.category_id,item.goods_id,1,'car',index,'',item.many_rebate,item.is_rebate,goods.pocket)">
										</view>
										<view class="num">{{item.num}}</view>
										<view class="num-btn num-btn-2 iconfont icon-jia1"
											@click="changeNum(item.category_id,item.goods_id,2,'car',index,'',item.many_rebate,item.is_rebate,goods.pocket)">
										</view>
									</view>
									<view class="ft24 many_rebate" v-if="item.many_rebate>0 && item.is_rebate==1">
										{{item.many_rebate}}{{item.unit}}起购
									</view>
								</view>
							</view>
						</view>

						<view class="flex-y-center radio" style="padding-bottom: 10rpx;"
							@click="chooseBag(carGoods[carGoods.length-1].pocket+1)">
							<view class="radio__inner"
								:style="is_checked==(carGoods[carGoods.length-1].pocket+1)?('border: 1rpx solid' + getColorItem):''">
								<view
									:style="is_checked==(carGoods[carGoods.length-1].pocket+1)?('background:'+ getColorItem):''"
									class="radio__inner-icon radio__inner-icon is-default-checked">
								</view>
							</view>
							装入口袋{{carGoods[carGoods.length-1].pocket+1}} <text class="radio_tip">选用后，加购商品将自动放入该口袋</text>
						</view>
					</block>
					<!-- 
					<block v-else>
						<view class="item flex flex-y-center flex-nowarp" v-for="(item,index) in carGoods" :key="index"
							v-if="item.num>0">
							<image :src="getImgSrc(item.spec_image)" mode="aspectFill" class="img"></image>
							<view class="goods-info">
								<view class="name">{{item.name}}</view>
								<view class="unit">{{item.spec}}</view>
								<view class="price flex-y-bottom">
									<block v-if="item.is_rebate==1">
										<view>￥{{item.first_price}}</view>
										<view class="textDecoration">￥{{item.price}}</view>
									</block>
									<block v-else>
										<view>￥{{item.price}}</view>
									</block>
								</view>
							</view>
							<view class="goods-num-block " :style="{color:getColorItem}">
								<view class="flex flex-x-between flex-y-center">
									<view class="num-btn num-btn-1 iconfont icon-jian1"
										@click="changeNum(item.category_id,item.goods_id,1,'car',index,'',item.many_rebate,item.is_rebate)">
									</view>
									<view class="num">{{item.num}}</view>
									<view class="num-btn num-btn-2 iconfont icon-jia1"
										@click="changeNum(item.category_id,item.goods_id,2,'car',index,'',item.many_rebate,item.is_rebate)">
									</view>
								</view>
								<view class="ft24 many_rebate" v-if="item.many_rebate>0 && item.is_rebate==1">
									{{item.many_rebate}}{{item.unit}}起购
								</view>
							</view>
						</view>
					</block> -->

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		props: {

			carNum: {
				type: Number,
				default: 0,
			},

			isDistance: {
				type: Number,
				default: 1,
			},

			carGoods: {
				type: Array,
				default: function() {
					return []
				}
			},

			carTotal: {
				type: [Number, String],
				default: 0
			},

			deliveryPrice: {
				type: [Number, String],
				default: '0.00'
			},

			userInfo: {
				type: Object,
				default: function() {
					return {}
				}
			},
			navBtn: {
				type: Boolean,
				default: false,
			},

			//选择就餐人数
			eat_people: {
				type: [Number, String],
				default: 0
			},
			checked: {
				type: [Number, String],
				default: 0
			}
		},

		data() {
			return {
				// store_id: '',
				table_id: '',
				carGoodsPop: false,
				distance: 1,
				is_checked: 1
			};
		},

		mounted() {
			// this.store_id = uni.getStorageSync('store_id')
			this.table_id = uni.getStorageSync('table_id')
			// this.systemInfo = uni.getStorageSync('systemInfo')
			// console.log(this.systemInfo.set,"this.systemInfo")
		},

		computed: {
			...mapState(['teen_index', 'store_id', 'is_business']),
			getColorItem() {
				return this.$store.state.setColor
			},
			systemInfo() {
				if (this.$store.state.systemInfo) {
					return this.$store.state.systemInfo
				}
			}
		},

		watch: {
			carNum: function(newNum, oldNum) {
				if (newNum == 0) {
					this.carGoodsPop = false
				}
			},
			checked: {
				handler(newName, oldName) {
					console.log(newName, "is_checked")
					this.is_checked = newName
				},
				// 开启深度监听
				deep: true
			}
		},

		methods: {

			chooseBag(index) {
				this.is_checked = index;
				this.$emit("choosebag", index)
			},

			// 选择外卖地址
			getWechatAddress: function(e) {
				uni.navigateTo({
					url: '/pages/address/address?teen_index=1'
				})
			},
			//去创建订单
			onCreatOrder() {
				// 示例
				// #ifdef MP-ALIPAY
				my.getAuthCode({
					// 订单服务授权：order_service。如需同时获取用户多项授权，可在 scopes 中传入多个 scope 值。
					scopes: ['order_service'],
					success: (res) => {
						console.log(res, "res")
						// 订单服务授权成功
						this.fastTake();
					},
					fail: (res) => {
						// 订单服务授权失败，根据自己的业务场景来进行错误处理
						this.fastTake();
					},
				});
				// #endif
				// #ifdef MP-WEIXIN
				this.fastTake();
				// #endif
				
				// #ifdef H5
				//仅供测试使用
				this.fastTake();
				// #endif
			},

			fastTake() {
				// console.log("jiesuan")
				if (this.carNum == 0) {
					uni.showToast({
						title: '请先选择商品',
						icon: 'none'
					})
					return false
				}
				//获取购物车数据
				this.$http.request('xcx/fastTake', {
					store_id: this.store_id,
					user_id: uni.getStorageSync('user_id'),
					state: Number(this.teen_index),
				}, "", "", true).then(res => {
					this.$store.commit('SET_CREAT', false)
					//重置购物车
					uni.navigateTo({
						// url: `/pages/creatOrder/creatOrder?teen_index=${this.teen_index}`
						//新增点餐人数
						url: '/pages/creatOrder/creatOrder?teen_index=' + this.teen_index +
							'&eat_people=' + this.eat_people
					})
				}).catch(err => {
					console.log(err)
				})
			},


			//拼接图片全路径
			getImgSrc(src) {
				return this.$utils.getImgSrc(src)
			},

			//显示购物车列表
			showCarGoods() {
				if (this.carGoods.length == 0) {
					return
				}
				this.carGoodsPop = !this.carGoodsPop
			},
			/**
			 * 改变商品数量
			 * @category_id:分类id
			 * @goods_id:商品id
			 * @type:1减少 2增加
			 * @data_from 购物车列表传 'car' 规格弹窗传 'spec' 无规格传 'goods' 否则不传
			 * @car_index 购物车下标 data_form = 'car'传
			 * @goods_price 商品价格 data_from = 'goods' 传
			 * */
			changeNum(category_id, goods_id, type, data_from, car_index, goods_price, many_rebate = '', is_rebate = '',
				pocket = '') {
				console.log(this.carGoods, goods_price, many_rebate, is_rebate, pocket)
				this.$parent.changeNum(category_id, goods_id, type, data_from, car_index, goods_price, many_rebate,
					is_rebate, pocket);
			},

			//清空购物车
			clearCar() {
				uni.showModal({
					content: "确定清空购物车",
					success: (r) => {
						if (r.confirm) {
							var url, data;
							if (this.$store.state.systemInfo.is_qian_many == 1 && getApp().globalData
								.readyReset == 1) {
								url = 'xcx/delete_carta';
								data = {
									user_id: this.userInfo.id,
									table_id: this.systemInfo.table_id,
								}
							} else {
								url = 'xcx/delete_cart';
								data = {
									user_id: this.userInfo.id,
								}
							}
							this.$http.request(url, data).then(res => {
								this.carGoodsPop = false
								this.$parent.clearCar()
							}).catch(err => {
								console.log(err)
							})
						}
					}
				})

			},
		},
	}
</script>

<style lang="scss" scoped>
@import './shoppingCart.scss'
</style>
