<template>
	<view class="all-bgc guodu" :style="!transition?'opacity: 0':'opacity: 1'" style="transition: opacity 1s ease;">
		<view class="buttons-father">
			<input class="title-input" type="text" v-model="plzinfo.searchContent" placeholder="请领单号/请领人/请领日期"
				@confirm="clickconfirm" />
			<image v-show="plzinfo.searchContent" class="title-input-img" src="@/static/x.png"
				@click="chongzhi();handleClick1()" />
			<view class="title-ball" @click="clickconfirm();handleClick()">
				<image class="title-ball-img" :src="imgSrc" mode="aspectFill"></image>
			</view>
			<view class="title-ball" @click="chongzhi();handleClick1()">
				<image class="title-ball-img" :src="imgSrc1" mode="aspectFill"></image>
			</view>
			<view class="center-font">
				<image src="/static/index/purchaseorder/company.png" mode="aspectFill" class="center-font-imge"></image>
				{{ uni.getStorageSync('nuName')}}
			</view>

			<view class="right-buttons">
				<view :class="manyselect?`right-button-blue`:`right-button-white`" @click="startselect()"
					v-show="plsbuy[lefttarget]?.status==`1`">
					<image :src="`/static/index/warehouse/procurement/picking/piliang${manyselect?`target`:``}.png`" />
					<view>
						批量统计
					</view>
				</view>
				<view class="right-button" @click="huituiclick()" v-show="plsbuy[lefttarget]?.status==`1`">
					<image src="/static/index/warehouse/procurement/picking/huitui.png" />
					<view>
						回退
					</view>
				</view>
			</view>
			<view class="mengban" style="background: #fff;width:100vw;right:0;left: 0vw;top:-5vw;height: 110vh;"
				v-if="nomessageshow">
				<defaultr cont="暂无数据" style="z-index: 999;margin: auto;"></defaultr>
			</view>
		</view>
		<tanchuang :show="badshow" font="确定要回退这个请领单吗" @back="badshow=false;" @right="huitui"> </tanchuang>
		<tanchuang :show="chukushow" font="确定要出库吗" @back="chukushow=false;" @right="chukuclick"> </tanchuang>

		<view class="other-contain" v-show=" !nomessageshow">
			<view class="other-contain-left">
				<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 ? 14 : 13.5 + selectType * 23.5}%` }">
					</view>
				</view>
				<scroll-view scroll-y="true" scroll-with-animation class="left-menu-scroll" :scroll-top="leftscrolltop"
					@scrolltolower="plsbuytolower" :lower-threshold="200">
					<!-- <view style="height: 1%;"></view> -->

					<view class="haventmessage" v-if="shownomessage">
						<view class="que">
							<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
							<view>暂无数据</view>
						</view>
					</view>
					<view class="pls-card" v-for="(v,i) in plsbuy" :key='i' @click="clickLeftMenu(i,v)"
						:style="{borderColor: manyselect ? (selectarray.includes(v.qldNo) ? '#0f9fff' : 'transparent'): (i === lefttarget ? '#0f9fff' : 'transparent')}">
						<view
							style="background: #ff5757;position: absolute;width: 1.3vw;height: 1.3vw;border-radius: 50%;right: 0vw;top: 0vw;"
							v-if="v.izYgRead=='N'">
						</view>
						<view class="pls-card-title">
							<view class="middle-title-spec">
								请领单号
							</view>
							<view class="title-left">
								{{ v.qldNo }}
							</view>
						</view>
						<view class="pls-card-middle">
							<view class="middle-heng"></view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
									{{ v.tjTime.replace(/-/g, '.') }}
								</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="font-size: 25rpx;">
										{{ "[ " + v.tjByName + " ]" }}
									</view>
								</view>
							</view>
							<view class="pls-card-middle-one">
								<view class="middle-title"
									:style=" v?.status === '2' || v?.status === '3' ?{color:`#FF5757`}:{}">
									{{
									Number(v.status)>1?
								  v?.status === '2' 
								    ? v.zfTime?.slice(0,10).replace(/-/g, '.') 
								    : v?.status === '3'
								      ? v.htTime?.slice(0,10).replace(/-/g, '.') 
								      : v.ckTime?.slice(0,10).replace(/-/g, '.') 
									  : ""
								}}

								</view>
								<view class="middle-heng-father">
									<image class="middle-ball-img" style="width: 32rpx;height: 32rpx;"
										v-if="v?.status === '2' || v?.status === '3'"
										src="/static/index/requestform/iserror.png" />
									<view class="middle-ball" style="background-color: #1083F8;"
										v-else-if="Number(v.status)==1">
									</view>
									<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
								</view>
								<view class="end-font">

									<view :style="v?.status === '2' || v?.status === '3' ?{color:`#FF5757`}:{}">
										{{
									  v?.status === '2' 
									    ? `已作废`
									    : v?.status === '3'
									      ? `已回退`
									      : `已出库`
									}}

									</view>
									<view style="font-size: 25rpx;" v-if="Number(v.status)>1"
										:style=" v?.status === '2' || v?.status === '3' ?{color:`#FF5757`}:{}">
										{{ "[ " +   (v?.status === '2' 
									    ? v?.zfByName
									    : v?.status === '3'
									      ? v?.htByName
									      : v?.ckByName)+ " ]" }}
									</view>
								</view>
							</view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
									{{ Number(v.status)==5 ? v.shTime?.slice(0,10).replace(/-/g, '.') :""}}
								</view>

								<view class="middle-heng-father">

									<view class="middle-ball"
										:style="Number(v.status)<4?{backgroundColor: `#E5E5E5`}:{}"
										v-if="Number(v.status)!=5"></view>
									<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
								</view>
								<view class="end-font">
									<view v-if="v?.cgdType!='9'">
										已收货
									</view>
									<view style="font-size: 25rpx;" v-if="Number(v.status)==5">
										{{ "[ " + v.shByName + " ]" }}
									</view>
								</view>
							</view>
						</view>
						<view class="pls-card-end">
							<view class="end-left">
								<image class="end-left-img" src="/static/index/requestform/gongyingshang.png" />
								<view class="end-left-font">
									{{ v.nuName }}
								</view>
							</view>
							<view :class="v?.status === '2' || v?.status === '3' ?`tag-fail`:`tag-success`">
								{{ v.statusText  }}
							</view>
						</view>
					</view>
					<view class="pls-card center" v-if="!shownomessage&&plsbuy.length===1">
						<view class="que">
							<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
							<view>暂无数据</view>
						</view>
					</view>
					<view class="pls-card center" v-if="!shownomessage&&plsbuy.length===1">
						<view class="que">
							<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
							<view>暂无数据</view>
						</view>
					</view>
					<view class="pls-card center" v-if="!shownomessage&&plsbuy.length===2">
						<view class="que">
							<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
							<view>暂无数据</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="other-contain-right">
				<scroll-view scroll-y="true" scroll-with-animation class="right-contain">
					<view class="right-ones">
						<view class="right-one" v-for="(item,index) in rightarray" :key="index">
							<view class="right-one-left">
								<view class="bgimg">
									<image class="left-image"
										:src="item.materialInfo?.materialImg?serverUrl+item.materialInfo?.materialImg:'/static/index/procurement/k.png'"
										mode="aspectFill"></image>
								</view>
								<view class="left-tages">
									{{ item.materialInfo.categoryName}}
								</view>
								<view class="left-tages">
									{{ item.materialInfo.typeName}}
								</view>
								<view class="left-tages" v-if="item.materialInfo.medicationName">
									{{ item.materialInfo.medicationName}}
								</view>
							</view>
							<view class="right-one-right">
								<view class="right-title">
									{{ item.materialInfo.materialName }}
								</view>
								<view class="right-setting">
									规格型号
								</view>
								<view class="right-mm">
									{{ item.materialInfo.materialNo }}
								</view>
								<view class="right-down">
									<view class="">
										<view class="right-first-num">
											{{ item.qlNum }}
										</view>
										<view class="right-first-type">
											请领数量
										</view>
									</view>
									<view class="right-shu"></view>
									<view class="">
										<view class="right-first-num" style="font-weight: 500;">
											{{ item.materialInfo.materialUnits }}
										</view>
										<view class="right-first-type">
											请领单位
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
					<defaultr cont="暂无数据" v-if="rightarray.length==0 && rightdonghua"
						style="width: 30%;height: 30%;position: absolute;">
					</defaultr>
				</scroll-view>
				<view class="bottom-buttons" v-show="plsbuy[lefttarget]?.status==`1`">
					<!-- <view class="button-gray" @click="quxiao">
						取消
					</view> -->
					<view class="button-blue" @click="chukushow=true" v-if="!manyselect">
						出库
					</view>
				</view>
			</view>
		</view>
	</view>
	<errorshow :show="openerror" font="注意：只能选择待出库的请领单" @close="openerror=false" />
	<errorshow :show="qinglingshow" font="注意：批量选择模式请选择一项或以上的请领单" @close="qinglingshow=false" />
	<errorshow :show="chukuerror" :font="chukuvalue" @close="chukuerror=false" />
	<severcard></severcard>
