<template>
	<view class="page">
		<view class="box d">

			<uv-checkbox-group shape="circle" v-model="checkboxValue">
				<view v-for="(item, index) in list" 
				:key="index" 
				@click="" class="item">
					<view class="checkbox" v-if="detail.pay == 'Y'">
						<uv-checkbox 
						:name="item.id" 
						activeColor="#FA5A0A" 
						size="40rpx" @click.stop
						icon-size="35rpx"></uv-checkbox>
					</view>

					<image class="image"
					:src="item.image" mode="">
					</image>

					<view class="info">
						<view class="title">
							<view class="text-ellipsis">{{ item.name }}</view>
							<!-- <view style="flex-shrink: 0;">
								数量：{{ item.num }}
							</view> -->
						</view>
						<view class="unit">
							{{ item.nameSub }}
						</view>

						<view class="price-box">
							<view class="price">
								现价<text>￥{{ item.price }}</text>元
							</view>
							<view class="del">
								原价￥{{ item.oldPrice }}
							</view>
						</view>
						<view class="unit">
							<uv-number-box 
							v-if="detail.pay == 'Y'"
							v-model="selectNumMap[item.id]" 
							:max="item.num"
							>
							</uv-number-box>
							
							<uv-icon
							name="edit-pen-fill"
							size="50rpx"
							@click.stop="toEdit(item)"
							v-if="edit"
							color="#5baaff"
							/>
							
							<uv-icon
							name="trash-fill"
							size="50rpx"
							@click.stop="del(item)"
							v-if="edit"
							color="#5baaff"
							/>
						</view>
					</view>
				</view>
			</uv-checkbox-group>
		</view>
		
		<view class="action" v-if="detail.pay == 'Y'">
			<view class="icon">
				<image src="/static/image/cart/2.png" mode=""></image>
				<view class="num">{{ checkboxValue.length }}</view>
			</view>
			<view class="price">
				<view class="count">
					合计
					<view>
						￥
						<text>{{ totalPrice }}</text>
					</view>
				</view>
				<view class="text">
					共{{ checkboxValue.length }}件，已享受最高优惠
				</view>
			</view>
			<view class="btn2" @click="toSubmit">结算</view>
		</view>
		
		<productSubmit
		ref="productSubmit"
		:totalPrice="totalPrice"
		:priceList="priceList"
		@submit="submit"
		/>
		
		<!-- 添加商品 -->
		<view class="createDetail"
		v-if="edit">
			<view 
			@click="$utils.
			navigateTo(`/pages_order/product/addProduct?shopId=${shopId}`)">
				<uv-icon 
				size="40rpx" 
				color="#fff" 
				name="plus"></uv-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import productSubmit from './productSubmit'
	import { mapState } from 'vuex'
	export default {
		components : {
			productSubmit,
		},
		props : {
			list : {
				default : [],
			},
			edit : {
				default : false,
			},
			shopId : {
				default : ''
			},
			detail : {
				default : {}
			}
		},
		computed : {
			...mapState(['priceMap']),
			totalPrice(){//计算总金额
				if(this.checkboxValue.length == 0){
					return 0
				}
				
				let price = Number(this.priceMap.pei_money) || 0
				
				this.list.forEach(n => {
					if(this.checkboxValue.includes(n.id)){
						price += (n.price || 0)
						* (this.selectNumMap[n.id] || 1)
					}
				})
				
				return Number(price).toFixed(2)
			},
			priceList(){
				if (this.checkboxValue.length == 0) {
					return []
				}
				
				let list = []
				
				this.list.forEach(n => {
					if (this.checkboxValue.includes(n.id)) {
						list.push({
							price : n.price,
							num : this.selectNumMap[n.id] || 1,
							title : n.name,
							shopId : n.id,
						})
					}
				})
				
				return list
			},
		},
		data() {
			return {
				checkboxValue : [],
				selectNumMap : {},
			};
		},
		methods : {
			
			// 下架商品
			del(item){
				uni.showModal({
					title: '您确认要下架吗？',
					content: `您正在下架 ${item.name}`,
					success : res => {
						this.$api('orderUpdate', {
							id : item.id,
							isOpen : 'N',
						}, res => {
							if(res.code == 200){
								this.$emit('getData')
							}
						})
					}
				})
			},
			
			// 修改商品
			toEdit(item){
				this.$utils.
				navigateTo('/pages_order/product/addProduct?id=' 
				+ item.id)
			},
			
			getDataThen(list){
				list.forEach(n => {
					if(!this.selectNumMap[n.id]){
						this.selectNumMap[n.id] = 1
					}
				})
			},
			toSubmit(){
				if (this.checkboxValue.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
					return
				}
				this.$refs.productSubmit.open()
			},
			submit(submitData){
				
				this.$api('createSumOrder', {
					...submitData,
					list : JSON.stringify(this.priceList)
				}, res => {
					if(res.code == 200){
						uni.requestPaymentWxPay(res)
						.then(res => {
							uni.showToast({
								title: '下单成功',
								icon: 'none'
							})
							
							setTimeout(uni.navigateTo, 700, {
								url: '/pages_order/order/order'
							})
						})
					}
				})
				
			},
		},
	}
