<template>
	<view class="shop-cart">
		<view class="u-m-32">
			<view class="u-text-right nr" @click="isEdit = !isEdit">编辑</view>
			<view class="u-m-t-40" v-for="(item, index) in 10" :key="10">
				<view class="bg-white br16 u-p-24 row">
					<view>
						<u-checkbox shape="circle" :active-color="themeColor"></u-checkbox>
					</view>
					<view class="row flex1 u-col-top">
						<view>
							<u-image :src="cloudPath + 'img/banner.png'" width="160" height="160" border-radius="8"></u-image>
						</view>
						<view class="u-m-l-16">
							<view>煎饼果子套餐</view>
							<view class="sm text-999 u-m-t-8 attr u-text-center u-p-l-16 u-p-r-16 u-p-6-8 u-p-b-8" @tap="showSpec = true">
								<text>味浓芳香</text>
								<text class="u-m-l-8 u-m-r-8">|</text>
								<text>味浓芳香</text>
								<text class="u-m-l-8 u-m-r-8">|</text>
								<text>味浓芳香</text>
							</view>
							<view class="u-m-t-16 row-between">
								<view class="primary">
									<price-format :price="12.9" :subscriptSize="22" :firstSize="34" :secondSize="26"></price-format>
								</view>
								<view>
									<view v-if="!isEdit">
										<u-number-box></u-number-box>
									</view>
									<view v-if="isEdit">
										<u-icon name="trash" size="32" color="#999"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="fixed footer bg-white w-full row-between u-col-center px32">
			<view>
				<u-checkbox shape="circle" :active-color="themeColor">全选</u-checkbox>
			</view>
			<view class="row">
				<view class="row-center">
					<view>合计：</view>
					<view class="primary u-m-l-8" style="margin-top: -8rpx;">
						<price-format :price="12.9" :subscriptSize="32" :firstSize="40" :secondSize="32"></price-format>
					</view>
				</view>
				<view class="u-m-l-24">
					<u-button @click="mpLogin" hover-class="none" :customStyle="{width: '228rpx', height: '80rpx', backgroundColor: '#FE6004', color: '#fff', border: 'none', padding: '16rpx 0', borderRadius: '64rpx'}" :hair-line="false">结算</u-button>
				</view>
			</view>
		</view>
		
		<shop-spec v-model="showSpec" @close="showSpec = false"></shop-spec>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isEdit: false,
				showSpec: false
			}
		},
		
		onShow() {
			console.log(this.isLogin)
		}
	}
</script>

<style lang="scss">
	.shop-cart {
		padding-bottom: 200rpx;
	}
	
	.attr {
		background-color: #F5F5F5;
		border-radius: 88rpx;
	}
	
	.fixed {
		height: 112rpx;
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.1);
	}
</style>