<template>
	<view :class="[AppTheme]" class="contrin">
		<!-- 头部切换 -->
		<view class="head_case bg-primary">
			<view class="head_case_item" @click="caseheaditem(index)" v-for="(item, index) in typeset" :key="index"
				:class="[senumber === index ? 'head_case_item_back' : '']">
				<u-icon :name="item.iconname" labelColor="#ffffff" :label="item.casetitle+' '+(index === 0?ordermess.selelanditemtext.name:'')" :color="setbackcolor(index)" size="26"></u-icon>
			</view>
		</view>
		<!-- 种子列表 -->
		<scroll-view scroll-y="true" class="seedlist" v-if="senumber === 0">
			<view class="seed_item" :class="index===orderseedlist.length?'goodList-final ':''"
				v-for="(item, index) in orderseedlist" :key="index">
				<image class="seeditem_thumbnail" :src="item.seeditem.ripe_pic" mode="aspectFill"></image>
				<view class="seeditem_deti">
					<view class="seeditem_deti_title">{{ item.seeditem.seed_name }}</view>
					<view class="seeditem_deti_subtitle">
						最低种植：{{ item.seeditem.min_plant_area }}m²；预估产量：{{ item.seeditem.seed_yield }}kg/m²</view>
					<view class="priceanum">
						<view class="sedprice text-neutral">￥{{ item.seeditem.price }}</view>
						<view class="unumber_box">
							<u-icon size="18" color="#222" name="minus" @click="changeseednum('minus', index)"></u-icon>
							<view class="unumnum">{{ item.seednum }}</view>
							<u-icon size="18" color="#222" name="plus" @click="changeseednum('plus', index)"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 待播种 -->
		<view v-if="senumber === 1" class="seedlist">待播种</view>
		<!-- 种植中 -->
		<view v-if="senumber === 2" class="seedlist">种植中</view>
		<!-- 已成熟 -->
		<view v-if="senumber === 3" class="seedlist">已成熟</view>
		<view class="vacantplot">
			<view class="title_price">
				<view class="footer_case_title">剩余土地:{{landareanum-seedarea()}}m²</view>
				<view class="footer_case_price">已选:{{ seedarea() }}/{{ landareanum }}m²,总计:
					<view class="text-neutral" style="font-size: 30rpx;">{{ seedtariff() }}</view>元
				</view>
			</view>
			<view class="button1 bg-linear-gradient" @click="configseed()">
			确认
			</view>
		</view>
		<!-- 通知 -->
		<view class="load_window">
			<u-toast ref="uToast" />
		</view>
		<view style="height: 130rpx;"></view>
	</view>
</template>

