<template>
	<view class="reservation_main">
		<nav-bar title='洗衣服务'></nav-bar>
		<view class="reservation_back">
			<image src="/static/firstaid/laundry.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-bottom: 24rpx;">
					<view class="reser_tle" style="margin-bottom: 0;">洗衣项目</view>
					<view class="select_type">
						<view class="select_type_item" :class="typeIndex == index?'select_type_item_ac':''" v-for="(item,index) in typeList" :key="index" @click="typeSelect(item,index)">
							<view class="">{{item.name}}</view>
							<view class="">{{item.price}}元</view>
						</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/xiyi.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.orderInfoList[0].clothingName}}</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.createdTime}}</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.price || 0}}</view>
			</view>
			<button @click="submitClick()">提交</button>
		</view>
	</view>
</template>

<script>
	import {
		callbackRequest,
		formatDate
	} from '@/common/util.js';
	import navBar from "@/components/navBar/index.vue";
	import {laundryList,laundryAdd,laundryOrderList} from "@/common/api.js"
	export default {
		components: {
			navBar
		},
		data() {
			return {
				acIndex: 0,
				dataForm: {
					name: '',
					price: '',
					id: ''
				},
				userInfo: {},
				timeIndex: null,
				screenHeight: '',
				pIndex: null,
				listData: [],
				dateList: [],
				MonthDisable: false,
				typeList: [],
				typeIndex: null,
				orderInfoList: [],
				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: {
			getProject() {
				let params = {
					method: laundryList,
					currentPage: 1,
					isDeleted: "0",
					limit: 1000
				}
				callbackRequest(params).then((res) => {
					if (res.returnCode == 1) {
						this.typeList = res.returnData.records
					} else {
						uni.showToast({title: res.returnMsg,icon: 'none'});
					}
				})
			},
			
			queryList(pageNo, pageSize) {
				let params = {
					method: laundryOrderList,
					currentPage: pageNo,
					isDeleted: "0",
					limit: pageSize,
					userId: uni.getStorageSync('userId')
				}
				callbackRequest(params).then((res) => {
					if (res.returnCode == 1) {
						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.dataForm.name) {
					uni.showToast({title: '请选择洗衣项目',icon: 'none'});
					return
				}
				if(!this.mobileValidator(this.userInfo.mobile)) {
					uni.showToast({title: '请完整输入手机号',icon: 'none'});
					return
				}
				let params = {
					method: laundryAdd,
					name: this.userInfo.realName,
					usePrice: this.dataForm.price,
					phone: this.userInfo.mobile,
					unit: this.userInfo.departmentName,
					status: '0',
					orderInfoList: this.orderInfoList
				}
				callbackRequest(params).then((res) => {
					if (res.returnCode == 1) {
						uni.showModal({
							title: '提示',
							content: '洗衣服务申请成功',
							showCancel: false
						});
						this.typeIndex = null
						this.timeIndex = null
						this.dataForm.appointmentTime = null
					} else {
						uni.showToast({title: res.returnMsg,icon: 'none'});
					}
				})
			},
			
			jumpDetail(row) {
				uni.navigateTo({
					url:'/pages/lifeService/detail?id=' + row.id + '&pageType=' + '1'
				})
			},
			
			typeSelect(row,index) {
				this.typeIndex = index
				this.dataForm.name = row.name
				this.dataForm.price = row.price
				this.dataForm.id = row.id
				row.washClothingId = row.id
				row.clothingName = row.name
				row.clothingNum = 1
				row.greenPrice = row.price
				this.orderInfoList = []
				this.orderInfoList.push(row)
			},
			
			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::-webkit-scrollbar {
			width: 0;
			height: 0;
		}
		.reser_content::-webkit-scrollbar {
				width: 0;
				height: 0;
			}
	.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;
		}
	}
	.select_type {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.select_type_item {
			width: calc(50% - 12rpx);
			height: 88rpx;
			background: #F2F6FA;
			border-radius: 12rpx;
			display: flex;
			font-weight: 400;
			font-size: 28rpx;
			color: #4B5B68;
			align-items: center;
			justify-content: space-between;
			padding: 0 52rpx;
			margin-top: 24rpx;
		}
		.select_type_item_ac {
			background: #EDFCF7;
			border: 2rpx solid #00ADA6;
			color: #00ADA6;
		}
	}
	.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: '*';
	}
	.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>