<template>
	<view class="container" :class="[AppTheme]">
		<view class="parcel_information">

			<view class="mess_deitle_one">
				<view class="mess_deitle_1">
					<view class="seed_one">
						<view class="soil_mass">
							<image :src="seedlist.soil_cover_pic"></image>
						</view>
						<view class="soil_mass_1">
							<view class="soil_mass_2">{{seedlist.soil_name}}</view>
							<view class="soil_mass_2">{{seedlist.name}}</view>
							<view class="soil_mass_3">{{seedlist.update_time}}更新</view>
						</view>
					</view>
					<view class="soil_mass_5">

						<u-icon name="arrow-right" :bold="true" color="#999" size="18" label="土地详情" labelPos="left"
							labelSize="13" @click="orderdetail()">
						</u-icon>
					</view>
				</view>
				<!-- <view class="seed_1">
					<view class="seed_2">
						<view class="seed_2_1">
							<view class="seed_2_2">种植日期</view>
							<view class="seed_2_3">{{seedlist.plant_time}}</view>
						</view>
						<view class="seed_2_1">
							<view class="seed_2_2">成熟度</view>
							<view class="seed_2_3">{{seedlist.seed_status}}</view>
						</view>
					</view>
					<view class="seed_2">
						<view class="seed_2_1">
							<view class="seed_2_2">开垦</view>
							<view class="seed_2_3">不需要</view>
						</view>
						<view class="seed_2_1">
							<view class="seed_2_2">浇水</view>
							<view class="seed_2_3">不需要</view>
						</view>
					</view>
				</view> -->
			</view>
			<view class="mess_deitle_2">
				<view class="farm_name">土地装饰</view>

				<view class="box_form_1">
					<view class="titem" v-for="(item, index) in operatorlist" :key="index">
						<view class="titems" @click="openoparte(item,index)">
							<view class="titem_1">
								<image mode="aspectFill" :src="item.img"></image>

							</view>
							<view class="titem_4">
								<view class="titem_3">{{item.title}}</view>
								<view class="titem_5">{{item.content}}</view>
							</view>

						</view>
						<view class="bor_solp"></view>
					</view>
				</view>


			</view>


		</view>
		<u-modal :show="show" @confirm="confirm" @cancel="cancel" :showCancelButton="true" width="650rpx">
			<view class="model_list">
				<view class="imgs">
					<image :src="operator.img"></image>
				</view>
				<view class="model_two">
					<view class="model_two_1">{{operator.title}}</view>
					<view class="model_two_2">{{operator.content}}</view>
				</view>
				<view class="model_one">
					<view class="model_one_1">
						<view class="model_one_3">操作对象</view>
						<view class="model_one_4" @click="pakxuan2()">{{operatorname2}}
							<u-icon name="arrow-right" :bold="true" color="#999" size="18"></u-icon>
						</view>

					</view>
					<view class="bor_solp"></view>
					<view class="model_one_1">
						<view class="model_one_3">操作详情</view>
						<view class="model_one_4" @click="pakxuan()">{{operatorname}}
							<u-icon name="arrow-right" :bold="true" color="#999" size="18"></u-icon>
						</view>

					</view>


					<view class="bor_solp"></view>
					<view class="model_one_1">
						<view class="model_one_3">操作费用</view>
						<view class="model_one_2">{{price}} 元</view>
					</view>
					<view class="bor_solp"></view>
					<view class="model_one_1">

						<view class="model_one_4">备注说明</view>
						<view>
							<u--input placeholder="备注说明" border="none" fontSize="14" v-model="value" @change='change'>
							</u--input>
						</view>

					</view>
					<!-- <view class="bor_solp"></view> -->
				</view>

			</view>


		</u-modal>
		<view class="servie bg-primary" @click="navTo('/pagesE/pages/serviceorder/serviceorder')">历史服务</view>
		<u-picker :show="show1" :columns="columns" @cancel='cancels' @confirm='confirms' keyName="label"></u-picker>
		<u-picker :show="show2" :columns="columns2" @cancel='cancels2' @confirm='confirms2' keyName="label"></u-picker>

		<payment ref="payment" :channel="9" :alipay="true" :weixinpay="true" :zhtpay="true"></payment>
	</view>
</template>