<script>
	import Landapi from '@/api/land/index.js';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				// 订单信息
				ordermess: {},
				// 空闲土地面积
				landareanum: 0,
				//当前选中类型下标
				senumber: 0,
				typeset: [{
					casetitle: '空闲编码',
					iconname: 'hourglass-half-fill'
				}],
				//种子列表
				seeddatalist: [],
				//选中种子
				orderseedlist: [],
				// 选择完毕种子后订单信息
				seedordermy: {},
				//追加种子订单
				addseedparams: null,
				orderid:'',
				party_id:''
			};
		},
		onLoad(options) {
			this.orderid=options.orderid
			this.party_id=options.id
			this.vueinit();
			this.getList();
		},
		methods: {
			//初始化页面所需数据
			vueinit() {
				var that = this;
				that.ordermess = that.$store.state.landleaseorder;
			 
				that.landareanum = parseInt(that.ordermess.selelanditemtext.area);
			},
			//进入页面获取种子数据
			getList() {
				var that = this;
				Landapi.seed_list({
					type: that.senumber + 1,
					types:1,
					p: 1,
					orderid:that.orderid
				}).then(res => {
					if (res.status == 1) {
						
						that.orderseedlist = [];
						that.seeddatalist = res.data;
						that.seeddatalist.forEach((item, index) => {
							that.orderseedlist.push({
								//种子详情
								seeditem: item,
								//种植面积
								seednum: 0
							});
						});
						console.log(that.orderseedlist,'that.orderseedlist')
					} else {
						that.$api.msg('获取种子数据失败!');
					}
				});
			},
			//设置图标颜色
			setbackcolor(senumber) {
				if (senumber === this.senumber) {
					return '#FFFFFF';
				} else {
					return '#56AB2F';
				}
			},
			//切换选中模块
			caseheaditem(senumber) {
				this.senumber = senumber;
				this.getList();
			},
			//更改步进器值
			changeseednum(changtype, index) {
				var that = this;
				
				console.log(changtype,'changtype');
				console.log(index,'index')
				if (that.orderseedlist.length > 0) {
					if (changtype === 'minus') {
						if (that.orderseedlist[index].seednum > that.orderseedlist[index].seeditem.min_plant_area) {
							that.orderseedlist[index].seednum = that.orderseedlist[index].seednum - 1;
						} else {
							if (that.orderseedlist[index].seednum - that.orderseedlist[index].seeditem.min_plant_area >=
								0) {
								that.orderseedlist[index].seednum = that.orderseedlist[index].seednum - that.orderseedlist[
									index].seeditem.min_plant_area;
							}
						}
					} else if (changtype === 'plus') {
						let ocedlandarea = 0;
						 
						console.log(that.orderseedlist,'that.orderseedlist')
						 
						that.orderseedlist.forEach((item, index) => {
							 
							ocedlandarea = ocedlandarea + item.seednum;
						});
						console.log(ocedlandarea,'ocedlandarea');
						
						//判断当前可用面积是否有剩余
						if (ocedlandarea < that.landareanum) {
							//判断是否满足最低种植面积，满足则每次+1，否则补充为最低种植面积
							 
							if (that.orderseedlist[index].seednum >= that.orderseedlist[index].seeditem.min_plant_area) {
								//判断土地是否满足增加种植量
								if (that.landareanum - ocedlandarea >= 1) {
									that.orderseedlist[index].seednum = that.orderseedlist[index].seednum + 1;
								} else {
									that.$refs.uToast.show({
										title: '选择的种子超出地块面积!',
										type: 'error'
									});
								}
							} else  {
								//判断土地是否满足增加最低种植量
							 
								if (that.landareanum - ocedlandarea >= that.orderseedlist[index].seeditem.min_plant_area) {
									that.orderseedlist[index].seednum = that.orderseedlist[index].seednum + that
										.orderseedlist[index].seeditem.min_plant_area;
								} else {
									// #ifdef H5
									uni.showToast({
										title: "选择的种子超出地块面积!",
										icon: "none"
									})
									//#endif
									//#ifndef H5
									// ...
									that.$refs.uToast.show({
										title: '选择的种子超出地块面积!',
										type: 'error'
									});
									// #endif
								}
							}
						} else {
							that.$refs.uToast.show({
								title: '该地块选择的种子已经够了，可以下单了~',
								type: 'success'
							});
						}
					}
				}
			},
			//反馈信息
			showToast(type, promptstatement) {
				var that = this;
				that.$refs.uToast.show({
					type: type,
					title: promptstatement
				});
			},

			// 实时计算已选种子占用土地面积
			seedarea() {
				var comattribute = 0;
				this.orderseedlist.forEach(item => {
					comattribute = comattribute + item.seednum;
				});
				return comattribute;
			},
			// 实时计算已选种子总金额
			seedtariff() {
				var comattribute = 0;
				this.orderseedlist.forEach(item => {
					comattribute += item.seednum * parseFloat(item.seeditem.price);
				});
				return parseFloat(comattribute).toFixed(2);
			},
			//确定选择完毕种子
			configseed() {
				var that = this;
				// let orderlist = that.orderseedlist;
				let orderlist = [];
				// that.orderseedlist = [];
				that.orderseedlist.forEach((item, index) => {
					if (item.seednum !== 0) {
						orderlist.push(item);
					}
				});
				that.seedordermy = {
					seedtariff: that.seedtariff(),
					seedarea: that.seedarea(),
					allarea: that.landareanum,
					orderseedlist: orderlist
				};
				if (that.seedordermy.orderseedlist.length == 0) {
					uni.showToast({
						title: "请选择种子",
						icon: "none"
					})
				} else {
					that.ordermess.seedordermy = that.seedordermy;
					that.ordermess.seednumber=that.seedordermy.seedarea;
					that.$store.commit('setlandleaseorder', that.ordermess);
					uni.redirectTo({
						url: '/pagesB/pages/creatorder/creatorder?id=' + that.party_id+'&soil_id='+this.orderid
					})
				}
			}
		}
	};
</script>
<style lang="scss">
	.contrin {
		background-color: #fafafa;
		min-height: 100vh;
	}

	.head_case {
		display: flex;
		justify-content: center;
	}

	.head_case_item {
		width: 100%;
		text-align: center;
		padding: 25rpx 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.head_case_title {
		font-size: 24rpx;
		margin-top: 15rpx;
	}

	.head_case_item_back {
		color: #ffffff;
	}

	.seedlist {
		margin: 0 2.5%;
		width: 95%;
	}

	.seed_item {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 25rpx 0;
		background-color: #ffffff;
		border-radius: 15rpx;
		padding: 15rpx;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
	}

	.seeditem_thumbnail {
		width: 140rpx;
		height: 140rpx;
		border-radius: 10rpx;
	}

	.seeditem_deti {
		margin-left: 35rpx;
	}

	.seeditem_deti_title {
		color: #000000;
		font-size: 30rpx;
	}

	.seeditem_deti_subtitle {
		font-size: 26rpx;
		color: #999999;
		margin: 25rpx 0 50rpx 0;
	}

	.priceanum {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sedprice {
		font-size: 32rpx;
		font-weight: 800;
	}

	.load_window {
		position: fixed;
		top: 50%;
		left: 50%;
		width: 100%;
		transform: translate(-50%, -50%);
	}

	.unumber_box {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.unumnum {
		font-size: 28rpx;
		color: rgb(50, 50, 51);
		margin: 0 25rpx;
	}

	.vacantplot {
		position: fixed;
		width: 100%;
		padding: 20rpx 25rpx;
		bottom: 0rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;

		.title_price {
			width: 50%;
		}


		.button1 {
			width: 40%;
			color: #fff;
			height: 75rpx;
			line-height: 75rpx;
			justify-content: center;
			display: flex;
			font-size: 32rpx;
			margin-right: 25rpx;
			border-radius: 60rpx;
		}
	}



	.footer_case_title {
		font-size: 30rpx;
		color: #666;
		padding: 10rpx 0;
	}

	.footer_case_price {
		display: flex;
		font-size: 28rpx;
		color: #666;
		margin-top: 10rpx;
	}
</style>
