<template>
	<view class="wrap">
		<view class="top">
			<text>
				共3件宝贝
			</text>
			
			<text v-if="showManage" @click="manageChange()">
				管理
			</text>
			
			<text v-else @click="manageChange()">
				退出管理
			</text>
		</view>
		
		<view class="middle">
			<checkbox-group @change="checkboxChange" class="checkbox-box">
				<view class="companyList" v-for="(item,index) in 2" :key='index'>
					<view class="companyTitle">
						<label>
							<checkbox
								style="transform: scale(0.8)"
								class="blue"
								:disabled="items.status == 2"
								:value="index"
							/>
							云相片
						</label>
					</view>
					
					<scroll-view  class="scroll" scroll-x="true" v-for="(item2,a) in 5" :key='a'>
						<view class="product-wrap">
							<view class="product-left">
								<label>
									<checkbox
										style="transform: scale(0.8)"
										class="blue"
										:disabled="items.status == 2"
										:value="a"
									/>
									<view>
										<image src="../../my/static/takeNumber/sdMap.jpg" style="width: 160rpx;height: 160rpx;"></image>
									</view>
								</label>
							</view>
						
						<view class="product-right">
							<view>
								<text class="product-name">单照片</text>
								<text class="product-time">05-29 11:29</text>
							</view>
							<view>
								<view class="product-price">
									<text style="font-size: 28rpx;">¥</text>20
								</view>
								<u-number-box>
									<view slot="minus" class="number-minus" >
										<u-icon name="minus" color="#FFFFFF" size="32"></u-icon>
									</view>
									<text slot="input"  class="number-input">{{buyNum}}</text>
									<view slot="plus" class="number-plus">
										<u-icon name="plus" color="#FFFFFF" size="32"></u-icon>
									</view>
								</u-number-box>
							</view>
						</view>
					</view>
					
					<view class="product-dele">
						<view>
							<u-icon name='trash' color='#ffffff' size='56'></u-icon>
							删除
						</view>
					</view>
					</scroll-view>
				</view>
			</checkbox-group>
		</view>
		
		<view class="bottom">
			<view class="bottom-left">
				<label>
					<checkbox
						style="transform: scale(0.8)"
						class="blue"
						:disabled="items.status == 2"
					/>
					全选
				</label>
			</view>
			<view class="bottom-middle">
				<text>
					商品合计：
				</text>
				<text>
					<text style="font-size: 28rpx;">¥</text>100
				</text>
			</view>
			<view class="bottom-right">
				<text v-if="showManage" class="btn">去结算</text>
				<text v-else class="btn">删除(1)</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      showManage:true,//管理显示隐藏
    }
  },
  onLoad(option) {
   
  },
  methods: {
    //---管理和退出管理变化
    manageChange(){
      this.showManage=!this.showManage
    }	
  }
}
</script>

<style scoped lang="scss">
.top{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1;
	background: #ffffff;
	padding:0 32rpx;
	height: 90rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	text:first-child{
		color: #999999;
	}
}
.middle{
	padding: 90rpx 0 120rpx 0;
}
.companyList{
	padding: 32rpx;
	background: #ffffff;
}
.companyTitle{
	font-weight: 600;
}
.scroll{
	white-space: nowrap;
	width: 100%;
	margin-top: 24rpx;
	height: 168rpx;
}
.product-wrap{
	display:inline-flex;
	width: 100%;
	height: 100%;
	vertical-align: top;
}
.product-left{
	display: flex;
	align-items: center;
	label{
		display: flex;
		align-items: center;
		image{
			width: 160rpx;
			height: 160rpx;
			border-radius: 8rpx;
			margin: 0 28rpx 0 16rpx;
		}
	}
}
.product-right{
	display: flex;
	flex: 1;
	flex-direction: column;
	justify-content: space-between;
	>view{
		display: flex;
		justify-content: space-between;
	}
}
.product-name{
	font-weight: bold;
}
.product-price{
	color: $red;
	font-weight: bold;
	font-size: 40rpx;
}
.product-time{
	font-size: 24rpx;
	color: #999999;
}
.product-dele{
	margin-left: 20rpx;
	display:inline-flex;
	width: 132rpx;
	background: $red;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	font-size: 32rpx;
	height: 100%;
	border-radius: 0  0 16rpx 0;
	vertical-align: top;
}
.bottom{
	display: flex;
	position: fixed;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: 120rpx;
	background: #ffffff;
	align-items: center;
	padding: 0 24rpx;
}
.bottom-left{
	color: #666666;
}
.bottom-middle{
	flex: 1;
	text-align: center;
	text:last-child{
		color: $red;
		font-weight: bold;
		font-size: 40rpx;
	}
}
.number-minus {
	width: 52rpx;
	height: 52rpx;
	background:#ccc;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.number-input {
	padding:0 20rpx;
	width: 100rpx;
	text-align: center;
	font-size: 40rpx;
}
.number-plus{
	width: 52rpx;
	height: 52rpx;
	background:$theme;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.btn{
	width: 200rpx;
	height: 80rpx;
	text-align: center;
	line-height: 80rpx;
	border-radius: 40rpx;
	font-size: 32rpx;
	font-weight: bold;
}
</style>