<template>
	<view class="reservation_main">
		<nav-bar title='保洁服务'></nav-bar>
		<view class="reservation_back">
			<image src="/static/firstaid/baojieback.png"></image>
			<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>
		</view>

		<view class="reser_content" :style="{paddingBottom: acIndex == 0?'':'0rpx'}">
			<template v-if="acIndex == 0">
				<view class="reser_type" style="padding-top: 10rpx;">
					<view class="reser_tle">保洁项目</view>
					<view class="input_row">
						<view class="input_tle">项目类型</view>
						<van-field
							@click="openProject()"
							readonly
							name="mobile"
							style="flex: 1;" 
							v-model="dataForm.serviceName" 
							placeholder="请选择" 
							right-icon="arrow" 
							:rules="[{ validator: mobileValidator,required: true, message: '请选择理疗项目' }]"/>
					</view>
					<view class="input_row" style="border-bottom: none;padding-bottom: 12rpx;" v-if="dataForm.serviceName">
						<view class="input_tle_no">服务金额</view>
						<view  style="flex: 1;padding: 10px 16px;font-size: 14px;line-height: 24px;">{{dataForm.usePrice}}{{dataForm.unit}}</view>
					</view>
				</view>
				
				<view class="reser_type" style="margin-top: 24rpx;">
					<view class="reser_tle">预约人信息</view>
					<van-form label-width="150rpx">
						<view class="input_row">
							<view class="input_tle_no">预约人姓名</view>
							<van-field style="flex: 1;" v-model="userInfo.realName" readonly placeholder="请填写"/>
						</view>
						<view class="input_row">
							<view class="input_tle_no">联系电话</view>
							<van-field
								name="mobile"
								maxlength="11"
								style="flex: 1;" 
								v-model="userInfo.mobile" 
								placeholder="请填写"
								readonly
								:rules="[{ validator: mobileValidator,required: true, message: '请正确填写手机号' }]"/>
						</view>
						<view class="input_row">
							<view class="input_tle_no">单位名称</view>
							<van-field style="flex: 1;" v-model="userInfo.departmentName" readonly placeholder="请填写"/>
						</view>
					</van-form>
				</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" @click="jumpDetail(item)" v-for="(item,index) in listData" :key="index">
						<view class="card_item_top">
							<view class="top_left">
								<image src="/static/firstaid/baojie.png"></image>
								<view>保洁服务</view>
							</view>
						</view>
						<view class="card_item_tips">
							<view class="tips_name">申请人姓名</view>
							<view class="tips_con">{{item.name}}</view>
						</view>
						<view class="card_item_tips">
							<view class="tips_name">保洁项目</view>
							<view class="tips_con">{{item.serviceName}}</view>
						</view>
						<view class="card_item_tips">
							<view class="tips_name">服务金额</view>
							<view class="tips_con">{{item.usePrice}}元</view>
						</view>
						<view class="card_item_tips">
							<view class="tips_name">申请日期</view>
							<view class="tips_con">{{item.orderTime}}</view>
						</view>
					</view>
				</z-paging>
			</template>
			
		</view>

		<view class="sub_btn_nav" v-if="acIndex == 0">
			<view class="sub_btn_pice">
				<view>合计费用</view>
				<view style="color: #F4772D;font-size: 36rpx;margin-left: 14rpx;"><text style="font-size: 24rpx;">￥</text> {{dataForm.usePrice || 0}}</view>
			</view>
			<button @click="submitClick()">提交</button>
		</view>
		
		<van-popup v-model="projectShow" position="bottom" round closeable class="project_nav" @close="closeProject">
			<view class="project_tle">保洁项目</view>
			<view class="project_item_nav" v-for="(item,index) in projectList" :key="index">
				<view class="project_item_tle" v-if="item[0]">{{item[0].typeName}}</view>
				<view class="project_item_row">
					<view class="project_item" :class="pIndex == `${index}-${cindex}`?'project_item_ac':''" v-for="(child,cindex) in item" :key="cindex" @click="selectProject(child,cindex,item,index)">
						<view class="project_item_name">{{child.serviceName}}</view>
						<view>{{child.price}}{{child.unit}}</view>
					</view>
				</view>
			</view>
			
			<view class="project_btn">
				<button @click="confirmProject()">确认</button>
			</view>
		</van-popup>
	</view>
</template>

