<template>
	<view class="all-bgc">
		<view class="buttons-father">
			<view class="ipt">
				<input type="text" v-model="plzinfo.pddInfo" placeholder="盘点单号/盘点人/盘点日期" @confirm="clickconfirm" />
			</view>
			<view class="scr" @click="clickconfirm">
				检索
			</view>
			<view :class="openselect?`shx-target`:`shx`" @click="openselect = true">
				<image :src="`/static/index/purchaseorder/select${openselect?`target`:``}.png`" mode="aspectFill">
				</image>
				<view class="shx-font">
					筛选
				</view>
			</view>
			<view class="shx" @click="chongzhi">
				<image src="/static/index/requestform/chongzhi.png" mode="aspectFill"></image>
				<view class="shx-font">
					重置
				</view>
			</view>

			<view class="right-buttons">
				<view class="left-selecttype">
					<view :class="selectType===index?`selecttype-target`: `selecttype`"
						v-for="(item,index) in tagsarray" @click="changetype(index)">
						{{ item }}
					</view>
					<view class="heng-blue" :style="{ left: `${selectType === 0 ? 18 : 18 + selectType * 30}%` }">
					</view>
				</view>
				<view class="right-button" @click="uni.navigateTo({url:'/pages/procurement/addtory'})">
					<image src="/static/index/requestform/addnew.png" />
					<view>
						新增
					</view>
				</view>
				<view class="contain-right-button" @click="goback">
					<image class="buttont-img" style="margin-top: 4rpx;" src="/static/index/purchaseorder/back.png" />
					<view class="button-font">
						返回
					</view>
				</view>
			</view>

			<nomessage cont="暂无数据" :show="nomessageshow" />
			<view class="zhedang" v-if="nomessageshow"></view>
		</view>

		<view class="all-contain" v-show=" !nomessageshow">
			<scroll-view scroll-y="true" scroll-with-animation class="all-scroll" :scroll-top="leftscrolltop"
				@scrolltolower="plsbuytolower"  :lower-threshold="200">
				<view class="scroll-items">
					<view class="scroll-item" v-for="(item,index) in plsbuy" :key="index">
						<view class="scroll-item-title">
							<view class="scroll-title-left">
								<view class="title-font">
									{{ item.pddNo }}
								</view>

								<view class="title-success" v-if="item.pydNum>0">
									盘盈
								</view>
								<view class="title-error" v-if="item.pkdNum>0">
									盘亏
								</view>
							</view>
							<view class="scroll-title-right">
								{{ item.pddType_dictText }}

							</view>
						</view>
						<view class="scroll-item-contect">
							<view class="middle-heng"></view>
							<view class="contect-one">
								<view class="contect-title">
									{{ item.pddStartTime?.split(' ')[0] }}
								</view>
								<view class="middle-heng-father">
									<image class="middle-ball-img" src="/static/index/requestform/isok.png" />
								</view>
								<view class="end-font">
									<view>
										{{ `盘点中`}}

									</view>
									<view style="color: #888888;">
										{{ `[ 王嘉尔 ]` }}
									</view>
								</view>
							</view>
							<view class="contect-one">
								<view class="contect-title">

									{{ item.pddEndTime?.split(' ')[0] }}
								</view>
								<view class="middle-heng-father">

									<view class="middle-ball" v-if="item.pddType!='2'"
										style="background-color: #EEEEEE;"></view>
									<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
								</view>
								<view class="end-font">
									<view>
										盘点结束
									</view>
									<view style="color: #888888;">
										{{ item.pddType=='2'?`[ 王嘉尔 ]`: `` }}
									</view>
								</view>
							</view>
						</view>
						<view class="scroll-item-end">
							<image class="title-imge" src="/static/home.png" mode="aspectFit"></image>
							<view class="title-font">
								{{ item.nuName}}
							</view>
						</view>

					</view>
				</view>

			</scroll-view>
			<defaultr cont="暂无数据" v-if="plsbuy.length==0">
			</defaultr>
		</view>
		<view v-show="openselect" class="mengban" @click="openselect=false"></view>
		<view class="left-select-more" v-show="openselect" @click="opendata=false">
			<view class="more-bottom">
				<view class="bottom-left" @click="chongzhi">
					重置
				</view>
				<view class="bottom-right" @click="openselect=false">
					确定
				</view>
			</view>
			<view class="more-title">
				盘点状态
			</view>
			<view class="more-statues-father">
				<view :class="plzinfo.pddType==``?`more-statues-button-target`:`more-statues-button`"
					@click="plzinfo.pddType=``;firstgetqueryCgdList()">
					全部
				</view>
				<view :class="plzinfo.pddType==`1`?`more-statues-button-target`:`more-statues-button`"
					@click="plzinfo.pddType=`1`;firstgetqueryCgdList()">
					盘点中
				</view>
				<view :class="plzinfo.pddType==`2`?`more-statues-button-target`:`more-statues-button`"
					@click="plzinfo.pddType=`2`;firstgetqueryCgdList()">
					已完成
				</view>
			</view>


		<!-- 	<view class="more-select" style="margin-top: 10rpx;">
				盘点单号
			</view>
			<view class="more-time-select" @click="pandian=true">
				<input class="more-gray" v-model="plzinfo.pddInfo" placeholder="请输入盘点单号"
					placeholder-style="color: #BFBFBF;" style="margin-left: 30rpx;width: 100%;" @confirm="pandianclick"
					@blur="pandianclick"></input>

			</view> -->
			<view class="more-select">
				盘点人
			</view>
			<view class="more-time-select" @click="pandianren=true">
				<input class="more-gray" v-model="peoplename" placeholder="请输入盘点人" placeholder-style="color: #BFBFBF;"
					style="margin-left: 30rpx;width: 400rpx;" @input="changeName"></input>
				<image class="select-img" src="/static/index/warehouse/procurement/picking/center.png" />
			</view>
			<view class="more-time">
				盘点日期
			</view>
			<view class="more-time-select" @click.stop="opendata=!opendata">
				<view class="more-gray" v-show="!plzinfo.startTime">
					开始日期
				</view>
				<view class="more-black" v-show="plzinfo.startTime">
					{{ plzinfo.startTime }}
				</view>

				<view style="font-size: 32rpx;margin-left: 10rpx;">
					至
				</view>
				<view class="more-gray" v-show="!plzinfo.endTime">
					结束日期
				</view>
				<view class="more-black" v-show="plzinfo.endTime">
					{{ plzinfo.endTime }}
				</view>
				<image class="more-img" src="/static/index/warehouse/procurement/picking/data.png" />
			</view>
			<view class="more-select">
				盘盈/盘亏
			</view>
			<view class="selected">
				<view class="selected-item" @click="clickkuai(`1`)">
					<view class="selected-kuai" v-if="plzinfo.pydOrPkd!='1,2'&&plzinfo.pydOrPkd!='1'">

					</view>
					<view class="selected-kuai-target" v-else>
						√
					</view>
					<view class="">
						盘盈单
					</view>
				</view>
				<view class="selected-item" @click="clickkuai(`2`)">
					<view class="selected-kuai" v-if="plzinfo.pydOrPkd!='1,2'&&plzinfo.pydOrPkd!='2'">

					</view>
					<view class="selected-kuai-target" v-else>
						√
					</view>
					<view class="">
						盘亏单
					</view>
				</view>
			</view>
		</view>
	</view>
	<!-- 日期 -->
	<view class="calendar-father" v-show="opendata" v-if="xiaohui">
		<calendar @datachange="dateget" />
	</view>
	<view v-show="opendata" class="mengban" style="background: transparent;" @click="opendata=false;">
	</view>
	<view v-show="pandian" class="mengban" style="background: transparent;" @click="pandian=false;">
	</view>
	<!-- 给模糊搜索用的 -->
	<view v-show="filteredCgrList.length&&peoplename" class="mengban" style="background: transparent;z-index: 9999;"
		@click="closefilteredCgrList"></view>

	<view class="input-next" v-if="filteredCgrList.length && peoplename">
		<view v-show="filteredCgrList[0].cgBy!=`暂无数据`" class="next-father"
			v-for="(item, index) in filteredCgrList.slice(0, 5)" :key="index" @click="clickfilteredCgrList(item)">
			{{ item.name }}
		</view>
		<view class="nomessage" v-if="filteredCgrList[0].cgBy===`暂无数据`">
			暂无数据
		</view>
	</view>
	<tanchuang :show="addshow" font="确定要新增盘点单吗" @back="addshow=false;" @right="addnew"> </tanchuang>
	<errorshow :show="openmessage" :font="errormessage" @close="openmessage=false"  />