</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 { queryQld, queryQldWlInfo, newtransRead, orderReturn, outbound } from './api/lunpan.js'
	import nomessage from './components/nomessage.vue'
	import defaultr from './components/default.vue'
	const props = defineProps({
		isShow: { type: Boolean }
	});
	const manyselect = ref(false);
	const tagsarray = ref(["全部", "待出库", "已出库", "已收货 "])
	// const nottrue = Array(10).fill(null)
	// 使用watch监听isShow变化
	const transition = ref(false);
	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			// 当旧值为false，新值为true时延迟0.2秒调用方法
			if (!oldVal && newVal) {
				transition.value = false;
				setTimeout(() => {
					transition.value = true;
				}, 50)
			} else {
				transition.value = false;
			}
		}
	)
	onMounted(() => {
		firstgetqueryCgdList();
		transition.value = false;
		setTimeout(() => {
			transition.value = true;
		}, 50)
	})
	const lanjie = ref(false);

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

		switch (index) {
			case 0:
				plzinfo.status = `1,4,5`
				break
			case 1:
				plzinfo.status = `1`
				break
			case 2:
				plzinfo.status = `4`
				break
			case 3:
				plzinfo.status = `5`
				break
		}
		firstgetqueryCgdList()
	}
	const clickconfirm = () => {
		if (chongzhiLock) return
		chongzhiLock = true
		plzinfo.pageNo = 1;
		plzinfo.canpull = true;
		lefttarget.value = 0
		firstgetqueryCgdList()
		leftscrolltop.value = 0.01
		setTimeout(() => {
			leftscrolltop.value = 0
		}, 10)
		setTimeout(() => chongzhiLock = false, 500)
	}
	let chongzhiLock = false

	const chongzhi = () => {
		if (chongzhiLock) return
		chongzhiLock = true

		plzinfo.searchContent = ""
		changetype(0)
		firstgetqueryCgdList()

		setTimeout(() => chongzhiLock = false, 500)
	}
	const plsbuy = ref([])
	const alltotal = ref(0);
	const lefttarget = ref(0)
	const plzinfo = reactive({
		pageNo: 1,
		pageSize: 5,
		canpull: true,
		searchContent: "",
		status: "1,4,5",
		// elderId: uni.getStorageSync('elderId'),
		// nuId: uni.getStorageSync('nuId')
	})

	const nomessageshow = ref(false);
	const shownomessage = ref(false);
	const leftscrolltop = ref(0)

	const rightarray = ref([]);
	// 检测锁
	const cannomessage = ref(true)
	const rightdonghua = ref(true);
	const firstgetqueryCgdList = () => {
		queryQld(plzinfo).then((res : any) => {
			transition.value = true;
			// console.log("kankan", plzinfo, res)
			if (((res.message === "缺少参数") || (!res.result?.total)) && cannomessage.value) {
				nomessageshow.value = true;
				return
			}
			if (res.result.records.length) {
				shownomessage.value = false;
			} else {
				shownomessage.value = true;
			}
			cannomessage.value = false
			plsbuy.value = []
			plsbuy.value.push(...res.result.records)
			alltotal.value = res.result.total
			if (res.result.records.length) {
				rightdonghua.value = false;
				queryQldWlInfo({ qldNo: res.result.records[0].qldNo }).then((element : any) => {
					rightarray.value = []
					rightarray.value.push(...element.result)
					rightdonghua.value = true;
				})
			} else {
				rightarray.value = []
			}

			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
		queryQld(plzinfo).then((res : any) => {
			// console.log("???加载", res.result.records)
			plsbuy.value.push(...res.result.records)
			alltotal.value = res.result.total
			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}
		})
	}
	const openerror = ref(false)
	const clickLeftMenu = (index : any, item : any) => {

		let num = Math.ceil((index + 1))
		leftscrolltop.value = (num - 2) * 188.5;
		if (item.izYgRead == 'N') {
			let param = {
				status: `yg`,
				qldNo: plsbuy.value[index].qldNo,
			}
			newtransRead(param).then((res : any) => {
				if (res.success) {
					item.izYgRead = 'Y'
				}
			})
		}
		if (manyselect.value) {
			if (item.status == `1`) {
				if (selectarray.value.includes(item.qldNo)) {
					// 删除
					selectarray.value = selectarray.value.filter(v => v !== item.qldNo)
				} else {
					// 加入
					selectarray.value.push(item.qldNo)
				}
			} else {
				openerror.value = true
			}
			return
		}


		lefttarget.value = index;

		rightdonghua.value = false;
		queryQldWlInfo({ qldNo: plsbuy.value[index].qldNo }).then((element : any) => {
			rightarray.value = [];
			rightarray.value.push(...element.result)
			rightdonghua.value = true;
		})
		// form.cgdId = plsbuy.value[index].id
		// form.pageNo = 1
		// form.canpull = true;
		// // console.log("!!!!",form)
		// queryCgdInfoList(form).then(res => {
		// 	InvoicingList.value = []
		// 	// console.log("数据呢", res.result.records)
		// 	InvoicingList.value.push(...res.result.records);
		// 	if (form.pageNo) {
		// 		clickmiddle(0);
		// 	}
		// })


	}
	const serverUrl = ref("")
	onLoad(() => {
		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
	})
	const badshow = ref(false)
	const huitui = () => {
		let data = {
			qldNo: plsbuy.value[lefttarget.value].qldNo,
			nuId: uni.getStorageSync('nuId'),
			nuName: uni.getStorageSync('nuName'),

		}
		orderReturn(data).then((res : any) => {
			console.log('回退', res)
			badshow.value = false
			if (res.success) {
				plsbuy.value[lefttarget.value] = res.result.result
			} else {
				plzinfo.pageNo = 1;
				plzinfo.canpull = true;
				leftscrolltop.value = 0.01
				setTimeout(() => {
					leftscrolltop.value = 0
				}, 50)
				lefttarget.value = 0
				firstgetqueryCgdList();
			}

			setTimeout(() => {
				uni.showToast({
					title: res.success ? res.result.message : res.message,
					icon: 'none', // 'none' 表示不带图标
					duration: 3000
				})
			}, 300)

		})
	}
	// const shouhuoshow = ref(false)

	// const shouhuo = () => {
	// 	// let param = {
	// 	// 	qldNo: plsbuy.value[lefttarget.value].qldNo,
	// 	// 	elderId: uni.getStorageSync('elderId'),
	// 	// 	nuId: uni.getStorageSync('nuId')
	// 	// }
	// 	// confirmReceipt(param).then((res : any) => {
	// 	// 	console.log('收货', param, res)
	// 	// 	shouhuoshow.value = false
	// 	// 	if (res.success) {
	// 	// 		plsbuy.value[lefttarget.value] = res.result.result
	// 	// 	} else {
	// 	// 		plzinfo.pageNo = 1;
	// 	// 		leftscrolltop.value = 1
	// 	// 		setTimeout(() => {
	// 	// 			leftscrolltop.value = 0
	// 	// 		}, 50)
	// 	// 		lefttarget.value = 0
	// 	// 		plzinfo.canpull = true;
	// 	// 		firstgetqueryCgdList();
	// 	// 	}

	// 	// 	setTimeout(() => {
	// 	// 		uni.showToast({
	// 	// 			title: res.success ? res.result.message : res.message,
	// 	// 			icon: 'none', // 'none' 表示不带图标
	// 	// 			duration: 3000
	// 	// 		})
	// 	// 	}, 300)

	// 	// })
	// }
	const goback = () => {
		uni.navigateBack()
	}
	const selectarray = ref([]);

	const startselect = () => {

		selectarray.value = [];
		manyselect.value = !manyselect.value
		if (!manyselect.value) {
			lefttarget.value = 0
		}
	}
	const huituiclick = () => {
		if (manyselect.value) {
			console.log("55555")
			selectarray.value = [];
			manyselect.value = false
			leftscrolltop.value = 0.01
			setTimeout(() => {
				leftscrolltop.value = 0
			}, 50)
		} else {

			badshow.value = true
		}
	}
	// const quxiao = () => {
	// 	selectarray.value = [];
	// 	manyselect.value = false;

	// }
	const chukushow = ref(false);
	const qinglingshow = ref(false)
	const chukuerror = ref(false);
	const chukuvalue = ref("")

	const chukuclick = () => {
		if (manyselect.value && !selectarray.value.length) {
			qinglingshow.value = true
			return
		}
		let data = {
			qldNo: manyselect.value ? selectarray.value.join(',') : plsbuy.value[lefttarget.value].qldNo,
			nuId: uni.getStorageSync('nuId'),
			// elderId: uni.getStorageSync('elderId'),
			nuName: uni.getStorageSync('nuName'),
			// elderName: uni.getStorageSync(`NUall`).elderInfo.name

		}
		outbound(data).then((res : any) => {
			if (res.success) {
				selectarray.value = [];
				manyselect.value = false
				chukushow.value = false
				plzinfo.pageNo = 1;
				lefttarget.value = 0
				plzinfo.canpull = true;
				leftscrolltop.value = 0.01
				setTimeout(() => {
					leftscrolltop.value = 0
				}, 50)
				lefttarget.value = 0
				firstgetqueryCgdList();
			}
			console.log("!!!!!!", res)
			setTimeout(() => {
				if (res.success) {
					uni.showToast({
						title: res.result.message,
						icon: 'none', // 'none' 表示不带图标
						duration: 3000
					})
				} else {
					chukuerror.value = true;
					chukuvalue.value = res.message;
				}
				// uni.showToast({
				// 	title: res.success ? res.result.message : res.message,
				// 	icon: 'none', // 'none' 表示不带图标
				// 	duration: 3000
				// })
			}, 300)

		})

	}
	const basePath = '/static/index/procurement/' // 图片公共路径
	const imgNormal = basePath + 'sh.png'
	const imgActive = basePath + 'shr.png'

	const imgSrc = ref(imgNormal)
	const busy = ref(false) // 防止重复点击造成多个定时器

	function handleClick() {
		if (busy.value) return
		busy.value = true

		// 切换到 active 图
		imgSrc.value = imgActive

		// 0.5 秒后复原
		setTimeout(() => {
			imgSrc.value = imgNormal
			busy.value = false
		}, 300)
	}
	const basePath1 = '/static/index/procurement/' // 图片公共路径
	const imgNormal1 = basePath + 'cz.png'
	const imgActive1 = basePath + 'czr.png'

	const imgSrc1 = ref(imgNormal1)
	const busy1 = ref(false) // 防止重复点击造成多个定时器

	function handleClick1() {
		if (busy1.value) return
		busy1.value = true

		// 切换到 active 图
		imgSrc1.value = imgActive1

		// 0.5 秒后复原
		setTimeout(() => {
			imgSrc1.value = imgNormal1
			busy1.value = false
		}, 300)
	}
</script>

<style scoped lang="less">
	.guodu {
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}

	.all-bgc {
		background-color: rgb(239, 240, 244);
		// background-color: red;
		// padding: 2vw;
		padding-left: 1vw;
		// padding-top: 1.5vh;
		width: 92vw;
	}

	.right-container-tem {
		display: flex;

		.right-container-tem-text {
			font-size: 30rpx;
			margin-right: 20rpx;
		}


		.right-container-tem-img {
			width: 38rpx;
			height: 38rpx;
		}
	}

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

		.center-font {
			position: absolute;
			left: 33.5%;
			top: 47%;
			transform: translateY(-50%);
			color: #555555;
			font-size: 29rpx;
			font-weight: 800;
			display: flex;
			align-items: center;

			.center-font-imge {
				width: 48rpx;
				height: 48rpx;
				margin-right: 10rpx;
			}
		}

		.title-input {
			width: 405rpx;
			height: 5.1vh;
			background-color: #fff;
			font-size: 27.5rpx;
			padding-left: 26rpx;
			border-radius: 40rpx;
			padding-top: 2rpx;
			border: 2rpx solid #C9C9C9;
		}

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

		.right-button-white {
			width: 10vw;
			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;
			margin-right: 15rpx;

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

		.right-button-blue {
			width: 10vw;
			height: 3.3vw;
			background-color: #fff;
			border-radius: 1.65vw;
			border: 1px solid #1083F8;
			font-weight: 400;
			font-size: 1.4vw;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #1083F8;
			margin-right: 15rpx;

			image {
				width: 1.5vw;
				height: 1.5vw;
				margin: 0.1vw 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;
		}
	}

	.other-contain {
		width: 100%;
		height: 93vh;
		display: flex;
		// background-color: rgb(239, 240, 244);
		// transition: opacity 1s ease;

		.other-contain-left {
			width: 32%;
			height: 100%;

			.left-menu-scroll {
				margin-top: 2.5%;
				height: 90%;
				width: 100%;

				.pls-card {
					width: 100%;
					height: 359rpx;
					border: transparent 3rpx solid;
					background-color: #fff;
					border-radius: 40rpx;
					margin-bottom: 18rpx;
					padding: 0 30rpx;
					position: relative;
					background-color: #fff;

					.pls-card-title {
						height: 5.6vh;
						width: 105%;
						display: flex;
						justify-content: space-between;
						align-items: flex-end;

						.title-left {
							font-weight: 800;
							font-size: 32rpx;
							margin-right: 20rpx;
						}

						.title-right {
							display: flex;
							align-items: flex-end;
							font-size: 30rpx;
							position: relative;

							.title-right-big {
								font-weight: 800;
								font-size: 40rpx;
								margin-right: 35rpx;
								color: #555555;
							}

							.title-right-img {
								position: absolute;
								right: -10rpx;
								bottom: 6rpx;
								width: 40rpx;
								height: 40rpx;
							}
						}
					}

					.pls-card-middle {
						width: 100%;
						height: 11vh;
						margin-top: 2vh;
						display: flex;
						position: relative;

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

						.pls-card-middle-one {
							width: 33.3%;
							height: 100%;

							// background-color: yellow;
							.middle-title {
								width: 100%;
								height: 2.1vh;
								// background-color: #007CFF;
								color: #888888;
								text-align: center;
								font-size: 25rpx;
								overflow: hidden;
							}

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

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

					.pls-card-end {
						width: 100%;
						height: 7.7vh;

						display: flex;
						align-items: center;
						justify-content: space-between;
						position: relative;

						.end-left {
							height: 100%;
							display: flex;
							align-items: center;

							.end-left-img {
								width: 37rpx;
								height: 37rpx;
							}

							.end-left-font {
								margin-top: 3rpx;
								width: 400rpx;
								color: #666666;
								margin-left: 10rpx;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}

						.tag-fail {
							width: 120rpx;
							height: 50rpx;
							border-radius: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #FDEBEC;
							color: #FF5757;
							position: absolute;
							right: -5rpx;
							bottom: 20rpx;
						}

						.tag-success {
							width: 120rpx;
							height: 50rpx;
							border-radius: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							background-color: #ECF6FF;
							color: #1083F8;
							border: 1rpx solid #1083F8;
							position: absolute;
							right: -5rpx;
							bottom: 20rpx;
						}
					}
				}
			}

			.left-selecttype {
				width: 98%;
				height: 80rpx;
				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: 25%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #999999;
					font-size: 31rpx;
					position: relative;

				}

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

		.other-contain-right {
			width: 65.5%;
			margin-left: 1%;
			height: 97%;
			background-color: #fff;
			border-radius: 40rpx;
			position: relative;

			.right-contain {
				width: 100%;
				height: 95%;
				margin-top: 20rpx;
				display: flex;
				flex-wrap: wrap;
				position: relative;


				.right-ones {
					display: flex;
					width: 100%;
					flex-wrap: wrap;
					padding-left: 15rpx;
					padding-top: 13rpx;
					padding-bottom: 80rpx;


					.right-one {
						width: 592rpx;
						height: 270rpx;
						margin-left: 20rpx;
						margin-bottom: 15rpx;
						background-color: #F9F9F9;
						border-radius: 30rpx;
						display: flex;

						.right-one-left {
							height: 100%;
							width: 40%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-around;
							padding: 0.5vw 0;

							.bgimg {
								width: 6.5vw;
								height: 6vw;
								margin: 0.3vw auto 0.25vw;
								border-radius: 1.1vw;
								background: #fff;
								display: flex;
								justify-content: center;
								align-items: center;
								padding: 0.2vw;

								>image {
									width: 100%;
									height: 100%;
									border-radius: 1.1vw;
								}
							}

							.left-tages {
								width: 130rpx;
								height: 36rpx;
								border-radius: 30rpx;
								color: #555555;
								border: 1rpx solid #D2D2D2;
								margin-top: 5rpx;
								font-size: 20rpx;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
								text-align: center;
								line-height: 34rpx;
							}
						}

						.right-one-right {
							height: 100%;
							width: 60%;

							.right-title {
								font-size: 34rpx;
								font-weight: 600;
								margin-top: 25rpx;
								color: #222222;
								width: 300rpx;
								overflow: hidden;
								/* 必须 */
								white-space: nowrap;
								/* 强制单行 */
								text-overflow: ellipsis;
								/* 显示省略号 */
							}

							.right-setting {
								color: #888888;
								margin-top: 5rpx;
								font-size: 25rpx;
							}

							.right-mm {
								color: #555555;
								font-size: 28rpx;
							}

							.right-down {
								display: flex;
								margin-top: 15rpx;

								.right-first-num {
									font-size: 35rpx;
									color: #555555;
									font-weight: 600;
								}

								.right-first-type {
									color: #888888;
									font-size: 23rpx;
								}

								.right-shu {
									width: 2rpx;
									height: 50rpx;
									background-color: #C9C9C9;
									margin: 0 40rpx;
									margin-top: 10rpx;
								}
							}
						}
					}
				}

			}
		}
	}

	.bottom-buttons {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 10%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		background-color: #fff;
		border-radius: 40rpx;
	}

	.button-gray {
		background-color: #f8f8f8;
		color: #555555;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #555555;
		width: 180rpx;
		height: 70rpx;
		border-radius: 40rpx;
		margin-right: 30rpx;
	}

	.button-blue {
		background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
		border: 1rpx solid #1083F8;
		color: #1083F8;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 180rpx;
		height: 70rpx;
		border-radius: 40rpx;
		margin-right: 60rpx;
	}

	.button-gray: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.4vw;
		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;
	}

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

	.title-ball {
		width: 5.3vh;
		height: 5.3vh;
		border-radius: 50%;
		margin-left: 10rpx;
		background-color: #fff;
		border: 2rpx solid #D9DADC;
		display: flex;
		justify-content: center;
		align-items: center;

		.title-ball-img {
			width: 55%;
			height: 55%;
		}
	}

	// .title-ball:active {
	// 	background: linear-gradient(to top, #1083F8, #1083F8);
	// 	color: #fff;
	// 	font-size: 44rpx;
	// 	font-weight: 700;
	// 	border: 1rpx solid #00C9FF;
	// }
	.haventmessage {
		width: 100%;
		height: 100%;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;

	}

	.que {
		width: 10vw;
		height: 10vw;
		// margin: auto;

		image {
			width: 100%;
			height: 100%;
		}

		view {
			margin-top: -30rpx;
			width: 100%;
			text-align: center;
			font-weight: 300;
			font-size: 1.2vw;
			color: #555555;
		}
	}

	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.title-input-img {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		left: 370rpx;
		top: 47%;
		transform: translateY(-50%);
	}
</style>