<template>
	<view class="container">
		<view class="head">
			<view class="head-left">
				<view>
					<image src="../../static/menu1.png"></image>
					<text>肯悦咖啡体育中心店</text>
				</view>
				<view>三香路1511号</view>
			</view>
			<view @click="changeStar" class="head-right">
				<u-icon v-if="!hasStar" name="star" color="rgba(0,0,0,0.5)"></u-icon>
				<u-icon v-else name="star-fill" color="#d90209"></u-icon>
			</view>
		</view>
		<view class="main">
			<!-- 左侧 -->
			<view class="tab-left">
				<view class="box-bg">
					<view class="menu-list">
						<view class="box default" :class="{'current-pre':currentIndex===0}">
							<view id="menu-0" class="anchor"></view>
						</view>
						<view class="box" @click="changeMenu(item.id,index)" :class="{'select':currentIndex===index,
							'current-pre':( currentIndex-1>-1 && currentIndex-1===index)?true:false,
							'current-next':(currentIndex+1 === index && currentIndex+1<menus.length)?true:false
							}" v-for="(item,index) in menus">
							<view class="before"></view>
							<image class="logo" :src="item.img"></image>
							<view class="name">{{item.name}}</view>
							<view :id="`menu-${item.id}`" class="anchor"></view>
						</view>
						<view class="box default" :class="{'current-next':currentIndex===menus.length-1}"></view>
					</view>
					<view class="padding-bottom"></view>
				</view>
			</view>
			<view class="search-box">
				<u-search bg-color="#E4E4E4" height="70" :show-action="false" placeholder="搜餐品"
					v-model="keyword"></u-search>
			</view>
			<view class="tab-right">
				<view class="render">
					<view class="render-list" v-for="item in goods">
						<view class="box-title">
							<image src="../../static/menu2.png"></image>
							<view class="value">{{item.name}}</view>
						</view>
						<view class="component box" v-for="good in item.list" @click="goDetail">
							<view class="box-name">{{good.name}}</view>
							<view class="box-content">
								<image class="left" mode="widthFix" :lazy-load="true" :src="good.img"></image>
								<view class="right">
									<view class="money-title">
										<view class="icon-money">¥</view>
										<view class="num">{{good.price}}</view>
									</view>
									<view class="reduced">已减{{good.reduce_price}}元</view>

									<view class="original-price"> 原价¥{{good.original_price}} </view>
									<view class="add">
										<view v-if="good.num===0" class="add-icon" @click.stop="addReduceGood(good,'add')">+
										</view>
										<view v-else class="reduce-icon">
											<view @click.stop="addReduceGood(good,'reduce')">
												<text></text>
											</view>
											<view class="count">{{good.num}}</view>
											<view @click.stop="addReduceGood(good,'add')">+</view>
										</view>
									</view>

								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view> <!-- main -->
		<view class="cart-box" :class="{'open-cart':openCart}">
			<view class="cart-line">
				<view class="coupon-box">
					<view class="content">
						<view class="title">优惠助手</view>
					</view>
				</view>
				<view class="cart-price" :class="{'hasCart':cartTotal>0}">
					<view class="content">
						<view class="content-wrap">
							<view class="cart-img" @click.stop="openCart = !openCart">
								<image src="../../static/cart.png"></image>
								<view class="cart-total" v-if="cartTotal>0">{{cartTotal}}</view>
							</view>
							<view class="no-order" v-if="cartTotal<1">未选购商品</view>
							<view v-else class="price-box">
								<view @click.stop="openCart = !openCart">￥{{cartPrice}}</view>
								<view class="price-tip" @click="toCheck">
									<view>选好了</view>
									<view class="tip">Order</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- choosecart -->
		<view class="cart-dialog" v-if="openCart" @click="openCart = false">
			<view class="contant" @click.stop="">
				<view class="cart-head">
					<view class="title">已选餐品</view>
					<view class="btn-clear">
						<image src="../../static/del.png"></image>
						<text>清空</text>
					</view>
				</view>
				<view class="cart-list">
					<view class="box">
						<image src="../../static/img.jpg"></image>
						<view class="names">
							<view class="name">原味鸡+香辣鸡翅（2块）</view>
							<view class="price">
								<text>￥</text>
								11.9
								<text class="original">¥25</text>
							</view>
						</view>
						<view class="icon-click">
							<view>
								<text></text>
							</view>
							<view class="count">1</view>
							<view>+</view>
						</view>
					</view>
					<view class="box">
						<image src="../../static/img.jpg"></image>
						<view class="names">
							<view class="name">原味鸡+香辣鸡翅（2块）</view>
							<view class="price">
								<text>￥</text>
								11.9
								<text class="original">¥25</text>
							</view>
						</view>
						<view class="icon-click">
							<view>
								<text></text>
							</view>
							<view class="count">1</view>
							<view>+</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		menus,
		goods
	} from "@/common/const.js"
	export default {
		data() {
			return {
				hasStar: false,
				keyword: '',
				currentIndex: 0,
				cartTotal: 0,
				cartPrice: 0,
				cart: [], //购物车
				menus: [],
				goods: [],
				openCart: false
			}
		},
		computed: {

		},
		created() {
			this.menus = menus
			this.goods = goods
		},
		methods: {
			changeStar() {
				this.hasStar = !this.hasStar
			},
			changeMenu(id, index) {
				this.currentIndex = index
			},
			addReduceGood(item, type) {
				if (type === 'add') {
					item.num++
					this.cartTotal++
					this.cartPrice += parseInt(item.price)
				} else if (type === 'reduce') {
					item.num--
					this.cartTotal--
					this.cartPrice -= parseInt(item.price)
				}
			},
			
			goDetail(){
				uni.navigateTo({
					url:'/pages/restaurant/detail'
				})
			},
			toCheck(){
				uni.navigateTo({
					url:'/pages/order/create'
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		min-height: 100vh;
		// background: #f0f0f0;
		font-family: Avenir, Helvetica, Arial, sans-serif;

		.head {
			background: #fff;
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: rgba(0, 0, 0, .5);
			font-weight: 400;
			padding: 20rpx 40rpx;
			width: 100%;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			height: 120rpx;
			background: #fff;
			-webkit-transition: all .3s;
			transition: all .3s;
			z-index: 100;

			&-left {
				image {
					width: 32rpx;
					height: 32rpx;
				}

				text {
					font-size: 32rpx;
					color: rgba(0, 0, 0, .9);
					font-weight: 800;
					vertical-align: bottom;
					margin-left: 10rpx;
				}
			}

			&-right {
				font-size: 32rpx;
			}
		}

		.main {
			width: 100%;
			position: absolute;
			top: 120rpx;
			left: 0;
			right: 0;
			bottom: 0;
			-webkit-transition: all .3s;
			transition: all .3s;
			overflow: hidden;
			background: #fff;
			z-index: 100;

			.tab-left {
				width: 160rpx;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				bottom: 0;
				background-color: #fff;

				.box-bg {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					width: 160rpx;
					background: #fff;
					overflow-y: auto;
					overflow-x: unset;
				}

				.menu-list {
					background: #f0f0f0;
				}

				.box {
					width: 160rpx;
					text-align: center;
					background: #fff;
					font-size: 0;
				}

				.default {
					height: 70rpx;
				}

				.select {
					background-color: #f0f0f0;
				}

				.current-pre {
					border-bottom-right-radius: 40rpx;
				}

				.current-next {
					border-top-right-radius: 40rpx;
				}

				.anchor {
					position: absolute;
					left: 50%;
					-webkit-transform: translateX(-50%);
					transform: translateX(-50%);
					bottom: 0;
					width: 100%;
					height: 70rpx;
				}

				.before {
					width: 100%;
					height: 20rpx;
				}

				.logo {
					width: 64rpx;
					height: 64rpx;
				}

				.name {
					margin-top: 10rpx;
					font-size: 20rpx;
					color: rgba(0, 0, 0, .5);
					padding-bottom: 35rpx;
				}

				.padding-bottom {
					width: 100%;
					height: 180rpx;
				}


			}

			.tab-left::before {
				content: " ";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: #fff;
			}

			.tab-left::after {
				content: " ";
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				height: 70rpx;
				background: #fff;
				border-bottom-right-radius: 50rpx;
			}

			.search-box {
				position: fixed;
				top: 140rpx;
				left: 180rpx;
				right: 20rpx;
				z-index: 201;
				-webkit-transition: all .3s;
				transition: all .3s;
			}

			.tab-right {
				position: absolute;
				top: 0;
				left: 160rpx;
				right: 0;
				bottom: 0;
				width: auto;
				background: #f0f0f0;
				border-top-left-radius: 40rpx;

				.render {
					top: 100rpx;
					left: 0;
					right: 0;
					bottom: 0;
					width: 100%;
					position: absolute;
					z-index: 1;
					background: #f0f0f0;
					height: 100%;
					overflow: scroll;
					padding-bottom: 280rpx;

					&-list {
						text-align: center;
						margin: 20rpx;
						margin-top: 30rpx;

						.box-title {
							display: flex;
							justify-content: flex-end;
							align-items: center;
							margin-bottom: 20rpx;

							image {
								width: 44rpx;
								height: 44rpx;
								margin-right: 10rpx;
							}

							font-size: 24rpx;
							color: rgba(0, 0, 0, .9);
							text-align: right;
						}

						.box {
							// height: 4.2rem;
							background: #fff;
							-webkit-box-shadow: .8px .8rpx 10rpx 0 rgba(0, 0, 0, .1);
							box-shadow: .8px .8rpx 10rpx 0 rgba(0, 0, 0, .1);
							border-radius: 20rpx;
							overflow: hidden;
							padding: 30rpx;
							margin-bottom: 20rpx;

							&-name {
								font-size: 30rpx;
								font-weight: 600;
								color: rgba(0, 0, 0, .9);
								text-align: right;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
							}

							&-content {
								display: flex;
								justify-content: space-between;

								// align-items: center;
								image {
									width: 60%;
								}

								.right {
									width: calc(40% - 20rpx);
									text-align: right;
									padding-top: 40rpx;
									position: relative;

									.money-title {
										display: flex;
										justify-content: flex-end;
										align-items: baseline;
									}

									.icon-money {
										text-align: center;
										color: #d90209;
										font-size: 24rpx;
										white-space: nowrap;
										margin-bottom: 10rpx;
									}

									.num {
										font-size: 36rpx;
										font-weight: 600;
										color: #d90209;
										padding-left: 5rpx;
									}

									.reduced {
										color: #d90209;
										font-size: 24rpx;
										margin-bottom: 8rpx;
									}

									.original-price {
										text-decoration: line-through;
										color: rgba(0, 0, 0, .3);
										font-size: 24rpx;
										margin-bottom: 8rpx;
									}

									.add {
										color: #fff;
										display: flex;
										justify-content: flex-end;
										position: absolute;
										bottom: 0;
										right: 0;
										width: 100%;

										&-icon {
											width: 50rpx;
											height: 50rpx;
											border-radius: 100%;
											text-align: center;
											line-height: 50rpx;
											font-size: 36rpx;
											background: #d90209;
										}

										.reduce-icon {
											width: 80%;
											height: 50rpx;
											border-radius: 25rpx;
											background: #d90209;
											line-height: 50rpx;
											display: flex;
											align-items: center;

											&>view {
												// padding:0 20rpx;
												width: 33%;
												text-align: center;

												text {
													width: 40%;
													height: 1px;
													background-color: #fff;
													display: inline-block;
													vertical-align: middle;
													margin-left: 25%;
												}
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}

		.cart-box {
			position: fixed;
			bottom: 64rpx;
			left: 0rpx;
			right: 0rpx;
			z-index: 200;

			.cart-line {
				width: 100%;
				padding: 0 40rpx;
				// margin: 0 auto 128rpx;

				.coupon-box {
					width: 25%;
					margin-left: 40rpx;
					background: #333;
					-webkit-transform: skewX(-15deg);
					transform: skewX(-15deg);
					border-radius: 0 20rpx 20rpx 0;
					padding: 30rpx 0;
				}

				.coupon-box::before {
					content: " ";
					position: absolute;
					left: -60rpx;
					top: 0;
					bottom: 0;
					width: 80rpx;
					height: 100%;
					background: #333;
					-webkit-transform: skewX(15deg);
					transform: skewX(15deg);
					border-radius: 80rpx 0 0 80rpx;
				}

				.content {
					height: 100%;
					display: -webkit-box;
					display: -ms-flexbox;
					display: flex;
					-webkit-box-orient: vertical;
					-webkit-box-direction: normal;
					-ms-flex-direction: column;
					flex-direction: column;
					-webkit-box-pack: center;
					-ms-flex-pack: center;
					justify-content: center;
					-webkit-transform: skewX(15deg);
					transform: skewX(15deg);
				}

				.title {
					font-size: 28rpx;
					font-weight: 600;
					color: #fff;
				}
			}

			.cart-price {
				position: absolute;
				right: 0;
				top: 0;
				bottom: 0;
				left: 35%;
				// width: 55%;
				margin-right: 80rpx;
				background-color: #979797;
				-webkit-transform: skewX(-15deg);
				transform: skewX(-15deg);
				border-radius: 20rpx 0 0 20rpx;
				-webkit-transition-property: left, border-radius;
				transition-property: left, border-radius;
				-webkit-transition-duration: .1s;
				transition-duration: .1s;

				.content {
					transform: skewX(15deg);

					&-wrap {
						display: flex;
						align-items: center;
						font-size: 36rpx;
						color: #fff;
						padding: 0 20rpx;

						.cart-img {
							position: relative;
							font-size: 0;

							image {
								width: 80rpx;
								height: 80rpx;
							}

							.cart-total {
								width: 40rpx;
								height: 40rpx;
								border-radius: 40rpx;
								text-align: center;
								line-height: 40rpx;
								font-size: 20rpx;
								font-weight: 600;
								background-color: #333;
								position: absolute;
								top: 0;
								right: -20rpx;
							}
						}

						.no-order {
							margin-left: 20rpx;
						}

					}

				}
			}

			.cart-price::before {
				content: " ";
				position: absolute;
				right: -56rpx;
				top: 0;
				bottom: 0;
				width: 80rpx;
				height: 100%;
				background-color: #979797;
				-webkit-transform: skewX(15deg);
				transform: skewX(15deg);
				border-radius: 0 80rpx 80rpx 0;
			}

			// 有购物 数
			.hasCart {
				background-color: #d90209;

				.price-box {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: 36rpx;
					color: #fff;
					margin-left: 20rpx;

					.price-tip {
						position: absolute;
						right: -40rpx;

						.tip {
							text-align: center;
							font-size: 24rpx;
						}
					}
				}
			}

			.hasCart::before {
				background-color: #d90209;
			}
		}

		// 
		.open-cart .cart-line .cart-price {
			left: 10rpx;
			right: 20rpx;
			-webkit-transform: skewX(0deg);
			transform: skewX(0deg);
			border-radius: 80rpx 0 0 80rpx;
			// width:89%
			margin-right: 60rpx;
		}

		.open-cart .cart-line .cart-price::before {
			-webkit-transform: skewX(0deg);
			transform: skewX(0deg);
		}

		.open-cart .cart-line .cart-price .content {
			-webkit-transform: skewX(0deg);
			transform: skewX(0deg);
		}

		.cart-dialog {
			width: 100vw;
			height: 100vh;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 101;
			background-color: rgba(0, 0, 0, 0.4);

			.contant {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				max-height: 50vh;
				background-color: #fff;
				z-index: 103;
				border-top-left-radius: 50rpx;
				border-top-right-radius: 50rpx;
				padding-bottom: 170rpx;
			}

			.cart-head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;

				.title {
					font-size: 32rpx;
					color: rgba(0, 0, 0, .9);
					font-weight: 600;
				}

				.btn-clear {
					color: rgba(0, 0, 0, .3);
					font-size: 24rpx;

					image {
						width: 32rpx;
						height: 32rpx;
						margin-right: 10rpx;
					}

					text {
						vertical-align: top;
					}
				}
			}

			.cart-list {
				overflow: scroll;
				max-height: 800rpx;
				padding: 40rpx;
				padding-top: 0;

				.box {
					border-bottom: 1rpx solid rgba(0, 0, 0, .15);
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					justify-content: space-between;

					image {
						width: 160rpx;
						height: 124rpx;
					}

					.names {
						width: 45%;
						position: relative;
						font-weight: 600;
						color: rgba(0, 0, 0, .9);
						font-size: 28rpx;
						height: 144rpx;

						.name {
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;

						}

						.price {
							position: absolute;
							bottom: 0;
							left: 0;
							width: 100%;
							padding-left: 10rpx;
							font-size: 36rpx;
							color: #d90209;
							font-weight: 600;

							text {
								font-size: 28rpx;
							}

							.original {
								text-decoration: line-through;
								color: rgba(0, 0, 0, .3);
								padding-left: 10rpx;
								font-size: 24rpx;
							}
						}
					}

					.icon-click {
						display: flex;
						align-items: center;

						view {
							width: 50rpx;
							height: 50rpx;
							border-radius: 100%;
							text-align: center;
							line-height: 50rpx;
							font-size: 36rpx;
							background: #d90209;
							color: #fff;
						}

						view:first-child {
							background-color: #fff;
							border: 1rpx solid rgba(0, 0, 0, .15);
							line-height: 0;

							text {
								width: 25rpx;
								height: 4rpx;
								background-color: rgba(0, 0, 0, .15);
								display: inline-block;
								margin-top: 23rpx;
							}
						}

						.count {
							background-color: transparent;
							font-size: 26rpx;
							color: #333;
							margin: 0 5rpx;
							// width: 30rpx;
						}
					}
				}
			}
		}

	}
</style>