<template>
	<view class="container" :class="[AppTheme]">
		<view class="parcel_information" v-if="orderdeleti">
			<view class="mess_deitle">
				<view class="farm_name">租赁土地：{{ orderdeleti.soil_name }}</view>
				<view class="bor_solp"></view>
				<view @click="lookorderbyid(item.id)" class="order_detil">
					<image class="seed_item_thumbnail" mode="aspectFill" :src="orderdeleti.soil_cover_pic"></image>
					<view class="right_deile">
						<u--form labelPosition="left" :model="orderdeleti" ref="uForm">
							<u-form-item labelWidth="85" label="土地编号:">
								<u--input border="none" v-model="orderdeleti.subdivision.name" type="text"
									:disabled="true"></u--input>
							</u-form-item>
							<u-form-item labelWidth="85" label="土地简介:">
								<u--input v-model="orderdeleti.soil_desc" type="text" :disabled="true" border="none">
								</u--input>
							</u-form-item>
							<u-form-item labelWidth="85" label="土地价格:">
								<u--input v-model="orderdeleti.show_price" type="text" :disabled="true" border="none">
								</u--input>
							</u-form-item>
							<u-form-item labelWidth="85" label="土地面积:">
								<u--input v-model="orderdeleti.subdivision.area" type="text" :disabled="true"
									border="none"></u--input>
							</u-form-item>
							<u-form-item labelWidth="85" label="订单号:">
								<u--input v-model="orderdeleti.order_sn" type="text" :disabled="true" border="none">
								</u--input>
							</u-form-item>
							<u-form-item labelWidth="85" label="下单日期:">
								<u--input v-model="orderdeleti.create_time" type="text" :disabled="true" border="none">
								</u--input>
							</u-form-item>
						</u--form>

					</view>
				</view>
			</view>
			<view class="mess_deitle">
				<view class="farm_name">服务信息</view>
				<view class="bor_solp"></view>
				<view class="box_form">

					<u--form labelPosition="left" :model="orderdeleti" ref="uForm">
						<u-form-item labelWidth="85" label="服务类型:">
							<u--input v-model="orderdeleti.serve_name" type="text" :disabled="true" border="none">
							</u--input>
						</u-form-item>
						<u-form-item labelWidth="85" label="服务内容:">
							<u--input v-model="orderdeleti.serve_desc" type="text" :disabled="true" border="none">
							</u--input>
						</u-form-item>
						<u-form-item labelWidth="85" label="每日费用:">
							<u--input v-model="orderdeleti.serve_price" type="text" :disabled="true" border="none">
							</u--input>
						</u-form-item>
						<u-form-item labelWidth="85" label="服务周期:">
							<u--input v-model="orderdeleti.period_days" type="text" :disabled="true" border="none">
							</u--input>
						</u-form-item>
					</u--form>

				</view>
			</view>
			<view class="mess_deitle">
				<view class="farm_name">种子信息</view>
				<view class="bor_solp"></view>
				<view class="tab_vie">
					<view class="theard">
						<view class="td">名称</view>
						<view class="td">种植面积</view>
						<view class="td">金额</view>
						<view class="td">状态</view>
					</view>
					<view class="titem" v-for="(item, index) in orderdeleti.seeds" :key="index">
						<view class="td">{{ item.seed_name }}</view>
						<view class="td">{{ item.seed_num + 'm²' }}</view>
						<view class="td">{{ calculation(item.price, item.seed_num) + '元' }}</view>
						<view class="td">
							<view class="wl_statui">{{ item.seed_status }}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="mess_deitle">
				<view class="farm_name">订单信息</view>
				<view class="bor_solp"></view>
				<view class="box_form">
					<u--form labelPosition="left" :model="orderdeleti" ref="uForm">
						<u-form-item labelWidth="85" label="收货人:">
							<u--input v-model="orderdeleti.order_name" type="text" :disabled="true" border="none">
							</u--input>
						</u-form-item>
						<u-form-item labelWidth="85" label="收货地址:">
							<u--input v-model="orderdeleti.address" type="text" :disabled="true" border="none">
							</u--input>
						</u-form-item>
						<u-form-item labelWidth="85" label="收货电话:">
							<u--input v-model="orderdeleti.order_mobile" type="text" :disabled="true" border="none">
							</u--input>
						</u-form-item>
						<u-form-item labelWidth="85" label="付款时间:">
							<u--input v-model="orderdeleti.pay_time" type="text" :disabled="true" border="none">
							</u--input>
						</u-form-item>
						<u-form-item labelWidth="85" label="付款方式:">
							<u--input v-if="orderdeleti.type_pay === 1" v-model="wxpay" type="text" :disabled="true"
								border="none">
							</u--input>
							<u--input v-if="orderdeleti.type_pay === 2" v-model="yepay" type="text" :disabled="true"
								border="none">
							</u--input>
						</u-form-item>
						<u-form-item labelWidth="85" label="付款金额:">
							<u--input v-model="orderdeleti.order_money" type="text" :disabled="true" border="none">
							</u--input>
						</u-form-item>
					</u--form>
				</view>
			</view>
			<view v-if="servicemess.length>0" class="mess_deitle">
				<view class="farm_name">服务记录</view>
				<view class="bor_solp"></view>
				<view class="all_box">
					<view style="margin-top: 20px;" v-for="(item, index) in servicemess" :key="index">
						<view class="u-page">
							<view class="u-demo-block">
								<!-- <text class="u-demo-block__title">{{item.serve_type_name}}</text> -->
								<view class="u-demo-block__content">
					    <view class="album">
										<view class="album__avatar">
											<image :src="logo" mode="" style="width: 34px;height: 34px;"></image>
										</view>
										<view class="album__content">
											<u--text :text="name" type="primary" bold size="16"></u--text>
											<u--text margin="4px 0 8px 0" :text="item.serve_type_name"></u--text>
											<u-album :urls="item.seed_serve_pic"></u-album>
											<view class="time_1">播种时间: {{item.create_time}}</view>
					  			</view>
					 			</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="!servicemess" style="padding-top: 60rpx;">
						<u-empty text="无数据" mode="list">
						</u-empty>
					</view>

				</view>
			</view>
		</view>
		<view v-if="!orderdeleti" style="padding-top: 60rpx;">
			<u-empty text="无数据" mode="list">
			</u-empty>
		</view>
		<view style="height: 40rpx;"></view>
		<u-back-top :scroll-top="scrollTop" :custom-style="customstyle"></u-back-top>
	</view>
