<template>
	<view class="contain">
		<view v-show="moreindex!=-1" class="mengban" @click="moreindex=-1"></view>
		<view class="contain-left">
			<view class="title-input-father">
				<input class="title-input" type="text" v-model="plzinfo.cgdParamInfo" maxlength="15"
					placeholder="采购单号/采购日期/供应商" @confirm="search()" />
				<image v-show="plzinfo.cgdParamInfo" class="title-input-img" src="@/static/x.png"
					@click="plzinfo.cgdParamInfo=``;search()" />
				<!-- <view class="title-input-button" @click="search();">
					检索
				</view> -->
				<view class="title-ball" @click="search();handleClick()">
					<image class="title-ball-img" :src="imgSrc" mode="aspectFill"></image>
				</view>
			</view>
			<view class="left-menu-father">
				<scroll-view scroll-y="true" scroll-with-animation class="left-menu-scroll" :scroll-top="leftscrolltop"
					@scrolltolower="plsbuytolower" :lower-threshold="400">
					<view class="pls-card" v-for="(v,i) in plsbuy" :key='i' @click="clickLeftMenu(i,v)" :style="{
							  borderColor: i === lefttarget ? '' : 'transparent',
							 
							}">

						<view v-if="moreindex==i" class="more-father">
							<view class="more-one" @click="share">
								分享
							</view>
							<view class="more-one" v-if="Number(v.status)<=0" @click="bebad(v)">
								作废
							</view>
						</view>
						<text style="display: block;background: #ff5757;
						position: absolute;width: 1.3vw;height: 1.3vw;border-radius: 50%;right: -0.1vw;top: -0.1vw;"
							v-if="v.izNew=='Y'"></text>
						<view class="pls-card-title">
							<view class="title-left">
								{{ v.cgdNo }}
							</view>
							<view class="title-right">
								<text style="position: absolute;bottom: 4rpx;left: -30rpx;">
									￥
								</text>

								<view class="title-right-big">
									{{ Number(v.totalPrice ) < 10000? Number(v.totalPrice).toFixed(2) : Number(v.totalPrice)  }}
								</view>

								<image class="title-right-img" src="/static/more.png" @click="openmore(i)" />

							</view>
						</view>
						<view class="pls-card-middle">
							<view class="middle-heng"></view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
									{{ v.qgDate.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>
										{{ "[ " + v.qgBy + " ]" }}
									</view>
								</view>
							</view>
							<view class="pls-card-middle-one">
								<view class="middle-title" :style=" v?.cgdType=='9' ?{color:`#FF5757`}:{}">

									{{ v?.cgdType=='9' ?v.zfTime?.slice(0,10).replace(/-/g, '.'):Number(v.status)<1?``:v.jhTime?.slice(0,10).replace(/-/g, '.') }}
								</view>
								<view class="middle-heng-father">
									<image class="middle-ball-img" style="width: 32rpx;height: 32rpx;"
										v-if="v?.cgdType=='9'" src="/static/index/requestform/iserror.png" />
									<view class="middle-ball" style="background-color: #1083F8;"
										:style=" v?.cgdType=='9' ?{backgroundColor:`#FF5757`}:{}"
										v-else-if="Number(v.status)<2"></view>
									<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />

								</view>
								<view class="end-font">
									<view :style=" v?.cgdType=='9' ?{color:`#FF5757`}:{}">
										{{ v?.cgdType=='9' ?`已作废`:`拣货` }}

									</view>
									<view v-if="v?.jhBy || v?.zfBy" :style=" v?.cgdType=='9' ?{color:`#FF5757`}:{}">
										{{ Number(v.status)>0||v?.cgdType=='9'? "[ " +  (v?.cgdType=='9' ?v?.zfBy:v?.jhBy )+ " ]":"" }}
									</view>
								</view>
							</view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
									{{ v.wjTime?.slice(0,10).replace(/-/g, '.') }}
								</view>
								<view class="middle-heng-father">
									<view class="middle-ball" v-if="Number(v.status)<2"></view>
									<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />


								</view>
								<view class="end-font">
									<view>
										完结
									</view>
									<view v-if="Number(v.status)>1 && v.wjBy ">
										{{ "[ " + v.wjBy + " ]" }}
									</view>
								</view>
							</view>
						</view>
						<view class="pls-card-end">
							<view class="end-left">
								<image class="end-left-img" src="/static/shili.png" />
								<view class="end-left-font">
									{{ v.gysName }}
								</view>
							</view>
							<view :class="v?.cgdType=='9' ?`tag-fail`:`tag-success`">

								{{ v?.cgdType=='9' ?`已作废`:tagesstatues[Number(v.status)]  }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- <view class="white-zhezhao"></view> -->
		<view class="contain-right">
			<view class="contain-right-title">
				<view class="contain-right-button" @click="ification=true">
					<image class="buttont-img" src="/static/index/procurement/sx.png" />
					<view class="button-font">
						筛选
					</view>
				</view>
				<view class="contain-right-button" @click="goback()" style="margin-right: 1.2vw;">
					<image class="buttont-img" style="margin-top: 4rpx;" src="/static/index/purchaseorder/back.png" />
					<view class="button-font">
						返回
					</view>
				</view>
			</view>
			<view class="contain-right-middle">
				<scroll-view scroll-y="true" class="middle-Y" scroll-with-animation :scroll-top="Invoitop">
					<view class="middle-Y-father">
						<view class="middle-one" v-for="(v,i) in InvoicingList" :key='i'
							:style="{border: middletarget === i? '2rpx dashed #3A9BFF': '2rpx solid #E5E5E5',backgroundColor:middletarget === i?`#F9FCFF`:``}"
							@click="clickmiddle(i)">
							<image class="middle-img"
								:src="v.materialImg?serverUrl + v.materialImg : '/static/index/warehouse/procurement/k.png'"
								mode="aspectFill"></image>
							<view class="middle-right">
								<view class="right-title">
									{{ v.wlName }}
								</view>
								<view class="right-middle"
									style="white-space: nowrap;text-overflow:ellipsis;overflow: hidden;">
									规格型号: {{ v.wlSpecificationModel }}
								</view>
								<view style="color: #888888;">
									采购数量: {{ v.purchaseQuantity + v.wlUnits }}
								</view>
							</view>
						</view>
						<view class="middle-one-white center" v-if="InvoicingList.length<4">
							<view class="que">
								<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
								<view>暂无数据</view>
							</view>
						</view>
						<view class="middle-one-white center" v-if="InvoicingList.length<3">
							<view class="que">
								<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
								<view>暂无数据</view>
							</view>
						</view>
						<view class="middle-one-white center" v-if="InvoicingList.length<2">
							<view class="que">
								<image src="/static/index/procurement/que.png" mode="aspectFill"></image>
								<view>暂无数据</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="wuliao-title">
					物料详情
					<view class="wuliao-heng"></view>

				</view>
				<view style="width: 100%;
				height: 0.5rpx;background-color: #eff1f3;">

				</view>
				<view class="right-bottom">
					<view class="right-bottom-left">
						<image class="left-img"
							:src="showvalue?.materialImg?serverUrl + showvalue?.materialImg : '/static/index/warehouse/procurement/k.png'"
							mode="aspectFill"></image>
						<view class="left-tags">
							<view class="tags-one">
								{{ showvalue?.categoryId_dictText }}
							</view>
							<view class="tags-one">
								{{ showvalue?.typeId_dictText }}
							</view>
							<view class="tags-one" v-if="showvalue.medicationId_dictText">
								{{showvalue.medicationId_dictText}}
							</view>

						</view>
					</view>
					<view class="right-bottom-right">
						<view class="bottom-right-title">
							<view class="title-left">
								{{ showvalue?.wlName }}
							</view>
							<!-- <view class="title-right">
								<text
									style="position: absolute;top: 8rpx;left: -35rpx;font-weight: 300;font-size: 28rpx;">
									￥
								</text>
								<view style="color: #555555;">
									{{Number(showvalue.totalPrice).toFixed(2) }}
								</view>

							</view> -->
						</view>
						<view class="bottom-right-middle">
							<view class="middle-onecard">
								<view class="threeone">
									<view class="gray-text">
										物料编码
									</view>
									<view class="right-text">
										{{ showvalue?.wlMaterialNo }}
									</view>
								</view>
								<view class="threeone" style="white-space: nowrap; ">
									<view class="gray-text" style="white-space: nowrap;">
										规格型号
									</view>
									<view class="right-text" style="white-space: nowrap;">
										{{ showvalue?.wlSpecificationModel }}
									</view>
								</view>
								<view class="gray-heng"></view>
							</view>

							<view class="middle-onecard">
								<view class="threeone">
									<view class="gray-text">
										采购单价
									</view>
									<view class="right-text">
										￥{{ Number(showvalue?.procurementPrice).toFixed(2)  }}
									</view>
								</view>
								<view class="threeone">
									<view class="gray-text">
										采购数量
									</view>
									<view class="right-text">
										{{ showvalue?.purchaseQuantity }}
									</view>
								</view>
								<view class="threeone">
									<view class="gray-text">
										采购单位
									</view>
									<view class="right-text">
										{{ showvalue?.wlUnits }}
									</view>
								</view>
								<view class="gray-heng"></view>
							</view>

							<view class="middle-onecard">
								<view class="threeone">
									<view class="gray-text">
										库存数量
									</view>
									<view class="right-text">
										{{ showvalue?.kcsl }}
									</view>
								</view>
								<view class="threeone">
									<view class="gray-text">
										物料上限 ↑
									</view>
									<view class="right-text">
										{{ showvalue?.wlUpperLimit }}
									</view>
								</view>
								<view class="threeone">
									<view class="gray-text">
										物料下限 ↓
									</view>
									<view class="right-text">
										{{ showvalue?.wlLowerLimit }}
									</view>
								</view>
								<view class="gray-heng"></view>
							</view>

							<view class="middle-onecard">
								<view class="threeone" style="width: 100%;">
									<view class="gray-text">
										供应商
									</view>
									<view class="right-text">
										{{ showvalue?.suppliersName }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 没数据了，遮罩 -->
		<nomessageimge cont="暂无数据" :show="nomessageshow" />
		<!-- 分享的弹出层 -->
		<view v-show="shareShow" class="popup-share" @click="shareShow=false">
			<view class="popup-share-content" :style="{ opacity: deletedownisopacity ? 1 : 0 }" @click.stop>
				<view class="share-other">
					<view class="share-main">
						<view class="">
							<view class="share-weight">
								{{ plsbuy[lefttarget]?.cgdNo }}
							</view>
							<view class="share-font">
								供应商：{{ plsbuy[lefttarget]?.gysId_dictText }}
							</view>
							<view class="share-font">
								采购时间：{{ plsbuy[lefttarget]?.qgDate }}
							</view>
						</view>
						<view class="right-flex">
							<view style="font-weight: 600;">
								<text style="vertical-align: 2rpx;">
									￥
								</text>

								<text class="dollar-text">
									{{Number(plsbuy[lefttarget]?.totalPrice).toFixed(2) }}
								</text>
							</view>
							<view class="caigou-font">
								采购金额
							</view>

						</view>

					</view>
					<view class="share-bottom">
						<view style="display: flex;align-items: center;">
							<image class="share-bottom-img" src="/static/index/youngman.png"></image>
							<view style="margin-left: -20rpx;margin-top: 10rpx;">
								<view style="display: flex;">
									<view class="share-name">
										{{ uni.getStorageSync('realname') }}
									</view>
									<view class="share-font">
										采购人
									</view>
								</view>
								<view class="share-phone">
									{{ uni.getStorageSync('username') }}
								</view>
							</view>


						</view>
						<view class="company-father">
							<view class="company">
								{{ uni.getStorageSync('orgListName') }}
							</view>
							<view class="blue-button" @click="clickshare">
								分享
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<!-- <view :class="['neuro-wrapper', donghuacs ? 'is-active' : '']" v-show="badshow">
			<view class="neuro-mask" @click="badshow=false;"></view>
			<view class="neuro-box" @click.stop>

				<view class="button-father">
					<view class="button-white" @click="badshow=false;">取消</view>
					<view class="button" @click="zuofei">确定</view>
				</view>

				<view class="title">作废</view>
				<view class="card-font">
					确定要作废这个采购单吗
				</view>
			</view>
		</view> -->
		<view class="mengban" style="background: RGBA(239, 240, 244, 0.55);" v-if="ification"
			@click="ification = false"></view>
		<classification @confirm="confirm" :show="ification" :typenum="2" :cgdId="plsbuy[lefttarget]?.id">
		</classification>

		<tanchuang :show="badshow" font="确定要作废这个采购单吗" @back="badshow=false;" @right="zuofei"> </tanchuang>

	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick } from 'vue';
	import { editIzNew, queryInvoicingList, getCgdMaterialTreeData, queryNuInfoByNuId, updateKfstatus, queryCgdList, queryCgdInfoList, queryWlInfoByWlId, voidedCgdMain, getShareUrlByCode, editShareInfo } from './api/lunpan.js'
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import classification from './components/cgdclass.vue'
	import nomessageimge from '@/pages/procurement/components/nomessage.vue';
	import tanchuang from '@/pages/procurement/components/tanchuang.vue';
	const ification = ref(false)
	const serverUrl = ref("")
	onLoad(() => {

		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
	})
	onMounted(() => {
		firstgetqueryCgdList();
	})
	const tagesstatues = ["待入库", "待完结", "已完结"];
	const searchValue = ref("");
	const middletarget = ref(0);

	const plzinfo = reactive({
		nuId: uni.getStorageSync('nuId'),
		pageNo: 1,
		pageSize: 10,
		canpull: true,
		cgdParamInfo: ""
	})
	const mobanplzinfo = {
		nuId: uni.getStorageSync('nuId'),
		pageNo: 1,
		pageSize: 10,
		canpull: true,
		cgdParamInfo: ""
	}
	const leftscrolltop = ref(0)

	const plsbuy = ref([])
	const nomessageshow = ref(false);
	const firstgetqueryCgdList = () => {
		console.log("zzzz")
		queryCgdList(plzinfo).then((res : any) => {
			plsbuy.value.push(...res.result.records)
			console.log("zzzz", plsbuy.value)
			if (!res.result.total) {
				nomessageshow.value = true;
			}
			if (res.result.records.length) {
				form.cgdId = plsbuy.value[0].id
				queryInvo();
			}

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

		})
	}
	const confirm = (e : any) => {
		form.categoryId = e.categoryId;
		form.typeId = e.typeId;
		form.medicationId = e.medicationId;
		form.suppliers = e.suppliers;
		form.cgdId = e.cgdId;
		form.pageNo = 1;
		middletarget.value = 0;
		InvoicingList.value = [];
		queryInvo();
		ification.value = 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
		queryCgdList(plzinfo).then((res : any) => {
			plsbuy.value.push(...res.result.records)
			if (plzinfo.pageNo == 1) {
				clickLeftMenu(lefttarget.value, plsbuy.value[lefttarget.value])
			}
			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}
		})
	}
	const lefttarget = ref(0);
	const clickLeftMenu = (index : any, item : object) => {
		if (lefttarget.value != index) {
			middletarget.value = 0;
		}
		let num = Math.ceil((index + 1))
		leftscrolltop.value = (num - 2) * 202;
		lefttarget.value = index;
		form.cgdId = plsbuy.value[index].id
		form.pageNo = 1
		form.canpull = true;
		queryInvo();
		if (item.izNew == 'Y') {
			item.izNew = 'N'
			editIzNew({ id: item.id })
		}
	}
	const showvalue = ref({
		materialImg: "",
		cgrvalue: "",
		gysvalue: "",
		wlName: "",
		procurementPrice: "",
		wlMaterialNo: "",
		wlSpecificationModel: "",
		purchaseQuantity: "",
		wlUnits: "",
		kcsl: "",
		wlUpperLimit: "",
		wlLowerLimit: "",
		suppliersName: "",
		categoryId_dictText: "",
		typeId_dictText: "",
	})

	const goback = () => {
		uni.navigateBack()
	}
	const form = reactive({
		nuId: uni.getStorageSync('nuId'),
		pageNo: 1,
		pageSize: -1,
		categoryId: '',
		typeId: '',
		medicationId: '',
		wlParamInfo: '',
		suppliers: '',
		cgdId: "",
		isWaring: 0,
		canpull: true,
	})
	const mobanform = {
		nuId: uni.getStorageSync('nuId'),
		pageNo: 1,
		pageSize: -1,
		categoryId: '',
		typeId: '',
		medicationId: '',
		wlParamInfo: '',
		cgdId: "",
		isWaring: 0
	}
	const Invoitop = ref(0)
	const clickmiddle = (index : number) => {
		middletarget.value = index;
		showvalue.value = InvoicingList.value[index];
		Invoitop.value = Math.floor(index / 3) * 105;
		Object.assign(form, mobanform)
		form.pageSize = -1;
	}
	const InvoicingList = ref([])
	const queryInvo = () => {
		queryCgdInfoList(form).then(res => {
			// console.log(res.result.records,form)
			InvoicingList.value = [];
			InvoicingList.value.push(...res.result.records);
			clickmiddle(middletarget.value);
		})
	}

	const search = () => {
		// if (!searchValue.value) return
		form.pageNo = 1;
		InvoicingList.value = [];
		middletarget.value = 0;
		// form.wlParamInfo = searchValue.value;
		// form.cgdId = plsbuy.value[lefttarget.value].id
		// queryInvo();

		plzinfo.pageNo = 1;
		plsbuy.value = [];
		queryCgdList(plzinfo).then((res : any) => {
			console.log(res.result.records)
			plsbuy.value.push(...res.result.records)
			if (res.result.records.length) {
				form.cgdId = plsbuy.value[0].id
				queryInvo();
			}
			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}
		})
	}
	const moreindex = ref(-1);
	const zuofeiindex = ref(-1);
	const openmore = (index : number) => {
		zuofeiindex.value = index;
		if (plsbuy.value[index].cgdType == '9') {
			setTimeout(() => {
				uni.showToast({
					title: '该采购单已作废',
					icon: 'error', // 不显示小图标
					duration: 2000
				})
			}, 300)

		} else {
			moreindex.value = index;
		}
	}
	const shareShow = ref(false);
	const deletedownisopacity = ref(false)
	const share = () => {
		shareShow.value = true;
		moreindex.value = -1;
		deletedownisopacity.value = false;
		setTimeout(() => {
			deletedownisopacity.value = true
		}, 100)
	}
	const clickshare = () => {
		editShareInfo({ id: plsbuy.value[lefttarget.value].id }).then((res : any) => {
			if (res.success) {
				getShareUrlByCode({ orgCode: uni.getStorageSync('orgListCode') }).then((res : any) => {
					let href = `${res.shareUrl}/h5/CgdShareInfo?cgdId=${plsbuy.value[lefttarget.value].id}`
					uni.share({
						provider: "weixin",
						scene: "WXSceneSession",
						type: 0,
						href: href,
						summary: "点击查看采购单详情,包含物料规格及采购数量",
						title: `采购单: ${plsbuy.value[lefttarget.value].cgdNo}`,
						imageUrl: "https://www.focusnu.com/media/logo.png",
						success: function (res) {
							console.log("success:");

						},
						fail: function (err) {
							console.log("fail:");

						}
					});
				})
			}
		})


	}
	const badshow = ref(false);
	const donghuacs = ref(false)
	const bebad = (v) => {
		if (Number(v.status) == 1) {
			setTimeout(() => {
				uni.showToast({
					title: '只有采购阶段的单据才能作废',
					icon: 'none', // 不显示小图标
					duration: 2000
				})
			}, 300)
			return
		}
		badshow.value = true;
		moreindex.value = -1;
		donghuacs.value = false;
		setTimeout(() => donghuacs.value = true, 50)
	}
	const zuofei = () => {
		voidedCgdMain({ id: plsbuy.value[zuofeiindex.value].id }).then((res : any) => {
			// console.log("res", res)
			if (res.success) {
				uni.showToast({
					title: res.message,
					icon: 'success', // 'none' 表示不带图标
					duration: 2000
				})
				badshow.value = false;
				InvoicingList.value = [];
				plsbuy.value = []
				Object.assign(plzinfo, mobanplzinfo)
				Object.assign(form, mobanform)
				firstgetqueryCgdList();
			}
		})
	}

	const jiansuotarget = ref(false);
	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)
	}