<script>
	import Landapi from '@/api/land/index.js';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				//顶部距离
				scrollTop: 0,

				customstyle: {
					background: '#F4F6F8'
				},
				wxpay: '微信支付',
				yepay: '余额支付',
				seedlist: '',

				operatorlist: [],
				show: false,
				value: '',
				value1: '',
				operator: '',
				operatorname: '',
				operatorname2: '',
				columns: [],
				columns2: [],
				show1: false,
				show2: false,
				price: 0,
				operator_price: '',
				operator_unit: '',
				operator_index: '',
				updaordermess: {},
				area: '',
				seed_id: '',
				orderid: '',
				yuantotalprice: ''


			};
		},
		onLoad(options) {
			this.orderid = options.id
			this.decoration(options.id)

		},

		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop;
		},

		methods: {
			navTo(url) {
				this.$until.toUrl(url);
			},

			change(value) {

				this.value = value
			},

			pakxuan() {
				this.show1 = true
				this.show2 = false
			},
			pakxuan2() {
				this.show2 = true
				this.show1 = false
			},
			confirm() {


				let that = this
				let tmplIdsone = that.$config.temlist;
				if (tmplIdsone) {
					that.$until.requestSubscribeMessage([tmplIdsone['orderSuccess']], tmplIdsone, function() {
						that.settlement()
					});
				} else {
					that.settlement()
				}
				this.show = false
			},
			confirms(e) {

				let that = this
				that.show1 = false
				that.operatorname = e.value[0].label
				that.operator_price = e.value[0].operator_price
				that.operator_unit = e.value[0].operator_unit
				that.operator_index = e.value[0].index
				that.yuantotalprice = parseFloat(that.area * that.operator_price).toFixed(2)
				that.price = parseFloat(that.yuantotalprice * (that.seedlist.level_radio / 100)).toFixed(2)
			},
			confirms2(e) {

				let that = this
				that.show2 = false
				that.operatorname2 = e.value[0].label
				that.area = e.value[0].seed_num
				that.seed_id = e.value[0].seed_id
				that.yuantotalprice = parseFloat(that.area * that.operator_price).toFixed(2)
				that.price = parseFloat(that.yuantotalprice * (that.seedlist.level_radio / 100)).toFixed(2)

			},
			cancels() {
				this.show1 = false
			},
			cancels2() {
				this.show2 = false
			},
			cancel() {
				let that = this
				that.show = false
				that.price = ''
				that.operator_price = ''
				that.operator_unit = ''
				that.value1 = ''
				that.operator_index = ''
			},
			orderdetail() {
				uni.navigateTo({
					url: '/pagesB/pages/orderdeleti/orderdeleti?orderid=' + this.orderid
				})
			},

			openoparte(item) {
				let that = this
				that.show = true
				that.operator = item
				that.columns = item.opertype
				that.columns2 = item.seedarr
				that.operatorname = item.opertype[0][0].label
				that.operator_price = item.opertype[0][0].operator_price
				that.operator_unit = item.opertype[0][0].operator_unit
				that.operator_index = item.opertype[0][0].index
				that.operatorname2 = item.seedarr[0][0].label
				that.area = item.seedarr[0][0].seed_num
				that.seed_id = item.seedarr[0][0].seed_id
				that.yuantotalprice = parseFloat(that.area * that.operator_price).toFixed(2)
				that.price = parseFloat(that.yuantotalprice * (that.seedlist.level_radio / 100)).toFixed(2)

			},

			decoration(orderid) {

				let that = this;
				let parms = {
					id: orderid
				};
				Landapi.decoration(parms).then(res => {
					console.log(res, "种子信息")
					if (res.status == 1) {
						that.operatorlist = res.data.operator,
							that.seedlist = res.data.data
					} else {
						that.$api.msg(res.msg);
					}
				});
			},

			// 结算订单
			settlement() {
				var that = this;
				//支付金额
				that.updaordermess.order_money = that.price;

				//订单id
				that.updaordermess.order_id = that.seedlist.id;
				// 工单id
				that.updaordermess.operator_id = that.operator.id;
				//操作详情
				that.updaordermess.operator_deatil = that.operatorname;
				//操作项下标
				that.updaordermess.operator_index = that.operator_index;
				//备注
				that.updaordermess.remark = that.value;
				that.updaordermess.type = 2;
				//种子订单id
				that.updaordermess.soil_id = that.seedlist.soil_id
				that.updaordermess.seed_id = that.seed_id;
				that.updaordermess.payprice = that.price;
				that.updaordermess.money = that.price;
				that.updaordermess.yuantotalprice = that.yuantotalprice;
				if (that.updaordermess.id) {
					that.$refs.payment.payopen(that.updaordermess);
				} else {
					that.$paycenter.ct_operator_order(that.updaordermess).then(res => {
						if (res.status === 0) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						} else {

							// 已授权,跳转去支付页面
							that.updaordermess.id = res.data;
							that.$refs.payment.payopen(that.updaordermess);
						}
					})
				}

			},

		}
	};