</template>

<script setup lang="ts">
	import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import { queryPddList, queryPddStartByList,addPddMain } from './api/lunpan.js'
	import nomessage from './components/nomessage.vue'
	import defaultr from './components/default.vue'
	import calendar from '@/component/public/calendar.vue'
	const xiaohui = ref(true);
	const shaixuan = ref(false);
	const opendata = ref(false);
	const openselect = ref(false);
	const manyselect = ref(false);
	const addshow = ref(false)
	const tagsarray = ref(["全部", "盘点中", "已完成"])
	const cgrlist = ref([]);


	const getSelectList = () => {
		queryPddStartByList({nuId:uni.getStorageSync('nuId')}).then((res : any) => {
			cgrlist.value = res.result;
		
		})
	}
	onMounted(() => {
		firstgetqueryCgdList();
		getSelectList();
	})
	type datetype = {
		start : string,
		end : string
	}
	const dateget = (res : datetype) => {
		plzinfo.startTime = res.start;
		plzinfo.endTime = res.end;
		firstgetqueryCgdList()
	}
	const lanjie = ref(false);

	const selectType = ref(0)
	const changetype = (index : number) => {
		if ((selectType.value == index) && index) {
			return
		}
		leftscrolltop.value = 1
		setTimeout(() => {
			leftscrolltop.value = 0
		}, 50)
		lefttarget.value = 0
		selectType.value = index
		plzinfo.pageNo = 1;
		plzinfo.canpull = true;

		switch (index) {
			case 0:
				plzinfo.pddType = ``
				break
			case 1:
				plzinfo.pddType = `1`
				break
			case 2:
				plzinfo.pddType = `2`
				break

		}
		firstgetqueryCgdList()
	}
	const pandianren = ref(false)
	const peoplename = ref("")
	const filteredCgrList = ref([])
	// --- 模糊匹配 ---
	function fuzzyMatch(text : unknown, q : string) {
		const s = String(text ?? '').toLowerCase()
		const ql = String(q ?? '').toLowerCase().trim()
		if (!ql) return true
		if (s.includes(ql)) return true

		// subsequence 模糊字符序列
		let i = 0
		for (let j = 0; j < s.length && i < ql.length; j++) {
			if (s[j] === ql[i]) i++
		}
		return i === ql.length
	}

	// --- 0.3 秒防抖专用变量 ---
	let debounceTimer : number | null = null

	/**
	 * changeName - 防抖搜索（0.3 秒后无再次输入才执行）
	 */
	function changeName(res : any) {
		console.log("0000",res)
		if (!res.detail.value) {
			plzinfo.pddStartBy = "";
			filteredCgrList.value = [];
			firstgetqueryCgdList()
			return
		}

		const keyword = String(
			typeof res === 'string' ? res : res?.detail?.value ?? ''
		).trim()

		// 清除上一次的定时器
		if (debounceTimer) clearTimeout(debounceTimer)

		// 重新等待 300ms
		debounceTimer = setTimeout(() => {
			
			if (!keyword) {
				filteredCgrList.value = cgrlist.value.slice()
				
				return
			}

			filteredCgrList.value = cgrlist.value.filter(item =>
				fuzzyMatch(item?.name, keyword)
			)
			if (!filteredCgrList.value.length) {
				filteredCgrList.value.push({ cgBy: `暂无数据` })
			}
			// console.log("9999",filteredCgrList.value)
			// console.log("0000",cgrlist.value)
		}, 300)
	}
	const closefilteredCgrList = () => {
		// console.log("?????????")
		filteredCgrList.value = [];
		peoplename.value = plzinfo.pddStartBy;
		firstgetqueryCgdList()
	}
	const clickfilteredCgrList = (item : any) => {
		filteredCgrList.value = [];
		plzinfo.pddStartBy = item.name
		peoplename.value = plzinfo.pddStartBy;
		firstgetqueryCgdList()
	}
	const pandian = ref(false)
	const pandianclick = () => {
		pandian.value = false
		firstgetqueryCgdList()
	}

	const clickconfirm = () => {
		if (chongzhiLock) return
		chongzhiLock = true
		plzinfo.pageNo = 1;
		plzinfo.canpull = true;
		lefttarget.value = 0
		firstgetqueryCgdList()
		leftscrolltop.value = 1
		setTimeout(() => {
			leftscrolltop.value = 0
		}, 10)
		setTimeout(() => chongzhiLock = false, 500)
	}
	let chongzhiLock = false

	const chongzhi = () => {
		if (chongzhiLock) return
		chongzhiLock = true
		xiaohui.value = false;
		plzinfo.pddInfo = "";
		plzinfo.pddNo = "";
		plzinfo.pddStartBy = "";
		plzinfo.pydOrPkd = "";
		plzinfo.pddType = "";
		plzinfo.startTime = "";
		plzinfo.pddStartBy = ""
		plzinfo.endTime = "";
		changetype(0)

		setTimeout(() => {
			chongzhiLock = false;
			xiaohui.value = true
		}, 500)
	}
	const plsbuy = ref([])
	const alltotal = ref(0);
	const lefttarget = ref(0)
	const plzinfo = reactive({
		nuId: uni.getStorageSync('nuId'),
		pageNo: 1,
		pageSize: 9,
		canpull: true,
		pddInfo: "",
		pddNo: "",
		pddStartBy: "",
		pydOrPkd: "",
		pddType: "",
		startTime: "",
		endTime: "",
	})
	const clickkuai = (index : string) => {
		// index 可以是 '1' 或 '2'（或数字）
		const key = String(index);
		const cur = plzinfo.pydOrPkd || '';              // 可能为 '' 或 '1' 或 '2' 或 '1,2'
		const set = new Set(cur ? cur.split(',') : []); // 转成集合方便增删

		if (set.has(key)) set.delete(key);
		else set.add(key);

		// 保持有顺序 '1,2'，空集合 -> 空字符串
		const arr = Array.from(set).filter(Boolean).sort((a, b) => a - b);
		plzinfo.pydOrPkd = arr.length ? arr.join(',') : '';

		firstgetqueryCgdList()
	}
	const nomessageshow = ref(false);
	const leftscrolltop = ref(0)

	const rightarray = ref([]);
	// 检测锁
	const cannomessage = ref(true)
	const rightdonghua = ref(true);
	const firstgetqueryCgdList = () => {
		plzinfo.pageNo = 1;
		plzinfo.canpull = true
		queryPddList(plzinfo).then((res : any) => {

			// console.log("kankan", plzinfo, res)
			if (((res.message === "缺少参数") || (!res.result?.total)) && cannomessage.value) {
				nomessageshow.value = true;
				return
			}

			cannomessage.value = false
			plsbuy.value = []
			plsbuy.value.push(...res.result.records)
			alltotal.value = res.result.total

			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}

		})
	}
	const setout = ref(true)
	let times = null
	const plsbuytolower = () => {
		if (!setout.value) { return }
		plzinfo.pageNo++;
		getqueryCgdList()
		setout.value = false
		times = setTimeout(() => {
			setout.value = true
		}, 500)
	}
	//获得采购单列表
	const getqueryCgdList = () => {
		if (!plzinfo.canpull) return
		queryPddList(plzinfo).then((res : any) => {
			plsbuy.value.push(...res.result.records)
			alltotal.value = res.result.total
			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}
		})
	}
	const serverUrl = ref("")
	onLoad(() => {
		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
	})
	const goback = () => {
		uni.navigateBack()
	}
	const errormessage = ref("")
	const openmessage = ref(false)
	const addnew = () =>{
		addPddMain({nuId:uni.getStorageSync('nuId')}).then((res:any)=>{
			// console.log("res",res)
			if(res.success){
				addshow.value = false
				chongzhi()
				setTimeout(()=>{
					uni.showToast({
						title: `新增成功`,
						icon: 'none', // 'none' 表示不带图标
						duration: 2000
					})
				},50)
			}else{
				openmessage.value = true
				errormessage.value = res.message
			}
		})
	}