<script>
	import {
		callbackRequest,
		formatDate
	} from '@/common/util.js';
	import navBar from "@/components/navBar/index.vue";
	import { cleaningProject,cleaningInsert,cleaningOrderList } from "@/common/api.js"
	export default {
		components: {
			navBar
		},
		data() {
			return {
				acIndex: 0,
				dataForm: {
					serviceName: '',
					serviceId: '',
					usePrice: '',
					unit: '',
					type: '',
					status: '',
					typeName: ''
				},
				userInfo: {},
				screenHeight: '',
				projectShow: false,
				projectList: [],
				pIndex: '',
				listData: [],
				scrollH: ''
			}
		},
		onShow() {
			console.log(this.acIndex)
			if(this.acIndex == 1) {
				this.$nextTick(() => {
					this.$refs.paging.reload()
				})
			}
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfos')
			this.screenHeight = uni.getSystemInfoSync().safeArea.height
			this.getProject()
		},
		methods: {
			queryList(pageNo, pageSize) {
				let params = {
					method: cleaningOrderList,
					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.appointmentDate = formatDate(new Date(item.appointmentDate))
							})
						}
						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'});
					}
				})
			},
			
			submitClick() {
				if(!this.mobileValidator(this.userInfo.mobile)) {
					uni.showToast({title: '请完整输入手机号',icon: 'none'});
					return
				}
				let params = {
					method: cleaningInsert,
					serviceName: `${this.dataForm.typeName}-${this.dataForm.serviceName}`,
					serviceId: this.dataForm.serviceId,
					usePrice: this.dataForm.usePrice,
					unit: this.dataForm.unit,
					type: this.dataForm.type,
					status: this.userInfo.departmentName || '',
					name: this.userInfo.realName,
					phone:this. userInfo.mobile,
				}
				callbackRequest(params).then((res) => {
					if (res.returnCode == 1) {
						if(res.returnData.returnCode == '1') {
							uni.showToast({ title: res.returnData.returnMsg, icon: 'none' });
							this.dataForm.serviceName = ''
							this.dataForm.serviceId = ''
							this.dataForm.usePrice = ''
							this.pIndex = ''
						}else{
							uni.showToast({ title: res.returnData.returnMsg, icon: 'none' });
						}
					} else {
						uni.showToast({title: res.returnMsg,icon: 'none'});
					}
				})
			},
			
			jumpDetail(row) {
				uni.navigateTo({
					url:'/pages/lifeService/detail?id=' + row.id + '&pageType=' + '3'
				})
			},
			
			openProject() {
				this.projectShow = true
			},
			
			closeProject() {},
			
			selectProject(row,index,parent,pindex) {
				this.pIndex = `${pindex}-${index}`
				console.log(this.pIndex)
			},
			
			confirmProject() {
				if(!this.pIndex) {
					uni.showToast({title: '请选择保洁项目类型',icon: 'none'});
					return
				}
				console.log(this.projectList[this.pIndex.split('-')[0]][this.pIndex.split('-')[1]])
				this.dataForm.serviceName = this.projectList[this.pIndex.split('-')[0]][this.pIndex.split('-')[1]].serviceName
				this.dataForm.serviceId = this.projectList[this.pIndex.split('-')[0]][this.pIndex.split('-')[1]].id
				this.dataForm.usePrice = this.projectList[this.pIndex.split('-')[0]][this.pIndex.split('-')[1]].price
				this.dataForm.unit = this.projectList[this.pIndex.split('-')[0]][this.pIndex.split('-')[1]].unit
				this.dataForm.type = this.projectList[this.pIndex.split('-')[0]][this.pIndex.split('-')[1]].type
				this.dataForm.typeName = this.projectList[this.pIndex.split('-')[0]][this.pIndex.split('-')[1]].typeName
				this.projectShow = false
			},
			
			getProject() {
				let params = {
						method: cleaningProject,
						type: '',
						currentPage: 1,
						isDeleted: "0",
						limit: 1000
				}
				callbackRequest(params).then((res) => {
					if (res.returnCode == 1) {
						this.projectList = this.groupByProperty(res.returnData.records,'type','array')
						console.log(this.projectList)
					} else {
						uni.showToast({title: res.returnMsg,icon: 'none'});
					}
				})
			},
			
			groupByProperty(arrayList, propertyName, outputType) {
				if (outputType === "array") {
					return Object.values(
						arrayList.reduce(function(result, obj) {
							let key = obj[propertyName];
							if (!result[key]) {
								result[key] = [];
							}
							result[key].push(obj);
							return result;
						}, {})
					);
				} else {
					return arrayList.reduce(function(result, obj) {
						let key = obj[propertyName];
						if (!result[key]) {
							result[key] = [];
						}
						result[key].push(obj);
						return result;
					}, {});
				}
			},
			
			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()
					})
				}
			},
			
			mobileValidator(val) {
				 return /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/.test(val);
			},
		}
	}
</script>