</template>

<script>
	import Landapi from '@/api/land/index.js';
	export default {
		data() {
			return {
				primary: this.$theme.primary,
				settingFile: getApp().globalData.siteinfo,
				//顶部距离
				scrollTop: 0,
				orderdeleti: null,
				customstyle: {
					background: '#F4F6F8'
				},
				wxpay: '微信支付',
				yepay: '余额支付',
				servicemess: [],
				logo: '',
				name: ''
			};
		},
		onLoad(options) {
			this.lookorderbyid(options.orderid);
		},
		onReady() {},
		onPageScroll: function(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			//查看服务信息
			seletserbyid(order_sn) {
				let that = this;
				let params = {
					order_sn: order_sn
				};
				Landapi.selordermessbyid(params).then(res => {
					if (res.status == 1) {
						that.servicemess = res.data.data;
						that.logo = res.data.site.logo;
						that.name = res.data.site.name;
						console.log(that.servicemess, "that.servicemess")
					} else {
						// that.$api.msg(res.msg);
					}
				});
			},
			//根据id获取订单信息
			lookorderbyid(orderid) {
				let that = this;
				let parms = {
					id: orderid
				};
				Landapi.lookorderbyid(parms).then(res => {
					console.log(res, "订单信息")
					if (res.status == 1) {
						that.orderdeleti = res.data;
						that.orderdeleti.serve_price = that.orderdeleti.serve_price + '元';
						that.orderdeleti.period_days = that.orderdeleti.period_days + '天';
						that.orderdeleti.show_price = that.orderdeleti.show_price + '元';
						that.orderdeleti.subdivision.area = that.orderdeleti
							.subdivision.area + 'm²';
						that.orderdeleti.order_money = that.orderdeleti.order_money + '元';
						that.seletserbyid(that.orderdeleti.order_sn);
					} else {
						that.$api.msg(res.msg);
					}
				});
			},
			//计算单种种子总价格
			calculation(price, num) {
				return parseFloat(price) * parseInt(num);
			}
		}
	};
</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;
		}
	}


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

	.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;
	}

	.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: 30rpx;
		color: #000;
		padding: 0 20rpx;
	}

	.bor_solp {
		background-color: #999;
		height: 1rpx;
		width: 100%;
		transform: scaleY(0.3);
		margin: 25rpx 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%;
	}

	.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;
		}

		.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>