</script>

<style scoped lang="scss">
	.page {
		.d {
			.item {
				background-color: #fff;
				display: flex;
				padding: 30rpx;
				width: 690rpx;

				.checkbox {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-shrink: 0;
				}

				.image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 20rpx;
					flex-shrink: 0;
				}

				.info {
					flex: 1;
					.title {
						display: flex;
						padding: 6rpx 20rpx;
						justify-content: space-between;
						.text-ellipsis {
							width: 410rpx;
							// width: 280rpx;
							overflow: hidden; //超出的文本隐藏
							text-overflow: ellipsis; //溢出用省略号显示
							white-space: nowrap; //溢出不换行
						}
					}

					.unit {
						font-size: 24rpx;
						padding: 6rpx 20rpx;
						color: #717171;
						display: flex;
						justify-content: space-between;
					}

					.price-box{
						display: flex;
						align-items: end;
						padding-left: 20rpx;
						.price{
							color: $uni-price-color;
							margin-top: 6rpx;
							font-size: 24rpx;
							text{
								font-size: 28rpx;
								font-weight: 900;
							}
						}
						.del{
							font-size: 22rpx;
							color: #888;
							font-weight: 500;
							text-decoration : line-through;
							margin-top: auto;
							margin-left: 10rpx;
						}
					}

					.wan {
						color: $uni-color;
						font-size: 26rpx;
						padding: 10rpx 20rpx;
					}
				}
			}
		}
		
		
		.action {
			width: 700rpx;
			position: fixed;
			bottom: 60rpx;
			left: 25rpx;
			background-color: #fff;
			height: 130rpx;
			border-radius: 65rpx;
			box-shadow: 0 0 6rpx 6rpx #00000010;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;
			z-index: 99;
			.icon {
				position: relative;
				width: 80rpx;
				height: 80rpx;
				margin: 0 20rpx;
		
				image {
					width: 80rpx;
					height: 80rpx;
				}
		
				.num {
					position: absolute;
					right: 10rpx;
					top: 0rpx;
					background-color: $uni-color;
					color: #fff;
					font-size: 18rpx;
					border-radius: 50%;
					height: 30rpx;
					width: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		
			.price {
				.count {
					display: flex;
					font-size: 26rpx;
					align-items: center;
		
					view {
						color: $uni-color;
						margin-left: 10rpx;
						text {
							font-size: 32rpx;
							font-weight: 900;
						}
					}
				}
		
				.text {
					font-size: 22rpx;
					color: #717171;
				}
			}
		
			.btn2 {
				margin-left: auto;
				background-color: $uni-color;
				height: 100%;
				padding: 0 50rpx;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		
		.plus-create{
			position: fixed;
			right: 50rpx;
			bottom: 30vh;
			background-color: $uni-color;
			color: #FFF;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			font-size: 20rpx;
		}
		
		
		.createDetail {
			position: fixed;
			top: 60vh;
			right: 50rpx;
			z-index: 999;
			button{
				all : unset;
			}
			button::after{
				all : unset;
			}
			&>view{
				width: 100rpx;
				height: 100rpx;
				background-color: $uni-color;
				border-radius: 50rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0 0 10rpx 10rpx rgba(#000, 0.1);
				margin-bottom: 30rpx;
			}
		}
	}
</style>