<style scoped lang="scss">
	.reservation_main {
		width: 100%;
		background: #F2F6FA;
		padding-top: 100rpx;
	}
	.reser_content {
		padding: 0rpx 24rpx 200rpx 24rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
	}
	.reser_type {
		width: 100%;
		min-height: 100rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		padding: 24rpx 24rpx 0 24rpx;
		box-sizing: border-box;
		.reser_tle {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #0E1A24;
			margin-left: 30rpx;
			position: relative;
			margin-bottom: 28rpx;
		}
		.reser_tle:before {
			position: absolute;
			content: '';
			left: -24rpx;
			top: 50%;
			transform: translateY(-50%);
			width: 8rpx;
			height: 30rpx;
			background: linear-gradient( 180deg, #82E7B3 0%, #94B8EF 100%);
			border-radius: 4rpx;
		}
	}
	.sub_btn_nav {
		width: 100%;
		height: 190rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 0 48rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.sub_btn_pice {
			font-weight: bold;
			font-size: 30rpx;
			color: #0E1A24;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
		}
		button {
			width: 100%;
			height: 88rpx;
			background: linear-gradient( 94deg, #5BCE9D 0%, #00ADA6 100%);
			border-radius: 12rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
	.input_row {
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #EBEFF7;
		margin-bottom: 30rpx;
	}
	.input_row_col {
		margin-bottom: 30rpx;
	}
	.input_tle {
		position: relative;
		width: 135rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #4B5B68;
		text-align: left;
		line-height: 24px;
	}
	.input_tle_no {
		line-height: 24px;
		width: 140rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #4B5B68;
		text-align: left;	
		display: inline-flex;
	}
	.input_tle:before {
		position: absolute;
		right: 5rpx;
		top: 0;
		color: #FB8107;
		font-size: 28rpx;
		content: '*';
	}
	.physio_date {
		width: 100%;
		height: 88rpx; 
		background: linear-gradient( 93deg, rgba(220,251,245,0.44) 0%, #DCFBF5 100%);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		display: flex;
		align-items: center;
		padding: 0 48rpx;
		box-sizing: border-box;
		font-weight: 400;
		font-size: 28rpx;
		color: #4B5B68;
		margin-bottom: 32rpx;
	}
	.time_select {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.time_item {
			width: calc(100% / 2 - 14rpx);
			height: 76rpx;
			background: #F2F6FA;
			border-radius: 8rpx;
			text-align: center;
			line-height: 76rpx;
			margin-bottom: 22rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #4B5B68;
		}
		.time_item_ac {
			background: #EDFCF7;
			border: 2rpx solid #00ADA6;
			font-weight: 400;
			font-size: 28rpx;
			color: #00ADA6;
		}
		.time_item_no {
			background: #F2F6FA;
			color: #BDC4D2;
		}
	}
	.project_nav {
		height: 80vh;
		width: 100%;
		background-color: #F2F6FA;
		display: flex;
		flex-direction: column;
		padding: 30rpx 48rpx 160rpx 48rpx;
		box-sizing: border-box;
	}
	.project_tle {
		font-weight: bold;
		font-size: 36rpx;
		color: #0E1A24;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.project_item_nav {
		
	}
	.project_item_tle {
		font-weight: bold;
		font-size: 32rpx;
		color: #0E1A24;
		margin-bottom: 24rpx;
		
	}
	.project_item_row {
		margin-bottom: 48rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 24rpx;
	}
	.project_item {
		padding: 26rpx 30rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-weight: 400;
		font-size: 28rpx;
		color: #4B5B68;
		.project_item_name {
			text-align: center;
			width: 100%;
			margin-bottom: 20rpx;
			 // white-space: nowrap;
			 // overflow: hidden;
			 //  text-overflow: ellipsis;
		}
	}
	.project_item_ac {
		background: #EDFCF7;
		border: 2rpx solid #00ADA6;
		color: #00ADA6;
	}
	.project_btn {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		button {
			width: 654rpx;
			height: 88rpx;
			background: linear-gradient( 94deg, #5BCE9D 0%, #00ADA6 100%);
			border-radius: 12rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
	.card_item {
		width: 100%;
		min-height: 260rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 24rpx;
		box-sizing: border-box;
		margin-bottom: 24rpx;
		.card_item_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 28rpx;
			.top_left {
				display: flex;
				align-items: center;
				image {
					width: 48rpx;
					height: 48rpx;
					display: block;
					margin-right: 16rpx;
				}
				font-weight: bold;
				font-size: 36rpx;
				color: #0E1A24;
			}
			.top_right {
				width: 152rpx;
				height: 56rpx;
				background: #E0F6F5;
				border-radius: 30rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #00ADA6;
				text-align: center;
				line-height: 56rpx;
			}
		}
		.card_item_tips {
			display: flex;
			margin-bottom: 10rpx;
			.tips_name {
				width: 180rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #97A5B1;
			}
			.tips_con {
				flex: 1;
				font-weight: 400;
				font-size: 28rpx;
				color: #4B5B68;
			}
		}
	}
	.reservation_back {
			width: 100%;
			height: 386rpx;
			position: relative;
	
			image {
				width: 100%;
				height: 100%;
				display: block;
			}
	
			.reservation_type {
				width: 100%;
				position: relative;
				bottom: 85rpx;
				display: flex;
				height: 90rpx;
	
				.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;
				}
			}
		}
</style>