<template>
	<view class="shop-car1">
		<view v-if="list.length" class="list">
			<view class="shopcar-item" v-for="(item, index) in list" :key="index">
				<view class="name" @tap="chooseGood(!item.choosed, index)">
					<text v-if="item.choosed" class="cuIcon-roundcheckfill"></text>
					<text v-else class="cuIcon-round"></text>
					<view class="name ellipsis">{{ item.name }}</view>
				</view>
				<view class="sizeItem" v-for="(sizeItem, sizeIndex) in item.size" :key="sizeIndex" v-if="item.cart[sizeIndex]" 
					@tap="chooseSize(!item.sizeChoosed[sizeIndex], index, sizeIndex)"
				>
					<text v-if="item.sizeChoosed[sizeIndex]" class="cuIcon-roundcheckfill"></text>
					<text v-else class="cuIcon-round"></text>
					<image :src="item.main_img"></image>
					<view class="info">
						<text>尺码：{{ sizeItem }}</text>
						<text class="basecolor">￥{{ item.money }}.00/{{ item.unit }}</text>
					</view>
					<NumInput :value="item.cart[sizeIndex]" :args="[index, sizeIndex]" @change="numChange" />
				</view>
			</view>
		</view>
		<view v-else class="none">
			<image src="../../static/icon/emptyshopcar.png"></image>
			<view class="big-btn" @tap="goToBuy">去下单</view>
		</view>
		<view class="buy">
			<view class="all" @tap="chooseAll(!choosedAll)">
				<text v-if="choosedAll" class="cuIcon-roundcheckfill"></text>
				<text v-else class="cuIcon-round"></text>
				<text>全选</text>
			</view>
			<view class="total">总计: <text>{{ '￥ ' + choosedPrice + '.00' }}</text></view>
			<view class="pay" @tap="confirm">结算({{ ' ' + choosedNum + ' ' }})</view>
		</view>
	</view>
</template>

<script>
	import NumInput from '@/components/public/num-input.vue'
	export default {
		components: { NumInput },
		data() {
			return {
				
			};
		},
		computed: {
			list() { return this.$store.state.cart.list },
			choosedAll() { return this.$store.getters['cart/choosedAll'] },
			choosedNum() { return this.$store.getters['cart/choosedNum'] },
			choosedPrice() { return this.$store.getters['cart/choosedPrice'] }
		},
		methods: {
			numChange(value, index, sizeIndex) { // 购物车数量发生变化
				if (value) {
					this.$store.commit('cart/COUNTCHANGE', { value, index, sizeIndex, del: true })
				} else {
					uni.showModal({
					    title: '提示',
					    content: '确定删除这个尺寸？',
					    success: res => {
					        if (res.confirm) {
					            this.$store.commit('cart/COUNTCHANGE', { value, index, sizeIndex, del: true })
					        }
					    }
					});
				}
			},
			chooseAll(to) { // 点击全选
				this.$store.commit('cart/CHOOSEDCHANGE', [to])
			},
			chooseGood(to, index) { // 点击商品
				this.$store.commit('cart/CHOOSEDCHANGE', [to, index])
			},
			chooseSize(to, index, sizeIndex) { // 点击尺寸
				this.$store.commit('cart/CHOOSEDCHANGE', [to, index, sizeIndex])
			},
			goToBuy() { // 点击去下单
				uni.navigateTo({ url: '../place-order/place-order' })
			},
			confirm() { // 点击结算
				if (this.choosedNum) {
					uni.navigateTo({ url: '../confirm-order1/confirm-order1' })
				}
			}
		}
	}
</script>

<style lang="scss">
	.shop-car1 {
		height: 100vh;
		overflow: auto;
		background: $app-base-bg;
		border-bottom: calc(var(--window-bottom) + 100rpx) solid transparent;
		.shopcar-item {
			margin-bottom: 10rpx;
			.name {
				height: 90rpx;
				@include flex();
				background: #FFFFFF;
				justify-content: flex-start;
				.name {
					color: #181818;
					font-size: 32rpx;
					font-weight: bold;
				}
				.cuIcon-round, .cuIcon-roundcheckfill {
					@include flex();
					width: 102rpx;
					height: 100%;
					font-size: 32rpx;
					&.cuIcon-roundcheckfill {
						color: $app-base-color;
					}
				}
			}
			.sizeItem {
				@include flex();
				height: 200rpx;
				margin-top: 4rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding-right: 39rpx;
				.cuIcon-round, .cuIcon-roundcheckfill {
					@include flex();
					width: 102rpx;
					height: 100%;
					font-size: 32rpx;
					&.cuIcon-roundcheckfill {
						color: $app-base-color;
					}
				}
				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 6rpx;
				}
				.info {
					flex: 1;
					height: 100%;
					@include flex(column);
					align-items: flex-start;
					padding: 43rpx 29rpx;
					box-sizing: border-box;
					justify-content: space-between;
				}
			}
		}
		.none {
			@include flex(column);
			height: 100%;
			image {
				width: 305rpx;
				height: 417rpx;
			}
			.big-btn {
				width: 280rpx;
				height: 80rpx;
				margin-top: 123rpx;
				border-radius: 40rpx;
			}
		}
		.buy {
			@include flex();
			position: fixed;
			left: 0;
			right: 0;
			bottom: var(--window-bottom);
			z-index: 1;
			height: 98rpx;
			font-size: 32rpx;
			background: #FFFFFF;
			justify-content: space-between;
			box-shadow: 0rpx -1rpx 0rpx 0rpx rgba(178,178,178,1);
			view {
				@include flex();
				height: 100%;
				&.all {
					font-size: 32rpx;
					text {
						margin-left: 30rpx;
						&.cuIcon-roundcheckfill {
							color: $app-base-color;
						}
					}
				}
				&.total {
					flex: 1;
					margin-right: 30rpx;
					justify-content: flex-end;
					text {
						color: $app-base-color;
					}
				}
				&.pay {
					width: 220rpx;
					color: #FFFFFF;
					background: $app-base-color;
				}
			}
		}
	}
</style>