</script>

<style scoped lang="less">
	.all-bgc {
		background-color: rgb(239, 240, 244);
		padding-left: 2vw;
		padding-top: 5.5vh;
	}

	.buttons-father {
		width: 100%;
		height: 7.5vh;
		display: flex;
		position: relative;

		.ipt {
			display: flex;
			align-items: center;
			width: 20vw;
			background: #E2E4E9;
			border-radius: 1.65vw;
			height: 3.3vw;

			image {
				width: 2.2vw;
				height: 2.2vw;
				margin: 0 0.5vw;
			}

			input {
				width: 18vw;
				height: 3.5vw;
				font-size: 1.4vw;
				padding-left: 1.6vw;

			}
		}

		.scr {
			border-radius: 1.65vw;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 0 0 0.7vw;
			background-color: #fff;
			border: 1px solid #D9DADC;
			color: #555555;
			width: 6.5vw;
			height: 3.3vw;
		}

		.shx {
			width: 6.5vw;
			height: 3.3vw;
			background-color: #fff;
			border-radius: 1.65vw;
			border: 1px solid #D9DADC;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 0 0 0.5vw;
			color: #555555;

			image {
				width: 1.5vw;
				height: 1.5vw;
				margin: 0 0.2vw 0 0;
			}


		}

		.right-button {
			width: 7vw;
			height: 3.3vw;
			background-color: #fff;
			border-radius: 1.65vw;
			border: 1px solid #D9DADC;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #555555;

			image {
				width: 1.5vw;
				height: 1.5vw;
				margin: 0.1vw 0.2vw 0 0;
			}
		}

		.shx-target {
			width: 6.5vw;
			height: 3.3vw;
			background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
			border: 1rpx solid #1083F8;
			border-radius: 1.65vw;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 0 0 0.5vw;
			color: #1083F8;

			image {
				width: 1.5vw;
				height: 1.5vw;
				margin: 0 0.2vw 0 0;
			}


		}

		.right-button:active,
		.scr:active,
		.shx:active {
			color: #1083F8;
			background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
			border: 1rpx solid #1083F8;
			transition: .4s;
			-webkit-transform-style: preserve-3d;
			-webkit-overflow-scrolling: touch;
		}
	}


	.right-buttons {
		position: absolute;
		right: 1.8vw;
		top: 0;
		display: flex;

		.contain-right-button {
			width: 7.3vw;
			height: 3.3vw;
			background: #FFFFFF;
			border-radius: 1.65vw;
			border: 1px solid #D9DADC;
			font-weight: 400;
			font-size: 1.4vw;
			color: #222;
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 0 0 0 0.7vw;
			color: #555555;

			image {
				width: 1.5vw;
				height: 1.5vw;
				margin: 0 0.2vw 0 0;
			}
		}
	}

	.zhedang {
		position: fixed;
		width: 50%;
		right: 0;
		top: 0;
		height: 500rpx;
		background-color: #fff;
	}

	.left-selecttype {
		width: 450rpx;
		height: 70rpx;
		border-radius: 40rpx;
		// background-color: #FFFFFF;
		display: flex;
		padding-right: 30rpx;
		padding-left: 15rpx;
		position: relative;


		.heng-blue {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 25rpx;
			height: 8rpx;
			border-radius: 10rpx;
			background-color: #1083F8;
			transition: 0.3s all ease;

		}

		.selecttype {
			width: 33.3%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #999999;
			font-size: 31rpx;
			position: relative;

		}

		.selecttype-target {
			width: 33.3%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #222222;
			font-size: 31rpx;
			font-weight: 600;
			position: relative;
		}
	}

	.all-contain {
		width: 100%;
		height: 87vh;

		.all-scroll {
			width: 100%;
			height: 100%;
			// background-color: red;

			.scroll-items {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.scroll-item {
					width: 31.95%;
					margin-right: 1%;
					margin-bottom: 1%;
					height: 355rpx;
					background-color: #fff;
					border-radius: 30rpx;
					// padding: 0 1%;
					padding-left: 40rpx;
					padding-right: 30rpx;

					.scroll-item-title {
						width: 100%;
						height: 30%;
						// background-color: red;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.scroll-title-left {
							font-weight: 600;
							font-size: 32rpx;
							color: #222;
							margin-top: 10rpx;
							display: flex;

							.title-font {
								margin-right: 10rpx;
							}

							.title-success {
								width: 65rpx;
								height: 40rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								background-color: rgba(3, 133, 250, 0.1);
								font-size: 25rpx;
								font-weight: 500;
								color: #1083F8;
								border: 2rpx solid #1083F8;
								margin-left: 5rpx;
								border-radius: 5rpx;
							}

							.title-error {
								width: 65rpx;
								height: 40rpx;
								display: flex;
								justify-content: center;
								align-items: center;
								background-color: #FFF1F1;
								font-size: 25rpx;
								font-weight: 500;
								color: #FF5757;
								border: 2rpx solid #FF5757;
								margin-left: 5rpx;
								border-radius: 5rpx;
							}
						}

						.scroll-title-right {
							width: 130rpx;
							height: 65rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							background-color: rgba(3, 133, 250, 0.1);
							border-radius: 40rpx;
							color: #1083F8;
							border: 1rpx solid #1083F8;
							margin-top: 10rpx;
						}
					}

					.scroll-item-contect {
						width: 100%;
						// height: 48%;
						display: flex;
						position: relative;

						.middle-heng-father {
							width: 100%;
							height: 4vh;
							position: relative;

							.middle-ball-img {
								width: 35rpx;
								height: 35rpx;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
							}

							.middle-ball {
								width: 20rpx;
								height: 20rpx;
								background-color: #1083F8;
								position: absolute;
								top: 50%;
								left: 50%;
								transform: translate(-50%, -50%);
								border-radius: 50%;
							}
						}

						.middle-heng {
							position: absolute;
							left: 3%;
							top: 38.5%;
							transform: translateY(-35%);
							width: 92%;
							height: 2px;
							/* 虚线粗细 */
							background-image: repeating-linear-gradient(to right,
									#E5E5E5 0,
									#E5E5E5 6px,
									transparent 6px,
									transparent 10px);
						}

						.contect-one {
							width: 50%;
							height: 100%;
							display: flex;
							flex-direction: column;
							align-items: center;

							.contect-title {
								color: #888888;
								height: 35rpx;
								font-size: 26rpx;
							}

							.end-font {
								width: 100%;
								// height: 6vh;
								text-align: center;
								color: #666666;
								font-size: 25rpx;
								// overflow: hidden;
								// text-overflow: ellipsis;
								// white-space: nowrap;
							}
						}
					}

					.scroll-item-end {
						width: 100%;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						margin-top: 15rpx;

						.title-imge {
							width: 1.8vw;
							height: 1.8vw;
							margin-right: 0.3vw;
						}

						.title-font {
							font-size: 28rpx;
							margin-right: 10rpx;
							color: #555555;
							margin-top: 8rpx;
						}
					}
				}
			}

		}
	}

	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
		background: RGBA(239, 240, 244, 0.55);
	}

	.left-select-more {
		position: absolute;
		top: 12%;
		left: 2%;
		width: 31%;
		height: 87%;
		background-color: #fff;
		border-radius: 30rpx;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		z-index: 9997;
		padding: 0 50rpx;

		.more-bottom {
			position: absolute;
			bottom: 60rpx;
			right: 50rpx;
			display: flex;

			.bottom-left {
				padding: 0 50rpx;
				height: 80rpx;
				color: #888888;
				background-color: #F8F8FA;
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				margin-right: 12rpx;
			}

			.bottom-right {
				padding: 0 50rpx;
				height: 80rpx;
				color: #0385FA;
				border: 1rpx solid #0385FA;
				// background-color: #F8F8FA;
				background: linear-gradient(to bottom, #E9F4FF, #CAE0F9);
				border-radius: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;

			}
		}

		.more-title {
			margin-top: 55rpx;
			font-size: 30rpx;
		}

		.more-time {
			margin-top: 30rpx;
			font-size: 30rpx;
		}

		.more-select {
			margin: 30rpx 0;
			font-size: 30rpx;
		}

		.more-time-select {
			margin-top: 30rpx;
			width: 100%;
			height: 7vh;
			display: flex;
			align-items: center;
			background-color: #F8F8FA;
			border-radius: 30rpx;
			position: relative;

			.more-gray {
				color: #BFBFBF;
				font-size: 30rpx;
				width: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
			}

			.more-black {
				font-size: 28rpx;
				width: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 20rpx;
			}

			.more-img {
				width: 35rpx;
				height: 35rpx;
				margin-left: 15rpx;
			}

			.select-img {
				position: absolute;
				right: 40rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 25rpx;
				height: 18rpx;
			}
		}

		.more-statues-father {
			width: 103%;
			height: 7vh;
			margin-top: 30rpx;
			display: flex;
			margin-left: -10rpx;
			// background-color: green;
			justify-content: space-between;
			// align-items: center;

			.more-statues-gray {
				color: #888888;
				font-size: 28rpx;
			}

			.more-statues-button {
				width: 30%;
				// margin-right: 2%;
				margin: 0 1%;
				height: 5.5vh;
				border-radius: 40rpx;
				font-size: 28rpx;
				background-color: #fff;
				border: 1rpx solid #D9DADC;
				color: #555555;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			}

			.more-statues-button-target {
				width: 30%;
				margin: 0 1%;
				height: 5.5vh;
				border-radius: 40rpx;
				font-size: 28rpx;
				background-color: #fff;
				border: 1rpx solid #0da6f8;
				color: #0da6f8;
				display: flex;
				justify-content: center;
				align-items: center;
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			}
		}
	}

	.calendar-father {
		position: fixed;
		top: 100rpx;
		left: 60rpx;
		width: 700rpx;
		height: 600rpx;
		background-color: #fff;
		z-index: 9998;
	}

	.selected {
		margin-top: 40rpx;
		width: 100%;
		display: flex;

		.selected-item {
			width: 50%;
			display: flex;
			align-items: center;

			.selected-kuai {
				width: 40rpx;
				height: 40rpx;
				background-color: #F8F8FA;
				border: 2rpx solid #A3A7B6;
				border-radius: 10rpx;
				margin-right: 20rpx;
			}

			.selected-kuai-target {
				width: 40rpx;
				height: 40rpx;
				background-color: #F8F8FA;
				border: 2rpx solid #1083F8;
				color: #1083F8;
				font-weight: 600;
				border-radius: 10rpx;
				margin-right: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.input-next {
		position: fixed;
		bottom: 850rpx;
		left: 70rpx;
		width: 610rpx;
		// height: 300rpx;
		border-radius: 30rpx;
		z-index: 102;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		padding: 40rpx 30rpx;
		z-index: 9999;
	
		.next-father {
			color: #999;
			margin: 10rpx;
			font-size: 28rpx;
		}
	}
	
	.nomessage {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 200rpx;
		font-size: 34rpx;
		color: #999;
	}
</style>