<template>
	<view class="plants_main" :style="{height: screenHeight + 'px'}">
		<nav-bar title='绿植订购'></nav-bar>
		
		<view class="reservation_type">
			<view :class="acIndex == 0? 'type_item_left_ac':'type_item_left'" @click="typeClick(0)">绿植订购</view>
			<view :class="acIndex == 0? 'type_item_right':'type_item_right_ac'" @click="typeClick(1)">我的订单</view>
		</view>
		
		
		<template v-if="acIndex == 0">
			<view class="content_nav">
				<view class="left_nav">
					<view class="left_nav_item" :class="leftIndex == index?'left_nav_item_ac':''" v-for="(item,index) in dataList" :key="index" @click="leftClick(item,index)">
						{{item.name}}
					</view>
				</view>
				<view class="right_nav" v-if="dataList[leftIndex]">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" style="height: 100%;">
						<view class="right_nav_item" v-for="(item,index) in dataList[leftIndex].child" :key="index">
							<image class="goods_img" @click="previewImage(item.url)" :src="item.url" mode="aspectFill"></image>
							<view class="goods_info">
								<view class="goods_name">{{item.greenName}}</view>
								<view class="goods_pice">
									<view style="color: #FC701E;font-size: 32rpx;font-weight: bold;">
										<text style="font-size: 24rpx;">￥ </text> {{item.greenPrice}} / <text style="font-size: 24rpx;">{{item.unit}}</text>
									</view>
									<view class="goods_icon">
										<image @click="jianClick(item,index,dataList[leftIndex])" v-if="item.num > 0" src="/static/firstaid/jian.png"></image>
										<view v-if="item.num > 0" style="font-size: 30rpx;margin: 0 10rpx;">{{item.num}}</view>
										<image @click="addClick(item,index,dataList[leftIndex])" src="/static/firstaid/addIcon.png"></image>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<view class="bottom_btn">
				<view class="info_nav">
					<view style="font-weight: bold;font-size: 30rpx;">合计：
						<text style="font-size: 24rpx;font-weight: 400;color: #F4772D;">￥</text> <text style="color: #F4772D;">{{totalPrice}}</text> 
					</view>
					<view style="font-size: 26rpx;">已选 {{totalNum}} 件
						<text style="margin-left: 24rpx;font-size: 24rpx;" v-if="totalNum > 0 ">配送费：{{delivery}}（满500可减)</text>
					</view>
				</view>
				<view class="btn_nav" @click="addGoods()" v-if="!popShow"> 添加购物车</view>
				<view class="btn_nav" @click="submitClick()" v-else> 提交订单</view>
			</view>
		</template>
		
		<template v-if="acIndex == 1">
			<z-paging 
			id="paging_id"
				ref="paging" 
				v-model="listData" 
				@query="queryList" 
				:fixed="false" 
				class="z-paging_nav" 
				:auto="false" 
				:style="{height: scrollH +'px'}">
				<view class="card_item" v-for="(item,index) in listData" :key="index">
					<view class="order_num">订单编号 {{item.greenOrderInfoList[0].orderId}}</view>
					<view class="order_info">
						<view class="order_img">
							<view class="img_nav" v-for="(child,cindex) in item.greenOrderInfoList" :key="cindex">
								<image @click="previewImage(child.url)" :src="child.url" mode="aspectFill"></image>
								<view class="">{{child.greenName}}</view>
							</view>
						</view>
						<view class="order_tips">共{{item.num}}件</view>
					</view>
					<view class="order_time">
						<view class="date">下单时间：{{item.createdTime}}</view>
						<view class="price"><text style="font-size: 26rpx;">￥</text>{{item.usePrice}}</view>
					</view>
				</view>
			</z-paging>
		</template>
		
		<van-popup v-model="popShow" position="bottom" round class="project_nav" @close="popClose">
			<view class="top">
				<view class="checkbox_nav" @click="allcheckChange()">
					<view class="checkbox" :class="allChecked?'checkbox_ac':''"></view>
					<view>当前已选{{totalNum}}件商品</view>
				</view>
				<view class="delete_icon" @click="clearClick()">
					<image src="/static/firstaid/delete.png"></image>
					<view>清空</view>
				</view>
			</view>
			<view class="center">
				<view class="right_nav_item" v-for="(item,index) in selectList" :key="index" style="padding: 24rpx 0;" @click="rowChange(item,index)">
					<view style="display: flex;align-items: center;width: 100%;">
						<view class="checkbox" :class="item.checked?'checkbox_ac':''"></view>
						<view style="flex: 1;display: flex;">
							<image class="goods_img" :src="item.url" style="width: 140rpx;height: 140rpx;"></image>
							<view class="goods_info">
								<view class="goods_name">{{item.greenName}}</view>
								<view class="goods_pice">
									<view style="color: #FC701E;font-size: 32rpx;font-weight: bold;">
										<text style="font-size: 24rpx;">￥ </text> {{item.greenPrice}} / <text style="font-size: 24rpx;">{{item.unit}}</text>
									</view>
									<view class="goods_icon">
										<image @click.stop="carjianClick(item,index)" v-if="item.num > 0" src="/static/firstaid/jian.png"></image>
										<view v-if="item.num > 0" style="font-size: 30rpx;margin: 0 10rpx;">{{item.num}}</view>
										<image @click.stop="caraddClick(item,index)" src="/static/firstaid/addIcon.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import navBar from "@/components/navBar/index.vue";
	import {callbackRequest,accAdd,accMul} from "@/common/util.js"
	import {greenList,greenType,greenOrder} from "@/common/api.js"
	export default {
		components: {
			navBar
		},
		data() {
			return {
				scrollTop: 0,
				acIndex: 0,
				leftIndex: 0,
				dataList: [],
				totalPrice: 0,
				totalNum: 0,
				popShow: false,
				allChecked: false,
				selectList: [],
				listData: [],
				screenHeight: '',
				scrollH: '',
				delivery: 30,
				discount: 1
			}
		},
		onLoad() {
			this.getList()
			this.screenHeight = uni.getSystemInfoSync().safeArea.height
		},
		onShow() {
			if(this.acIndex == 1) {
				this.$nextTick(() => {
					this.$refs.paging.reload()
				})
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				let params = {
					method: greenOrder,
					currentPage: pageNo,
					isDeleted: "0",
					limit: pageSize,
					userId: uni.getStorageSync('userId')
				}
				callbackRequest(params).then((res) => {
					if (res.returnCode == 1) {
						if(res.returnData.records.length > 0) {
							res.returnData.records.forEach(item => {
								item.num = 0
								if(item.greenOrderInfoList.length > 0) {
									item.greenOrderInfoList.forEach(child => {
										item.num = accAdd(item.num,child.greenNum)
									})
								}
							})
						}
						if(pageNo * pageSize >= res.returnData.total) {
							this.$refs.paging.completeByNoMore(res.returnData.records,true);
							return
						}else{
							this.$refs.paging.completeByNoMore(res.returnData.records,false);
						}
					} else {
						uni.showToast({title: res.returnMsg,icon: 'none'});
					}
				})
			},
			
			getType() {
				return new Promise((resolve,reject) => {
					let params = {
						method: greenType,
						dataType: 'green_flower',
						isDeleted: '0'
					}
					callbackRequest(params).then((res) => {
						if (res.returnCode == 1) {
							resolve(res.returnData)
						} else {
							uni.showToast({title: res.returnMsg,icon: 'none'});
						}
					})
				})
			},
			
			getList() {
				let params = {
					method: greenList,
					isDeleted: "0",
					type: '',
					userId: uni.getStorageSync('userId'),
					currentPage: 1,	
					limit: 10000
				}
				callbackRequest(params).then((res) => {
					if (res.returnCode == 1) {
						this.dataList = []
						this.getType().then(typeList => {
							typeList.forEach(item => {
								var arr = {
									name: '',
									child: []
								}
								res.returnData.records.forEach(good => {
									if(item.dataCode == good.type) {
										good.num = 0
										good.checked = false
										arr.child.push(good)
									}
								})
								arr.name = item.dataValue
								this.dataList.push(arr)
							})
							this.dataList.forEach((item,index) => {
								if(item.child.length <= 0) {
									this.dataList.splice(index,1)
								}
							})
						})
						console.log('this.dataList',this.dataList)
					} else {
						uni.showToast({title: res.returnMsg,icon: 'none'});
					}
				})
			},
			
			submitClick() {
				var isOrder = false
				if(this.selectList.length <= 0) {
					uni.showToast({title: '请先选择商品',icon: 'none'});
					return
				}
				for(let i=0;i<this.selectList.length;i++) {
					if(this.selectList[i].checked && this.selectList[i].num > 0) {
						isOrder = true
					}
				}
				if(!isOrder) {
					uni.showToast({title: '请勾选商品数量',icon: 'none'});
					return
				}
				this.popShow = false
				
				this.$nextTick(() => {
					uni.navigateTo({
						url: '/pages/lifeService/greenOrder?discount=' + this.discount + '&delivery=' + this.delivery,
						success: res => {
							this.selectList.forEach((item,index) => {
								if(!item.checked || item.num <= 0) {
									this.selectList.splice(index,1)
								}
							})
							res.eventChannel.emit('selectChange', { data: this.selectList })
						}
					});
				})
				
			},
			
			typeClick(num) {
				this.acIndex = num
				if(this.acIndex == 1) {
					this.$nextTick(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select("#paging_id").boundingClientRect((data) => {
							this.scrollH = this.screenHeight - data.top
						}).exec();
						this.$refs.paging.reload()
					})
				}
			},
			
			leftClick(row,index) {
				this.leftIndex = index
			},
			
			jianClick(item,index,parent){
				item.num = item.num - 1
				if(item.num <= 0) {
					item.checked = false
				}
				this.handleGoods()
			},
			
			addClick(item,index,parent) {
				item.num++
				item.checked = true
				this.handleGoods()
			},
			
			carjianClick(item) {
				item.num = item.num - 1
				if(item.num == 0) {
					item.checked = false
				}
				this.handleSelect()
			},
			
			caraddClick(item) {
				item.num++
				this.handleSelect()
			},
			
			addGoods() {
				if(this.selectList.length <= 0) {
					uni.showToast({title: '请选择商品',icon: 'none'});
					return
				}
				this.popShow = true
				this.allChecked = true
				this.handleSelect()
			},
			
			allcheckChange() {
				this.allChecked = !this.allChecked
				if(!this.allChecked) {
					this.selectList.forEach(item => {
						item.checked = false
					})
				}else{
					this.selectList.forEach(item => {
						item.checked = true
					})
				}
			},
			
			rowChange(e,index) {
				e.checked = !e.checked
				this.handleSelect()
			},
			
			handleSelect() {
				// 判断全选按钮状态
				let isNo = true
				for(let i=0;i<this.selectList.length;i++) {
					if(this.selectList[i].checked) {
						isNo = false
						break
					}
				}
				
				if(!isNo) {
					this.allChecked = true
				}else{
					this.allChecked = false
				}
				
				this.totalNum = 0
				this.totalPrice = 0
				
				this.selectList.forEach(c => {
					if(c.checked) {
						if(c.num > 0) {
							this.totalNum = accAdd(this.totalNum,c.num)
							this.totalPrice = accAdd(this.totalPrice,accMul(c.greenPrice,c.num))
						}
					}
				})
				if(this.totalPrice < 500 && this.totalNum > 0) {
					this.totalPrice = accAdd(this.totalPrice,this.delivery)
					this.discount = 1
					this.delivery = 30
				}else{
					this.discount = 2
					this.delivery = 0
				}
			},
			
			clearClick() {
				this.selectList = []
				this.allChecked = false
				this.totalNum = 0
				this.totalPrice = 0
				this.dataList.forEach(item => {
					item.child.forEach(c => {
						c.num = 0
						c.checked = false
					})
				})
				console.log('this.dataList',this.dataList)
			},
			
			popClose() {
				let arr = []
				this.selectList.forEach(c => {
					this.dataList.forEach(item => {
						item.child.forEach(j => {
							if(c.id == j.id) {
								j.checked = c.checked
								j.num = c.num
								if(!c.checked) {
									j.num = 0
								}
							}
						})
					})
				})
			},
			
			handleGoods() {
				this.totalNum = 0
				this.totalPrice = 0
				this.selectList = []
				this.dataList.forEach(item => {
					item.child.forEach(c => {
						if(c.num > 0) {
							this.selectList.push(c)
							this.totalNum = accAdd(this.totalNum,c.num)
							this.totalPrice = accAdd(this.totalPrice,accMul(c.greenPrice,c.num))
						}
					})
				})
				if(this.totalPrice < 500 && this.totalNum > 0) {
					this.totalPrice = accAdd(this.totalPrice,this.delivery)
					this.discount = 1
					this.delivery = 30
				}else{
					this.discount = 2
					this.delivery = 0
				}
			},
			
			previewImage(img) {
				uni.previewImage({
					urls: [img]
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.plants_main {
		width: 100%;
		background: #F2F6FA;
		padding-top: 100rpx;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.reservation_type {
		width: 100%;
		display: flex;
		height: 90rpx;
		margin-top: 20rpx;
		.type_item_left {
			bottom: -16rpx;
			flex: 1;
			background-color: #E8ECF2;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #4B5B68;
			line-height: 72rpx;
			height: 72rpx;
			text-align: center;
			position: relative;
		}

		.type_item_left:before {
			content: '';
			position: absolute;
			bottom: 0;
			right: 0;
			border-top: 72rpx solid #E8ECF2;
			border-right: 36rpx solid #ffffff;
			width: 0;
			height: 0;
		}

		.type_item_right {
			bottom: -16rpx;
			flex: 1;
			background-color: #E8ECF2;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #4B5B68;
			line-height: 72rpx;
			height: 72rpx;
			text-align: center;
			position: relative;
		}

		.type_item_right:before {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			border-top: 72rpx solid #E8ECF2;
			border-left: 36rpx solid #ffffff;
			width: 0;
			height: 0;
		}

		.type_item_left_ac {
			flex: 1;
			height: 88rpx;
			background-color: #ffffff !important;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 88rpx;
			text-align: center;
			color: #00ADA6 !important;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
		}

		.type_item_right_ac {
			flex: 1;
			height: 88rpx;
			background-color: #ffffff !important;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			line-height: 88rpx;
			text-align: center;
			color: #00ADA6 !important;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
		}
	}
	.content_nav {
		margin-top: 24rpx;
		height: calc(100% - 140rpx);
		// padding: 24rpx;
		// box-sizing: border-box;
		display: flex;
		.left_nav {
			width: 200rpx;
			height: 100%;
			background-color: #F2F6FA;
			padding-bottom: 130rpx;
			overflow-y: auto;
			.left_nav_item {
				width: 100%;
				height: 96rpx;
				font-weight: bold;
				font-size: 28rpx;
				text-align: center;
				line-height: 96rpx;
			}
			.left_nav_item_ac {
				background: #FFFFFF;
				color: #00ADA6;
				position: relative;
			}
			.left_nav_item_ac:before {
				position: absolute;
				content: '';
				width: 12rpx;
				height: 32rpx;
				background: linear-gradient( 180deg, #5BCE9D 0%, #00ADA6 100%);
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-top-right-radius: 100%;
				border-bottom-right-radius: 100%;
			}
		}
		.right_nav {
			flex: 1;
			background-color: #ffffff;
			padding-bottom: 130rpx;
		}
	}
	.right_nav_item {
		display: flex;
		padding: 24rpx;
		box-sizing: border-box;
		.goods_img {
			width: 176rpx;
			height: 176rpx;
			border-radius: 20rpx;
			display: block;
		}
		.goods_info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding: 24rpx;
			box-sizing: border-box;
			.goods_name {
				font-weight: bold;
				font-size: 32rpx;
				color: #0E1A24;
			}
			.goods_pice {
				display: flex;
				justify-content: space-between;
			}
			.goods_icon {
				display: flex;
				// width: 140rpx;
				justify-content: space-between;
				align-items: center;
				image {
					width: 40rpx;
					height: 40rpx;
					display: block;
				}
			}
		}
	}
	.bottom_btn {
		z-index: 999;
		padding-left: 44rpx;
		width: calc(100% - 48rpx);
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 16rpx 2rpx #E7EFF9;
		position: fixed;
		bottom: 20rpx;
		border-radius: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: space-between;
		.info_nav {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
		}
		.btn_nav {
			width: 216rpx;
			height: 100%;
			background: linear-gradient( 180deg, #5BCE9D 0%, #00ADA6 100%);
			border-radius: 0rpx 50rpx 50rpx 0rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 100rpx;
			text-align: center;
		}
	}
	/deep/.van-overlay {
		z-index: 888 !important;
	}
	.project_nav {
		height: 70vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		z-index: 990 !important;
		.top {
			font-weight: 400;
			font-size: 28rpx;
			color: #0E1A24;
			width: 100%;
			height: 88rpx;
			background: #F6F9FF;
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;
			box-sizing: border-box;
			.delete_icon {
				display: flex;
				align-items: center;
				image{
					// flex: 1;
					width: 30rpx;
					height: 30rpx;
					display: block;
					margin-right: 14rpx;
				}
			}
		}
		.center {
			padding: 0 0 140rpx 24rpx;
			box-sizing: border-box;
			height: calc(100% - 90rpx);
			overflow: auto;
		}
	}
	.checkbox_nav {
		display: flex;
	}
	.checkbox {
		height: 40rpx;
		width: 40rpx;
		border: 1px solid #c8c9cc;
		border-radius: 50%;
		margin-right: 24rpx;
	}
	.checkbox_ac {
		position: relative;
		height: 40rpx;
		width: 40rpx;
		color: #fff;
		background-color: #1989fa;
		border-color: #1989fa;
	}
	.checkbox_ac:before {
		position: absolute;
		content: "\2713";
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	/deep/.van-checkbox__label {
		flex: 1;
	}
	.z-paging_nav {
		padding: 0 24rpx;
		box-sizing: border-box;
	}
	.card_item {
		width: 100%;
		min-height: 202rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 24rpx;
		padding: 24rpx;
		box-sizing: border-box;
		.order_num {
			font-weight: 400;
			font-size: 28rpx;
			color: #0E1A24;
		}
		.order_info {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 28rpx;
			.order_img {
				display: flex;
				flex: 1;
				overflow-x: auto;
				.img_nav {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 24rpx;
					font-weight: 400;
					font-size: 28rpx;
					color: #0E1A24;
					view {
						text-align: center;
						width: 170rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					image {
						width: 170rpx;
						height: 170rpx;
						border-radius: 20rpx;
						display: block;
						margin-bottom: 24rpx;
					}
				}
			}
			.order_tips {
				width: 120rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #4B5B68;
				text-align: right;
			}
		}
		.order_time {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 28rpx;
			.date {
				font-weight: 400;
				font-size: 24rpx;
				color: #97A5B1;
			}
			.price {
				font-weight: bold;
				font-size: 36rpx;
				color: #0E1A24;
			}
		}
	}
	
	/* 隐藏滚动条 */
	.order_img::-webkit-scrollbar {
	  width: 0;
	  height: 0;
	}
	 
	/* 可选，如果需要滚动条轨道也隐藏 */
	.order_img::-webkit-scrollbar-track {
	  background-color: transparent;
	}
</style>