</script>

<style lang="scss">
	table {
		width: 100%;
		border-color: #DFE2E5;
		border-collapse: collapse;
		text-align: center;
		color: #303133;

	}

	table,
	th,
	td {
		border: 1px solid #999;
		padding: 10rpx;
	}

	.container {
		position: relative;

	}

	.head_backn {
		width: 100%;
		z-index: 99;
		padding: 20rpx 20rpx 0rpx 20rpx;

		.icon_view {
			width: 100%;
			text-align: center;
			margin-top: 10rpx;
		}
	}

	.servie {
		height: 50px;
		color: #FFF;
		text-align: center;
		line-height: 50px;
		width: 100%;
		bottom: 0;
		position: fixed;
	}

	.parcel_information {
		// width: 93%;
		// margin: 0 3.5%;

	}

	::v-deep .u-modal__content[data-v-0156a215] {
		padding: 0;

		justify-content: flex-start;
		flex-direction: column-reverse;

	}


	.model_list {
		display: flex;
		flex-direction: column;

		.imgs {
			text-align: center;

			// display: flex;
			// align-items: center;
			image {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.model_two {
			display: flex;
			flex-direction: column;
			align-items: center;

			.model_two_1 {
				font-size: 32rpx;
				padding: 20rpx;
			}

			.model_two_2 {
				font-size: 26rpx;
				color: #999;
			}
		}

		.model_one {
			display: flex;
			flex-direction: column;
			padding: 25rpx;

			.model_one_7 {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				align-items: center;

				.model_one_8 {
					width: 100%;
					font-size: 32rpx;
				}

				.model_one_9 {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					font-size: 32rpx;
				}
			}

			.model_one_1 {
				display: flex;
				justify-content: space-between;
				padding: 30rpx;
				align-items: center;

				.model_one_2 {
					font-size: 30rpx;
					color: #999;
				}

				.model_one_3 {
					font-size: 30rpx;
				}

				.model_one_4 {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 32rpx;

				}
			}
		}
	}


	.mess_deitle {
		width: 100%;
		padding: 30rpx 0;
		margin: 25rpx 0;
		background-color: #ffffff;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
		border-radius: 15rpx;
	}

	.mess_deitle_2 {
		width: 100%;
		padding: 20rpx 0;
		margin: 25rpx 0;
		background-color: #ffffff;

		.farm_name_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

			.farm_name_2 {
				font-size: 38rpx;
			}

			.farm_name_3 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #999;
				font-size: 28rpx;
				margin-right: 2vh;
			}
		}

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

			.titems_one_1 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0 20rpx;

				image {
					background-color: #DFE2E5;
					width: 150rpx;
					height: 150rpx;
				}

				.titems_one_2 {
					margin-left: 2vh;
					font-size: 30rpx;
					font-weight: 600;
				}
			}


			.titems_one_3 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 4vh;
				font-size: 30rpx;
				color: #999;
			}
		}
	}

	.mess_deitle_3 {
		width: 100%;
		padding: 20rpx 0;
		margin: 25rpx 0;
		background-color: #ffffff;

		.farm_name_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

			.farm_name_2 {
				font-size: 38rpx;
			}

			.farm_name_3 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #999;
				font-size: 28rpx;
				margin-right: 2vh;
			}
		}

		.tab_vie {

			text-align: center;
			padding: 30rpx 0;

		}
	}


	.mess_deitle_4 {
		width: 100%;
		padding: 20rpx 0;
		margin: 25rpx 0;
		background-color: #ffffff;

		.farm_name_4 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;

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

				image {
					width: 45rpx;
					height: 45rpx;
				}

				font-size: 32rpx;
			}

			.farm_name_6 {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				color: #999;
				font-size: 26rpx;
				margin-right: 2vh;
			}
		}

	}

	.mess_deitle_one {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 20rpx;

		background-color: #ffffff;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);

		.seed_1 {
			display: flex;

			flex-direction: column;
			padding: 20rpx 60rpx 0 0;

			.seed_2 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;

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

					.seed_2_2 {
						background-color: #DFE2E5;
						width: 150rpx;
						line-height: 70rpx;
						text-align: center;
						font-size: 26rpx;
					}

					.seed_2_3 {
						font-size: 26rpx;
						margin-left: 1vh;
					}
				}
			}
		}
	}

	.mess_deitle_1 {
		display: flex;
		justify-content: space-evenly;
		align-items: center;

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

		}

		.soil_mass {
			width: 30%;

			image {
				width: 150rpx;
				height: 150rpx;
			}
		}

		.soil_mass_1 {
			margin-left: 2vh;

			.soil_mass_2 {
				font-size: 32rpx;
				font-weight: 600;
				-webkit-line-clamp: 1;
				display: -webkit-box;

				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				padding: 10rpx 0rpx;
			}

			.soil_mass_3 {
				font-size: 28rpx;
				color: #999;
				padding: 10rpx 0rpx;
			}

			.soil_mass_4 {
				background-color: palegreen;
				width: 90rpx;
				line-height: 40rpx;
				text-align: center;
				border-radius: 10rpx;
				font-size: 26rpx;
				color: #fff;
				padding: 10rpx 0rpx;
			}
		}

		.soil_mass_5 {

			display: flex;
			justify-content: flex-start;
			align-items: center;
			// margin-right: 4vh;
			font-size: 28rpx;
			color: #999;

		}
	}

	.order_item {
		width: 100%;
		margin: 25rpx 0;
		padding: 30rpx 0;
		background-color: #ffffff;
		box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.08);
	}

	.farm_name {
		font-size: 34rpx;
		color: #000;
		padding: 0 20rpx;
	}

	.bor_solp {
		background-color: #999;
		height: 1rpx;
		width: 100%;
		transform: scaleY(0.3);
		margin: 0rpx 0;
	}

	.order_detil {
		padding: 0 20rpx;
		text-align: center;
	}

	.seed_item_thumbnail {
		object-fit: cover;
		border-radius: 10rpx;
		width: 100%;
		height: 300rpx;
	}

	.right_deile {
		width: 100%;
	}

	.article_title_p2 {
		font-size: 26rpx;
		color: #000;
		margin: 15rpx 0;
	}

	.box_form {
		margin: 0 5%;
		width: 95%;
	}

	.box_form_1 {
		padding: 20rpx;

		.titem {
			display: flex;
			flex-direction: column;

			.titems {
				display: flex;
				justify-content: flex-start;
				padding: 20rpx;
				align-items: center;

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

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 10rpx;
					}

					.titem_2 {
						margin-left: 2vh;
						font-size: 30rpx;
						font-weight: 600;
					}
				}
			}

			.titem_4 {
				margin-left: 2vh;

				.titem_3 {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-right: 2vh;
					padding: 20rpx 0;
					font-size: 32rpx;



				}

				.titem_5 {
					color: #999;
					font-size: 26rpx;
				}
			}

		}
	}

	.u-border-bottom:after,
	.u-border-left:after,
	.u-border-right:after,
	.u-border-top-bottom:after,
	.u-border-top:after,
	.u-border:after {
		border-bottom-color: #999;
	}

	.tab_vie {
		padding-left: 15rpx;
		padding-right: 15rpx;

		.theard {
			display: flex;
			padding: 10rpx;
			justify-content: space-evenly;
			// background-color: #d5d5d5;
		}

		.titem {
			display: flex;
			padding-top: 25rpx;
			font-size: 26rpx;
			color: #767676;
			justify-content: space-evenly;

			.titem_1 {

				image {
					width: 150rpx;
					height: 150rpx;
				}
			}
		}

		.td {
			width: 25%;
			text-align: center;
		}
	}

	.all_box {
		padding: 0 5%;
		background-color: #ffffff;

		.time_1 {
			float: right;
			margin-top: 20px;
			color: #999;
			font-size: 25rpx;

		}

		.album {
			@include flex;
			align-items: flex-start;

			&__avatar {
				background-color: $u-bg-color;
				padding: 5px;
				border-radius: 3px;
			}

			&__content {
				margin-left: 10px;
				flex: 1;
			}
		}
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 28rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 26rpx;
		margin: 15rpx 0;
	}

	.u-order-time {
		font-size: 26rpx;
		color: #000;
	}

	.imgitem {
		width: 120rpx;
		height: 120rpx;
	}

	.wl_statui {
		color: #2979ff;
		width: 100%;
		padding-top: 5rpx;
		padding-bottom: 5rpx;
		font-size: 22rpx;
		background-color: rgba(41, 121, 255, 0.2);
		line-height: 27rpx;
	}
</style>
