<template>
	<view class="cart-wrap" v-if="cartListsdatashow">
		<view class="cart-content">
			<view class="left">
				<view class="iconBox">
					<image class="icon" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/shopDetails/shopIcon.png"
						mode="aspectFill" @click="isOpen">
					</image>
					<text class="u-badge"> {{cartLists_count<99?cartLists_count:'99+'}} </text>
				</view>

				<text class="i">￥</text>
				<text class="num"
					v-if="shopInfo.isVip == 1 && cartLists.memberAmount > 0">{{cartLists.memberAmount||'0.00'}}</text>
				<text class="num" v-else>{{cartLists.amount||'0.00'}}</text>
			</view>
			<view class="btn" @tap="$u.debounce(orderdetail, 500)">
				<text class="t">去结算</text>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		defineProps,
	} from 'vue'

	const shopInfo = uni.cache.get('shopInfo')
	const cartListsdatashow = ref(false)
	const showCart = ref(false)
	const orderdetail = () => {
		if (this.cartLists.data.length == 0) {
			uni.showToast({
				title: '请先添加商品',
				icon: 'none'
			})
			return false
		}

		uni.navigateTo({
			url: `/pagesOrder/confirm_order/index?storeInfo=${encodeURIComponent(JSON.stringify(this.storeInfo))}&cartLists=${JSON.stringify(this.cartLists)}&tableCode=${this.tableCode||''}`
		});

	}
	const isOpen = () => {
		showCart.value = !showCart.value
	}

</script>

<style lang="scss">
	.cart-wrap {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 40rpx;
		left: 0;
		z-index: 99;

		.cart-content {
			display: flex;
			align-items: center;
			height: 128rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.15);
			border-radius: 58rpx;
			padding: 0 36rpx;
			box-sizing: border-box;

			.left {
				flex: 1;
				display: flex;
				align-items: center;
				position: relative;

				.iconBox {
					position: relative;
				}

				.icon {
					width: 76rpx;
					height: 88rpx;
					margin-left: 22rpx;
				}

				.u-badge {
					position: absolute;
					top: -30rpx;
					right: -30rpx;
					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;
				}

				.i,
				.num {
					color: #333;
				}

				.i {
					font-size: 20upx;
					position: relative;
					top: 4upx;
					margin-left: 64rpx;
				}

				.num {
					font-size: 42upx;
					font-weight: bold;
				}
			}

			.btn {
				height: 100%;
				width: 40%;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.t {
					width: 160rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					background: #E7AE7B;
					border-radius: 36rpx 36rpx 36rpx 36rpx;
					border: 2rpx solid #E8AD7B;
					font-weight: bold;
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}
</style>