</script>

<style lang="less" scoped>
	.contain {
		background-color: #f4f4f4;
		// background-color:red;
		width: 91vw;
		height: 100vh;
		padding: 0 0 0 1.1vw;
		display: flex;
		// overflow: hidden;

		.contain-left {
			height: 100vh;
			width: 30%;
			overflow: hidden;
			// background-color: green;

			.title-input-father {
				height: 6vh;
				width: 100%;
				display: flex;
				align-items: center;
				position: relative;

				.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-input {
					width: 82%;
					height: 5.1vh;
					background-color: #fff;
					font-size: 27.5rpx;
					padding-left: 26rpx;
					border-radius: 40rpx;
					padding-top: 2rpx;
					border: 2rpx solid #C9C9C9;
				}

				.title-input-button {
					width: 20%;
					margin-left: 2%;
					height: 5vh;
					border-radius: 40rpx;
					font-size: 28rpx;
					background-color: #fff;
					border: 0.5rpx solid #D9DADC;
					color: #555555;
					display: flex;
					justify-content: center;
					align-items: center;
					// box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
				}

			}

			.left-menu-father {
				margin-top: 1.3vh;
				width: 100%;
				height: 89.5vh;
				// background-color: red;

				.left-menu-scroll {
					height: 100%;
					width: 100%;

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

						.pls-card-title {
							height: 7vh;
							width: 100%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 5rpx;

							.title-left {
								font-weight: 600;
								font-size: 35rpx;
								color: #222222;
							}

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

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

								.title-right-img {
									position: absolute;
									right: -10rpx;
									bottom: 6rpx;
									width: 40rpx;
									height: 40rpx;
									filter: brightness(0.8);
								}
							}
						}

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

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

								.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: #EEEEEE;
										position: absolute;
										top: 50%;
										left: 50%;
										transform: translate(-50%, -50%);
										border-radius: 50%;
									}
								}

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

						.pls-card-end {
							width: 100%;
							height: 7vh;
							margin-top: 1vh;
							display: flex;
							justify-content: space-between;
							position: relative;

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

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

								.end-left-font {
									margin-top: 3rpx;
									width: 350rpx;
									// background-color: #007CFF;
									// font-size: 26rpx;
									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;
								border: 1rpx solid #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;
								border: 1rpx solid #0385FA;
								color: #1083F8;
								position: absolute;
								right: -5rpx;
								bottom: 20rpx;
							}
						}
					}
				}
			}
		}

		.contain-right {
			z-index: 1;
			height: 96vh;
			width: 68.5%;
			border-radius: 30rpx;
			margin-top: 0.3vw;
			margin-left: 1.2%;
			overflow: hidden;
			background-color: #fff;
			// background-color: red;

			.contain-right-title {
				margin-top: 27rpx;
				padding-right: 17rpx;
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: flex-end;

				.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.8vw 0 0;
					color: #555555;

					image {
						width: 1.5vw;
						height: 1.3vw;
						margin: 0 0.5vw 0 0;
					}


				}

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

			.contain-right-middle {
				width: 100%;
				height: 460rpx;
				margin-top: 20rpx;

				.middle-Y {
					width: 100%;
					height: 100%;

					.middle-Y-father {
						display: flex;
						flex-wrap: wrap;
						width: 100%;
						padding-left: 20rpx;
						
						.middle-one-white{
							width: 610rpx;
							height: 200rpx;
							background-color: #fff;
							border-radius: 30rpx;
							margin-left: 20rpx;
							margin-bottom: 30rpx;
							border: 1rpx solid #c9c9c9;
						}

						.middle-one {
							width: 610rpx;
							height: 200rpx;
							background-color: #fff;
							border-radius: 30rpx;
							margin-left: 20rpx;
							margin-bottom: 30rpx;
							display: flex;
							align-items: center;
							justify-content: space-around;

							.middle-img {
								width: 150rpx;
								height: 150rpx;
								margin: 0.3vw 0 0 0.15vw;
								border-radius: 1vw;
							}

							.middle-right {
								width: 350rpx;

								.right-title {
									width: 100%;
									white-space: nowrap;
									/* 不换行 */
									overflow: hidden;
									/* 超出隐藏 */
									text-overflow: ellipsis;
									/* 显示省略号 */
									display: block;
									font-weight: 600;
									font-size: 30rpx;
									margin-bottom: 7rpx;
								}

								.right-middle {
									margin-bottom: 7rpx;
									color: #555555;
								}
							}
						}
					}
				}
			}
		}
	}

	// .white-zhezhao {
	// 	position: fixed;
	// 	height: 100%;
	// 	background-color: #fff;
	// 	width: 68%;
	// 	top: 0;
	// 	left: 32%;
	// }

	.wuliao-title {
		margin-top: 10rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 34rpx;
		font-weight: 600;
		width: 200rpx;

		.wuliao-heng {
			background-color: #1083F8;
			width: 40rpx;
			height: 10rpx;
			border-radius: 5rpx;
			margin-top: 10rpx;
		}
	}

	.right-bottom {
		width: 100%;
		height: 600rpx;
		display: flex;

		.right-bottom-left {
			height: 100%;
			width: 30%;
			padding-left: 30rpx;
			padding-top: 30rpx;

			.left-img {
				width: 250rpx;
				height: 250rpx;
				margin-left: 50rpx;
				margin-top: 2vw;
				border-radius: 1vw;
			}

			.left-tags {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
			}

			.tags-one {
				min-width: 130rpx;
				height: 60rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
				border: 1rpx solid #D2D2D2;
				margin-left: 20rpx;
				margin-top: 20rpx;
				font-size: 25rpx;
				color: #555555;
				padding: 0 0.5vw;
			}
		}

		.right-bottom-right {
			height: 100%;
			width: 70%;

			.bottom-right-title {
				width: 100%;
				height: 120rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				// background-color: red;
				.title-left {
					font-weight: 600;
					font-size: 38rpx;
				}

				.title-right {
					font-weight: 600;
					font-size: 35rpx;
					position: relative;
					margin-right: 20rpx;
				}
			}

			.bottom-right-middle {
				width: 100%;

				.threeone {
					width: 33%;
					white-space: nowrap;
				}

				.middle-onecard {
					width: 100%;
					height: 120rpx;
					display: flex;
					position: relative;
					white-space: nowrap;
					flex-wrap: nowrap;

					.gray-text {
						color: #999999;
						margin-bottom: 3rpx;
						font-size: 26rpx;
					}

					.right-text {
						font-size: 33rpx;
						color: #555555;
						font-weight: 600;
					}
				}
			}
		}
	}

	.gray-heng {
		position: absolute;
		left: 0;
		bottom: 20%;
		background-color: #eff1f3;
		height: 0.5rpx;
		width: 80%;

	}

	.title-input-img {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		right: 110rpx;
		top: 51%;
		transform: translateY(-50%);
	}

	.more-father {
		position: absolute;
		right: 60rpx;
		top: 15rpx;
		width: 165rpx;
		// height: 150rpx;
		background-color: #fff;
		z-index: 102;
		border-radius: 35rpx;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0;

		.more-one {
			width: 100%;
			height: 50rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.mengban {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}

	.popup-share {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		backdrop-filter: blur(1rpx);
		background-color: rgba(236, 237, 241, 0.4);
		/* 添加毛玻璃效果 */
		z-index: 999;

		.share-other {
			z-index: 1;
			width: 100%;
			height: 100%;
			padding: 70rpx;
			padding-top: 60rpx;
			// padding-top: 70rpx;
			position: relative;

			.share-main {
				display: flex;
				justify-content: space-between;

				.share-weight {
					font-weight: 600;
					font-size: 36rpx;
					margin-bottom: 13rpx;
				}

				.share-font {
					color: #666666;
					font-size: 30rpx;
					margin-top: 7rpx;
					width: 450rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

			}

			.right-flex {
				margin-top: -7rpx;
				color: #666666;

				.dollar-text {
					margin-left: -5rpx;
					font-weight: 600;
					font-size: 55rpx;

				}

				.caigou-font {
					font-size: 23rpx;
					color: #888D99;
					text-align: end;
				}
			}

		}

		.popup-share-content {
			position: absolute;
			display: flex;
			flex-direction: column;
			width: 900rpx;
			height: 480rpx;
			background-color: #fff;
			border-radius: 30rpx;
			transition: opacity 0.4s ease;

			.popup-share-title {
				margin: 30rpx 30rpx;
				font-size: 40rpx;
				position: relative;

				.popup-share-img {
					position: absolute;
					top: 0;
					right: 0;
					width: 200rpx;
					height: 200rpx;
				}
			}

			.popup-share-upcontent {
				margin: 0 30rpx;
				display: flex;
				justify-content: space-between;

				.popup-share-font {
					font-size: 35rpx;
					color: gray;
				}

			}

			.popup-share-gray {
				background-color: #D3D3D3;
				width: calc(100% - 60rpx);
				height: 2rpx;
				margin: 110rpx 30rpx 0 30rpx;
			}

			.popup-share-downcontent {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100%;
				margin: 0 30rpx;

				.popup-downcontent-img {
					width: 70rpx;
					height: 70rpx;
				}

				.popup-downcontent-font {
					font-size: 27rpx;
					margin-left: 20rpx;
				}

				.popup-share-downcontent-left {
					display: flex;
					align-items: center;
				}

				.popup-share-downcontent-button {
					background: linear-gradient(to right bottom, #00c9ff, #0076ff);
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 15rpx 30rpx;
					border-radius: 20rpx;
					font-size: 32rpx;
				}
			}

		}

		.share-bottom {
			position: absolute;
			width: 100%;
			padding: 0 50rpx;
			height: 120rpx;
			bottom: 90rpx;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: space-between;
			flex-direction: column;

			.share-bottom-img {
				width: 150rpx;
				height: 140rpx;
			}

			.share-phone {
				color: #888D99;
				margin-left: 15rpx;
				// margin-top: 7rpx;
				font-size: 30rpx;
			}

			.share-name {
				margin: 0 15rpx;
				font-size: 35rpx;
				color: #666666;
				font-weight: 600;
			}

			.share-font {
				color: #555555;
				margin-top: 10rpx;
				font-size: 24rpx;
			}

			.company-father {
				width: 100%;
				display: flex;
				// align-items: center;
				justify-content: space-between;
			}

			.company {
				color: #888D99;
				margin-top: 10rpx;
				margin-left: 10rpx;
				font-size: 30rpx;
			}
		}

		.blue-button {
			margin-top: -30rpx;
			width: 150rpx;
			height: 70rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #007CFF;
			font-size: 30rpx;
			background: linear-gradient(to bottom, #e7f4ff, #c5e5ff);
			border: 2rpx solid #9AD1FF;
		}
	}

	/* 容器默认隐藏，透明度为 0，不接受点击 */
	.neuro-wrapper {
		position: fixed;
		inset: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.3s ease;
	}

	/* 显示时透明度过渡到 1，可接受点击 */
	.neuro-wrapper.is-active {
		opacity: 1;
		pointer-events: auto;
	}

	/* 遮罩层，半透明黑色 */
	.neuro-mask {
		position: absolute;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.3);
	}

	/* 拟态框 固定尺寸 + 阴影样式 + 相对定位于 wrapper */
	.neuro-box {
		position: relative;
		width: 600rpx;
		height: 450rpx;
		border-radius: 30rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 1;
		padding: 0 10%;

		.button {
			width: 47%;
			background-color: #ddf0ff;
			display: flex;
			justify-content: center;
			align-items: center;
			// color: #fff;
			color: #007CFF;
			border: 1rpx solid #007CFF;
			font-size: 25rpx;
			border-radius: 30rpx;
		}


		.card-font {
			margin-top: 70rpx;
			width: 600rpx;
			justify-content: center;
			display: flex;
		}

		.button-white {
			width: 47%;
			border: 2rpx solid #c3cacd;
			background: linear-gradient(to bottom, #f3f3f5, #dee4e9);
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 25rpx;
			border-radius: 30rpx;
		}

		.button-father {
			position: absolute;
			bottom: 60rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 100%;
			height: 70rpx;
			display: flex;
			justify-content: space-between;
			padding: 0 50rpx;
		}

		.title {
			margin-top: 80rpx;
			font-weight: 600;
			font-size: 35rpx;
		}
	}

	.title-input-button:active,
	.contain-right-button:active {
		color: #1083F8;
		background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
		border: 1px solid #1083F8;
		transition: .4s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}
	.center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.que {
		width: 7vw;
		height: 7vw;
		margin-top: -1vw;
		// 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;
		}
	}
</style>