<template>
	<view :class="[AppTheme]" class="container bg-primary">
		<view class="avatar_introduction">
			<image class="iconimg" :src="settingFile.root_img+'/static/app/imgs/farmm.png'"></image>
			<view class="onimg_textarea">
				<view class="onimg_title">开心农场种植基地</view>
				<view class="onimg_introduce">{{servie_name}}</view>
			</view>
		</view>
		<view class="service_details">
			<view class="service_title">服务特点</view>
			<view class="parcel_selist">
				<scroll-view class="scroll-view_t" scroll-x="true">
					<view
						class="scroll_view_item"
						@click="caseservelist(item, index)"
						v-for="(item, index) in hostingpackage"
						:key="item.id"
						:class="cutlysetage == index ? 'scroll_vem_sle border-primary bg-base' : ''"
					>
						<view class="title_main plug_center_100">{{ item.serve_name }}</view>
						<view class="postage plug_center_100 text-neutral" >
							￥
							<text class="price_bold">{{ item.serve_price }}</text>
							/天
						</view>
						<view class="brief_introduction">{{ item.serve_desc }}</view>
					</view>
				</scroll-view>
			</view>
			<view class="borbak"></view>
			<view class="service_title">服务类型</view>
			<view class="service_typelist">
				<view class="service_typeitem" v-for="(item, index) in packagednslist" :key="index">
					<image class="idon_diagram" :src="item.serve_type_pic"></image>
					<view class="seed_title">{{ item.serve_type_name }}</view>
					<view class="seed_subtitle">{{ item.serve_type_content }}</view>
				</view>
			</view>
			<!-- 			<view class="rental_record" @click="navtocompro()">
				<view class="rental_address">常见问题说明</view>
				<view class="regional_records">></view>
			</view> -->
			<view v-if="type==1">
				<view class="page-bottom">
					<view class="page-bottom_1">
						<view class="p-b-btn">
							<view class="setnt_inion_p1">合计:</view>
							<view class="setnt_inion_p2 text-neutral">￥{{ parseFloat(totalpricenum).toFixed(2) }}</view>
						</view>
					</view>
					<view class="action-btn-group"><button type="primary"
							class=" bg-linear-gradient action-btn no-border buy-now-btn" @click="settlement">立即支付</button>
					</view>
				</view>
				<payment ref="payment" :channel="8" :alipay="true" :weixinpay="true" :zhtpay="true"></payment>
			</view>
			
		</view>
	</view>
</template>

<script>
import Landapi from '@/api/land/index.js';
export default {
	components: {},
	data() {
		return {
			primary:this.$theme.primary,
			settingFile:getApp().globalData.siteinfo,
			// 托管套餐
			hostingpackage: [],
			// 当前选中托管套餐
			cutlysetage:1,
			//套餐详情
			packagedetails: {},
			packagednslist: [],
			servie_name:'',
			orderid:'',
			type:0,
			orderdeleti:null,
			serve_type:'',
			totalpricenum:0,
			updaordermess:{},
			serve_id:'',
			level_radio:'',
			yuantotalprice:''
		};
	},
	onLoad(options) {
		  this.type=options.type
		  if(this.type==1){
			 this.orderdeleti=JSON.parse(options.soil)  
			 this.orderid=this.orderdeleti.soil_id 
			 this.level_radio=this.orderdeleti.level_radio
			 console.log(this.level_radio,'this.level_radio')
			 this.serve_type=this.orderdeleti.serve_type
		  }else{
			 this.orderid=options.soil_id 
		  }
		
	    
		this.gethostingpackage();
	},
	onShow: function() {
		// this.cutlysetage=0
	},
	methods: {
		//获取托管套餐
		gethostingpackage(id) {
			var that = this;
			Landapi.getsecemist({
				soil_id:this.orderid
			}).then(res => {
				if (res.status == 1) {
					// 获取服务套餐详情集合
					that.hostingpackage = res.data.data;
					this.caseservelist(this.hostingpackage[0],0);
				} else {
					that.$api.msg(res.msg);
				}
			});
		},
		//切换套餐详情
		caseservelist(serviceid, index) {
			let that = this;	
			
			console.log(this.orderdeleti,'订单信息')
			console.log(serviceid,'serviceidserviceid')
			that.servie_name=serviceid.serve_name
			if(this.type==1){
				that.serve_type=serviceid.serve_type
				that.serve_id=serviceid.id
				console.log(that.serve_type,that.orderdeleti.serve_type,'popopo')
				if (that.serve_type>=that.orderdeleti.serve_type) {
					uni.showToast({
						title: "只能升级服务",
						icon: "none"
					})
				    return false
				}
				that.totalpricenums=that.orderdeleti.perioddays*serviceid.serve_price-that.orderdeleti.pprice*that.orderdeleti.perioddays
			that.totalpricenum=parseFloat(that.totalpricenums*(that.level_radio/100)).toFixed(2)
			that.yuantotalprice=parseFloat(that.totalpricenums).toFixed(2);
			}	 
			if (that.cutlysetage !== index) {
				that.cutlysetage = index;
				console.log(that.cutlysetage,"that.cutlysetage")
				let data = {
					id: serviceid.id
				};
				Landapi.getserdebyid(data).then(res => {
					if (res.status == 1) {
						// 获取服务套餐详情集合
						that.packagedetails = res.data;
						that.packagednslist = that.packagedetails.serve_types;
					} else {
						that.$api.msg(res.msg);
					}
				});
			} else {
				that.$api.msg('当前显示套餐即是选中套餐');
			}
		},
		settlement() {
			let that=this
			let tmplIdsone = that.$config.temlist;
			if (tmplIdsone) {
				that.$until.requestSubscribeMessage([tmplIdsone['orderSuccess']], tmplIdsone, function() {
					that.settlement2()
				});
			} else {
				that.settlement2()
			}
		},
		
		// 结算订单
		settlement2() {
			var that = this;
			 
			//土地id赋值
			that.updaordermess.soil_id = that.orderdeleti.soil_id;
			
			// 选中地块id
			that.updaordermess.subdivision_id = that.orderdeleti.subdivision_id;
			//订单金额
			that.updaordermess.order_money = that.totalpricenum;
			// 服务id
			that.updaordermess.service_id = that.serve_id;
			//订单号
			that.updaordermess.order_sn = that.orderdeleti.order_sn;
			that.updaordermess.type = 2;
			that.updaordermess.orderid = that.orderdeleti.id;
			// 租赁周期
			that.updaordermess.period_days = that.orderdeleti.perioddays;
			that.updaordermess.payprice = that.totalpricenum;
			that.updaordermess.money = that.totalpricenum;
			that.updaordermess.yuantotalprice =that.yuantotalprice
			if (that.updaordermess.id) {
				that.$refs.payment.payopen(that.updaordermess);
			} else {
				that.$paycenter.ct_renewal_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);
					}
				})
			}
		
		},
		
		
		// 跳转至常见问题
		navtocompro() {
			uni.navigateTo({
				url: '/pagesB/pages/chooseland/landservice/comnproblem'
			});
		}
	},
	// #ifndef MP-WEIXIN
	// 标题栏input搜索框点击
	onNavigationBarSearchInputClicked: async function(e) {},
	//点击导航栏 buttons 时触发
	onNavigationBarButtonTap(e) {}
	// #endif
};
</script>

<style lang="scss">
.container {
	overflow-x: hidden;
}
.avatar_introduction {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 60rpx;
}
.iconimg {
	width: 100rpx;
	height: 100rpx;
	object-fit: cover;
}
.onimg_textarea {
	margin-left: 25rpx;
}
.onimg_title {
	font-size: 32rpx;
	color: #ffffff;
}
.onimg_introduce {
	margin-top: 15rpx;
	font-size: 26rpx;
	color: #d7f0db;
}
.service_details {
	background-color: #fafafa;
	border-radius: 15rpx 15rpx 0 0;
	height: calc(100vh - 220rpx);
	z-index: 11;
}

/* 底部操作菜单 */
	.page-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 95;
		display: flex;
		// justify-content: center;
		justify-content: space-evenly;
		align-items: center;
		width: 100%;
		height: 140upx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);

		.page-bottom_1 {
			display: flex;
			flex-direction: column;

			.p-b-btn {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-size: 35rpx;
				width: 100%;
				height: 80upx;

				.yticon {
					font-size: 40upx;
					line-height: 48upx;
					color: $font-color-light;
				}

				&.active,
				&.active .yticon {
					color: $tab-color-1;
				}

				.icon-fenxiang2 {
					font-size: 42upx;
					transform: translateY(-2upx);
				}

				.icon-shoucang {
					font-size: 46upx;
				}
			}

			.page-bottom_2 {
				display: flex;
				justify-content: flex-start;
				font-size: 29rpx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 100px;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			margin-left: 20upx;
			position: relative;

			.action-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 300rpx;
				height: 100%;
				font-size: $font-base;
				padding: 0;
				border-radius: 0;
			}
		}
	}
.service_title {
	font-size: 34rpx;
	color: #000;
	padding: 35rpx 0;
	text-align: center;
	background-color: #ffffff;
}
.parcel_selist {
	width: 100%;
	padding: 40rpx 0;
	background: #fff;
}
.scroll-view_t {
	white-space: nowrap;
	width: 100%;
	margin: 25rpx 0;
}
.scroll_view_item {
	width: 285rpx;
	padding: 25rpx 0 0 0;
	border-radius: 15rpx;
	display: inline-block;
	margin: 0 15rpx;
	vertical-align: top;
	background: #f5f5f5;
}
.scroll_vem_sle {
	border-width: 5rpx;
	border-style: solid;
}
.title_main {
	font-size: 32rpx;
	color: #000;
}
.postage {
	font-size: 28rpx;
	margin: 20rpx 0;
}
.brief_introduction {
	color: #999;
	font-size: 26rpx;
	height: 150rpx;
	line-height: 30rpx;
	margin: 0 15rpx;
	width: calc(100% - 30rpx);
	text-align: center;
	white-space: break-spaces;
}
.plug_center_100 {
	width: 100%;
	text-align: center;
}
.price_bold {
	font-size: 34rpx;
	font-weight: 800;
}
.service_typelist {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	background: #fff;
}
.service_typeitem {
	width: calc(33.3% - 35rpx);
	margin: 20rpx 17.5rpx;
	text-align: center;
}
.idon_diagram {
	width: 100rpx;
	height: 100rpx;
	object-fit: cover;
}
.seed_title {
	font-size: 32rpx;
	color: #000000;
	margin: 10rpx 0;
}
.seed_subtitle {
	font-size: 26rpx;
	color: #555;
}
.rental_record {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 30rpx 0;
	padding: 20rpx;
	background: #fff;
}
.rental_address {
	font-size: 32rpx;
	color: #333;
}
.regional_records {
	font-size: 28rpx;
	color: #999;
}
.borbak {
	height: 10rpx;
	width: calc(100% + 40rpx);
	margin: 0 -20rpx;
	background-color: #fafafa;
}
</style>
