<template>
	<view class="contain">
		<view v-show="moreindex!=-1 || topbuttontarget!=-1 || openjianhuo || opengaijia" class="mengban"
			@click="moreindex=-1; topbuttontarget=-1;openjianhuo=false;opengaijia=false"></view>

		<!-- 改价 -->
		<view class="gaijiafather" v-show="opengaijia" :style="donghuaopo?{opacity:1}:{opacity:0}">
			<view style="width: 100%;margin-top: 50rpx;font-size: 30rpx;">
				采购单价:
				<text style="color: #888888;">
					￥1.50
				</text>

			</view>
			<view style="margin-top: 150rpx;display: flex;align-items: center;flex-direction: column;width: 50%;">
				<view style="font-size: 30rpx;margin-bottom: 10rpx;">
					到货单价
				</view>
				<view class="gray-input">
					¥1500.00
				</view>
			</view>
			<view style="position: absolute;right: 30rpx;bottom: 30rpx;">
				<view style="display: flex;">
					<view
						style="width: 160rpx;height: 75rpx;background-color: #ebeced;color: #888888;display: flex;justify-content: center;align-items: center;font-size: 30rpx;border-radius: 40rpx;">
						取消
					</view>
					<view
						style="width: 160rpx;height: 75rpx;;color: #0385FA;display: flex;justify-content: center;align-items: center;font-size: 30rpx;border-radius: 40rpx;border: 1rpx solid #0385FA;background: linear-gradient(to bottom,#E9F4FF,#CAE0F9);margin: 0 40rpx;">
						确定
					</view>

				</view>
			</view>
			<view class="jianhuo-jianpan" style="right: -40rpx;bottom: 150rpx;">
				<view style="display: flex;width: 480rpx;">
					<view class="gray-button-jianpan">
						1
					</view>
					<view class="gray-button-jianpan">
						2
					</view>

					<view class="gray-button-jianpan">
						3
					</view>
				</view>
				<view style="display: flex;width: 480rpx;">
					<view class="gray-button-jianpan">
						4
					</view>
					<view class="gray-button-jianpan">
						5
					</view>

					<view class="gray-button-jianpan">
						6
					</view>
				</view>
				<view style="display: flex;width: 480rpx;">
					<view class="gray-button-jianpan">
						7
					</view>
					<view class="gray-button-jianpan">
						8
					</view>

					<view class="gray-button-jianpan">
						9
					</view>
				</view>
				<view style="display: flex;width: 480rpx;">
					<view class="gray-button-jianpan">
						AC
					</view>
					<view class="gray-button-jianpan">
						0
					</view>

					<view class="gray-button-jianpan">
						.
					</view>
				</view>
			</view>
		</view>
		<!-- 拣货 -->
		<view class="jianhuofather" v-show="openjianhuo" :style="donghuaopo?{opacity:1}:{opacity:0}">
			<view style="margin: 40rpx 0;width: 100%;text-align: center;font-size: 35rpx;font-weight: 600;">
				留置针敷贴（医用透明敷料）
			</view>
			<view style="display: flex;justify-content: space-between;width: 100%;">
				<view style="font-weight: 600;font-size: 30rpx;">
					物料信息
				</view>
				<view style="font-weight: 600;font-size: 35rpx;">
					￥10.12
				</view>
			</view>
			<view style="display: flex;margin-top: 10rpx;">
				<view class="" style="width: 30%;">
					<view style="color: #888888;margin-top: 10rpx;">
						物料编码
					</view>
					<view class="" style="margin-top: 5rpx;">
						FLYP001
					</view>
				</view>
				<view class="" style="width: 30%;">
					<view style="color: #888888;margin-top: 10rpx;">
						规格型号
					</view>
					<view class="" style="margin-top: 5rpx;">
						800mm*680mm
					</view>
				</view>
			</view>
			<view style="display: flex;margin-top: 20rpx;">
				<view class="" style="width: 30%;">
					<view style="color: #888888;margin-top: 10rpx;">
						采购单价
					</view>
					<view class="text-anim" style="margin-top: 5rpx;font-weight: 600;">
						￥0.1
					</view>
				</view>
				<view class="" style="width: 30%;">
					<view style="color: #888888;margin-top: 10rpx;">
						采购数量
					</view>
					<view class="" style="margin-top: 5rpx;font-weight: 600;">
						30
					</view>
				</view>
				<view class="" style="width: 30%;">
					<view style="color: #888888;margin-top: 10rpx;">
						采购单位
					</view>
					<view class="" style="margin-top: 5rpx;">
						个
					</view>
				</view>
			</view>
			<view style="width: 95%;height: 0.5rpx;	background-color: #eff1f3;margin-top: 10rpx;margin-bottom: 5rpx;">
			</view>
			<view style="">
				<view style="font-weight: 600;font-size: 30rpx;">
					入库信息
				</view>
			</view>
			<view style="display: flex;margin-top: 10rpx;">
				<view class="" style="width: 30%;">
					<view style="color: #888888;margin-top: 10rpx;">
						入库数量
					</view>
					<view class="" style="margin-top: 5rpx;">
						0
					</view>
				</view>
				<view class="" style="width: 30%;">
					<view style="color: #888888;margin-top: 10rpx;">
						挂账数量
					</view>
					<view class="" style="margin-top: 5rpx;">
						0
					</view>
				</view>
				<view class="" style="width: 30%;">
					<view style="color: #888888;margin-top: 10rpx;">
						销账数量
					</view>
					<view class="" style="margin-top: 5rpx;">
						0
					</view>
				</view>
			</view>
			<view style="width: 95%;height: 0.5rpx;	background-color: #eff1f3;margin-top: 10rpx;margin-bottom: 5rpx;">
			</view>
			<view style="">
				<view style="font-weight: 600;font-size: 30rpx;">
					拣货拍照
				</view>
			</view>
			<view style="display: flex;flex-wrap: wrap;width: 60%;">
				<view style="width: 40%;height: 150rpx;margin-right: 4%;margin-top: 3%;" v-for="(item,index) in [1,1,1]"
					:key="index">
					<image style="width: 100%;height: 100%;" src="/static/ceshiyaoshan.png" />
				</view>
				<view style="width: 40%;height: 150rpx;margin-right: 4%;margin-top: 3%;">

					<view
						style="width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color:#fafdff ;border: 1rpx solid #78B1EB;border-radius: 20rpx;">
						<image style="width: 50rpx;height: 50rpx;margin-bottom: 5rpx;"
							src="/static/index/warehouse/procurement/picking/addphoto.png" />
						<view style="color: #78B1EB;font-size: 25rpx;">
							点击拍照上传
						</view>
					</view>
				</view>
				<view
					style="width: 95%;height: 0.5rpx;	background-color: #eff1f3;margin-top: 10rpx;margin-bottom: 5rpx;">
				</view>
			</view>
			<view style="">
				<view style="font-weight: 600;font-size: 30rpx;">
					数量
				</view>
			</view>
			<view style="display: flex;margin-top: 30rpx;margin-left: 20rpx;">
				<view class="gray-button">
					-
				</view>
				<view class="gray-input">
					1500
				</view>
				<view class="gray-button">
					+
				</view>
			</view>
			<view class="jianhuobutton">
				<view style="display: flex;">
					<view
						style="width: 160rpx;height: 75rpx;background-color: #ebeced;color: #888888;display: flex;justify-content: center;align-items: center;font-size: 30rpx;border-radius: 40rpx;">
						关闭
					</view>
					<view
						style="width: 160rpx;height: 75rpx;;color: #0385FA;display: flex;justify-content: center;align-items: center;font-size: 30rpx;border-radius: 40rpx;border: 1rpx solid #0385FA;background: linear-gradient(to bottom,#E9F4FF,#CAE0F9);margin: 0 20rpx;">
						销账
					</view>
					<view
						style="width: 160rpx;height: 75rpx;;color: #0385FA;display: flex;justify-content: center;align-items: center;font-size: 30rpx;border-radius: 40rpx;border: 1rpx solid #0385FA;background: linear-gradient(to bottom,#E9F4FF,#CAE0F9);">
						入库
					</view>
				</view>
			</view>
			<view class="jianhuo-jianpan">
				<view style="display: flex;width: 480rpx;">
					<view class="gray-button-jianpan">
						1
					</view>
					<view class="gray-button-jianpan">
						2
					</view>

					<view class="gray-button-jianpan">
						3
					</view>
				</view>
				<view style="display: flex;width: 480rpx;">
					<view class="gray-button-jianpan">
						4
					</view>
					<view class="gray-button-jianpan">
						5
					</view>

					<view class="gray-button-jianpan">
						6
					</view>
				</view>
				<view style="display: flex;width: 480rpx;">
					<view class="gray-button-jianpan">
						7
					</view>
					<view class="gray-button-jianpan">
						8
					</view>

					<view class="gray-button-jianpan">
						9
					</view>
				</view>
				<view style="display: flex;width: 480rpx;">
					<view class="gray-button-jianpan">
						AC
					</view>
					<view class="gray-button-jianpan">
						0
					</view>

					<view class="gray-button-jianpan">
						.
					</view>
				</view>
			</view>
		</view>
		<!-- 照片墙 -->
		<view class="photowall" v-show="topbuttontarget!=-1" :style="donghuaopo?{opacity:1}:{opacity:0}">
			<view class="photowall-title">
				<view class="photowall-name">
					{{ !topbuttontarget?`拣货照片`:`随行单` }}

				</view>
				<view class="">
					<text class="photowall-left">
						采购单号：
					</text>
					<text class="photowall-right">
						10120251024012
					</text>

				</view>
			</view>
			<view class="photowall-other">
				<view class="photowall-other-one" v-for="(item,index) in [1,1,1,1,1]" :key="index">
					<image style="width: 100%;height: 70%;" src="/static/ceshiyaoshan.png" />
					<view style="margin-top: 20rpx;">
						<text style="color: #888888;">
							上传时间:
						</text>
						<text>
							2025.10.11 10:12:56
						</text>
					</view>
					<view style="margin-top: 10rpx;">
						<text style="color: #888888;">
							上传人:
						</text>
						<text>
							赵晓璇
						</text>
					</view>
				</view>
				<view class="photowall-other-one" v-if="topbuttontarget==1">

					<view
						style="width: 100%;height: 70%;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color:#fafdff ;border: 1rpx solid #78B1EB;border-radius: 30rpx;">
						<image style="width: 70rpx;height: 70rpx;margin-bottom: 5rpx;"
							src="/static/index/warehouse/procurement/picking/addphoto.png" />
						<view style="color: #78B1EB;">
							点击拍照上传
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="contain-left">
			<view class="left-select-more" v-show="openselect">
				<view class="more-bottom">
					<view class="bottom-left">
						重置
					</view>
					<view class="bottom-right">
						确定
						<text style="font-size: 25rpx;margin-top: 5rpx;">
							(10+采购单)
						</text>

					</view>
				</view>
				<view class="more-title">
					采购单状态
				</view>
				<view class="more-statues-father">
					<view :class="!typestatues?`more-statues-button-target`:`more-statues-button`"
						@click="typestatues=0">
						全部
					</view>
					<view :class="typestatues==1?`more-statues-button-target`:`more-statues-button`"
						@click="typestatues=1">
						待入库
					</view>
					<view :class="typestatues==2?`more-statues-button-target`:`more-statues-button`"
						@click="typestatues=2">
						待完结
					</view>
				</view>
				<view class="more-time">
					采购日期
				</view>
				<view class="more-time-select">
					<view class="more-gray">
						开始日期
					</view>
					<view style="font-size: 32rpx;">
						至
					</view>
					<view class="more-gray">
						结束日期
					</view>
					<image class="more-img" src="/static/index/warehouse/procurement/picking/data.png" />
				</view>
				<view class="more-select">
					采购人
				</view>
				<view class="more-time-select">
					<view class="more-gray" style="margin-left: 30rpx;">
						请输入采购人
					</view>
					<image class="select-img" src="/static/index/warehouse/procurement/picking/center.png" />
				</view>
				<view class="more-select">
					供应商
				</view>
				<view class="more-time-select">
					<view class="more-gray" style="margin-left: 30rpx;">
						请输入供应商
					</view>
					<image class="select-img" src="/static/index/warehouse/procurement/picking/center.png" />
				</view>
			</view>
			<view class="title-input-father">
				<input class="title-input" type="text" v-model="searchValue" maxlength="15" placeholder="采购单号/采购日期/供应商"
					@confirm="search()" />
				<image v-show="searchValue" class="title-input-img" src="@/static/x.png"
					@click="searchValue='';search()" />
				<view class="title-input-button" @click="search()">
					检索
				</view>
				<view class="filter">
					<image class="filter-img"
						:src="`/static/index/purchaseorder/select${openselect?`target`:``}.png`" />
					<view :class="openselect?`filter-font-target`: `filter-font`" @click="openselect=!openselect">
						筛选
					</view>
				</view>
			</view>
			<view class="statues-father">
				<view class="statues-gray">
					单据状态
				</view>
				<view :class="!typestatues?`statues-button-target`:`statues-button`" style="margin-left: 4%;"
					@click="typestatues=0">
					全部
				</view>
				<view :class="typestatues==1?`statues-button-target`:`statues-button`" @click="typestatues=1">
					待入库
				</view>
				<view :class="typestatues==2?`statues-button-target`:`statues-button`" @click="typestatues=2">
					待完结
				</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)"
						:style="{borderColor: i==lefttarget? ``:`#fff` }">

						<view v-if="moreindex==i" class="more-father">
							<view class="more-one" @click="share">
								分享
							</view>
							<view class="more-one" @click="bebad">
								作废
							</view>
						</view>
						<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">
									{{ v.totalPrice }}
								</view>

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

							</view>
						</view>
						<view class="pls-card-middle">
							<view class="pls-card-middle-one">
								<view class="middle-title">
									{{ v.createTime?.split(' ')[0] }}
								</view>
								<view class="middle-heng-father">
									<view class="middle-heng"
										style="border-top-left-radius: 20rpx;border-bottom-left-radius: 20rpx;"></view>
									<view class="middle-heng" style="border-radius: 20rpx;background-color: #1083F8;">
									</view>
									<!-- <view class="middle-heng" v-if="Number(v.status)<3 "
											style="border-radius: 20rpx;background-color: #1083F8;"></view> -->
									<!-- <view class="middle-ball"
										:style="Number(v.status)<3?{backgroundColor: `#1083F8`}:{} "></view> -->
									<view class="middle-ball" :style="{backgroundColor: `#1083F8`}"></view>
								</view>
								<view class="end-font">
									<!-- <view class="" :style="Number(v.status)<3?{color: `#1083F8`}:{} ">
										采购
									</view> -->
									<view class="" :style="{color: `#1083F8`}">
										采购
									</view>
									<view style="font-size: 25rpx;">
										[ {{ v.createBy_dictText }} ]
									</view>
								</view>
							</view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
									{{ v.createTime?.split(' ')[0] }}
								</view>
								<view class="middle-heng-father">
									<view class="middle-heng"></view>
									<view class="middle-heng"
										style="border-radius: 20rpx;background-color: #1083F8;width: 105%;margin-left: -5%;">
									</view>
									<!-- 	<view class="middle-heng" v-if="Number(v.status)<3 && Number(v.status)>0 "
										style="border-radius: 20rpx;background-color: #1083F8;width: 105%;margin-left: -5%;">
									</view> -->
									<!-- <view class="middle-ball"
										:style="Number(v.status)<3 && Number(v.status)>0?{backgroundColor: `#1083F8`}:{} ">
									</view> -->
									<view class="middle-ball" :style="{backgroundColor: `#1083F8`}"></view>
								</view>
								<view class="end-font">
									<!-- <view class=""
										:style="Number(v.status)<3 && Number(v.status)>0?{color: `#1083F8`}:{} ">
										拣货
									</view> -->
									<view class="" :style="{color: `#1083F8`}">
										拣货
									</view>
									<view style="font-size: 25rpx;">
										[ {{ v.createBy_dictText }} ]
									</view>
								</view>
							</view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
								</view>
								<view class="middle-heng-father">
									<view class="middle-heng"
										style="border-top-right-radius: 20rpx;border-bottom-right-radius: 20rpx;">
									</view>
									<view class="middle-heng" v-if="Number(v.status)<3 && Number(v.status)>1 "
										style="border-radius: 20rpx;background-color: #1083F8;width: 105%;margin-left: -5%;">
									</view>
									<view class="middle-ball"
										:style="Number(v.status)<3 && Number(v.status)>1?{backgroundColor: `#1083F8`}:{} ">
									</view>
								</view>
								<view class="end-font">
									<view class=""
										:style="Number(v.status)<3 && Number(v.status)>1?{color: `#1083F8`}:{} ">
										完结
									</view>
									<view class="">
									</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`">

								{{ tagesstatues[Number(v.status)] }}
							</view> -->
							<view class="tag-success">

								待完结
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="white-zhezhao"></view>
		<view class="contain-right">
			<view class="contain-right-title">
				<view class="left-top-tags">
					<view class="wuliao-title">
						物料信息
						<!-- <view class="wuliao-heng"></view> -->
					</view>
				</view>
				<view :class="!topbuttontarget?`contain-right-button-target`: `contain-right-button`"
					style="border-color: #D9DADC;box-shadow: 0 1rpx 3rpx #D9DADC;" @click="donghuastart(0)">
					<image class="buttont-img"
						:src="`/static/index/warehouse/procurement/picking/camera${!topbuttontarget?`target`:``}.png`" />
					<view class="button-font">
						拣货照片
					</view>
				</view>
				<view :class="topbuttontarget==1?`contain-right-button-target`: `contain-right-button`"
					style="border-color: #D9DADC;box-shadow: 0 1rpx 3rpx #D9DADC;" @click="donghuastart(1)">
					<image class="buttont-img"
						:src="`/static/index/warehouse/procurement/picking/work${topbuttontarget==1?`target`:``}.png`" />
					<view class="button-font">
						随行单
					</view>
				</view>
				<view :class="Number(plsbuy[lefttarget]?.status)==0?`contain-right-button`: `contain-right-button-bad`"
					style="border-color: #D9DADC;box-shadow: 0 1rpx 3rpx #D9DADC;">
					<image class="buttont-img"
						:src="`/static/index/warehouse/procurement/picking/bebad${Number(plsbuy[lefttarget]?.status)==1?``:`target`}.png`" />
					<view class="button-font">
						作废
					</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>
			<view class="contain-right-middle">
				<scroll-view scroll-x="true" class="middle-Y" @scrolltolower="getmore">
					<view class="middle-Y-father">
						<view class="middle-one" v-for="(v,i) in InvoicingList" :key='i'
							:style="{border: middletarget === i? '4rpx dashed #1083F8': '4rpx solid transparent'}"
							@click="clickmiddle(i)">
							<view :class="!i || i==3?`up-tags-target`: `up-tags`">
								{{ tagsArray[i] }}
							</view>
							<!-- <image class="middle-img"
								:src="v.materialImg?serverUrl + v.materialImg : '/static/zhiniaoku.png'"
								mode="aspectFill"></image> -->
							<image class="middle-img" :src=" '/static/zhiniaoku.png'" mode="aspectFill"></image>
							<view class="middle-right">
								<view class="right-title">
									{{ v.wlName }}
								</view>
								<view class="juzhong">
									<view class="">
										<text style="font-size: 25rpx;">
											￥
										</text>

										<text style="font-weight: 600;font-size: 30rpx;">
											{{(v?.procurementPrice * v?.purchaseQuantity).toFixed(2) }}
										</text>

									</view>
									<view class="">
										<text style="font-weight: 600;">
											{{v.kcsl}}
										</text>
										{{v.wlUnits}}
									</view>

								</view>
								<view class="right-middle">
									{{ v.wlSpecificationModel }}
								</view>
								<view class="juzhong">
									<view class="">
										<text style="color: #888888;">
											入库数量
										</text>
									</view>
									<view class="">
										<text style="font-weight: 600;">
											0
										</text>
									</view>

								</view>
								<view class="juzhong">
									<view class="">
										<text style="color: #888888;">
											挂账数量
										</text>
									</view>
									<view class="">
										<text style="font-weight: 600;">
											0
										</text>
									</view>

								</view>
								<view class="juzhong">
									<view class="">
										<text style="color: #888888;">
											销账数量
										</text>
									</view>
									<view class="">
										<text style="font-weight: 600;">
											0
										</text>
									</view>

								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view style="display: flex;justify-content: space-between;">
					<view style="display: flex;">
						<view :class="!typechange? `wuliao-title`:`wuliao-title-no`" @click="typechange = 0">
							物料详情
							<view class="wuliao-heng"></view>
						</view>
						<view :class="typechange==1? `wuliao-title`:`wuliao-title-no`" style="margin-left: 10rpx;"
							@click="typechange = 1">
							拣货记录
							<view class="wuliao-heng"></view>
						</view>
					</view>
					<view style="display: flex;margin-top: 20rpx;font-size: 30rpx;">
						<view :style="outerStyle" @click="opengaijiaclick">
							<view :style="segmentsWrapperStyle">
								<view v-for="(c, i) in segColors" :key="i" :style="{
						           flex: 1,
						           height: '100%',
						           backgroundColor: c
						         }" />
							</view>

							<view :style="innerStyle">
								<text :style="textStyle">改价</text>
							</view>
						</view>
						<view @click="openjianhuoclick"
							style="background-color: #f8f8f8;color: #555555;display: flex;align-items: center;justify-content: center;color: #555555;width: 180rpx;height: 70rpx;border-radius: 40rpx;box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.1);margin-left: 20rpx;">
							拣货
						</view>
					</view>
				</view>

				<view style="width: 95%;height: 0.5rpx;	background-color: #eff1f3;margin-left: 5%;"></view>
				<view class="right-bottom" v-show="!typechange">
					<view class="right-bottom-left">
						<!-- 		<image class="left-img"
							:src="showvalue?.materialImg?serverUrl + showvalue?.materialImg : '/static/zhiniaoku.png'"
							mode="aspectFill"></image> -->

						<image class="left-img" :src=" '/static/zhiniaoku.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">
								{{ showvalue?.tagName }}
							</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>
								{{ (showvalue?.procurementPrice * showvalue?.purchaseQuantity).toFixed(2) }}
							</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">
									<view class="gray-text">
										规格型号
									</view>
									<view class="right-text">
										{{ 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">
										￥{{ showvalue?.procurementPrice }}
									</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="gray-heng"></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="gray-heng"></view> -->
							<view class="middle-onecard">
								<view class="threeone">
									<view class="gray-text">
										入库数量
									</view>
									<view class="right-text">
										0
									</view>
								</view>
								<view class="threeone">
									<view class="gray-text">
										挂账数量
									</view>
									<view class="right-text">
										0
									</view>
								</view>
								<view class="threeone">
									<view class="gray-text">
										销账数量
									</view>
									<view class="right-text">
										0
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="right-bottom" v-show="typechange==1" style="padding: 0 50rpx;flex-direction: column;">
					<view style="width: 100%;display: flex;justify-content: space-between;margin-top: 20rpx;">
						<view style="font-size: 35rpx;font-weight: 600;">
							留置针敷贴
						</view>
						<view style="">
							采购数量：
							<text style="font-weight: 600;color: black;">
								100
							</text>

							片
						</view>
					</view>
					<view style="width: 110%;height: 400rpx;display: flex;flex-wrap: wrap;">
						<view
							style="width: 45%;height: 180rpx;background-color: #F9F9F9;border-radius: 30rpx;margin-right: 2%;margin-top: 20rpx;padding: 0 30rpx;color: #888888;"
							v-for="(item,index) in [1,1,1,1]" :key="index">
							<view
								style="width: 100%;justify-content: space-between;display: flex;align-items: center;height: 60rpx;margin-top: 20rpx;">
								<view class="">
									拣货数量：
									<text style="font-weight: 600;color: black;">
										20
									</text>
									片
								</view>
								<view
									style="width: 110rpx;height: 50rpx;border-radius: 30rpx;display: flex;justify-content: center;align-items: center;border: 1rpx solid #f1f1f1;background-color: #f1f1f1;color: #C3C3C3;margin-top: -10rpx;">
									入库
								</view>
							</view>
							<view style="width: 100%;justify-content: space-between;display: flex;">
								<view class="">
									采购单价：

									<text style="font-weight: 600;color: black;">
										￥1.50
									</text>

								</view>
								<view class="">
									拣货人：
									<text style="font-weight: 600;color: black;">
										梁嘉豪
									</text>

								</view>
							</view>
							<view style="width: 100%;justify-content: space-between;display: flex;margin-top: 10rpx;">
								<view class="">
									到货单价：

									<text style="font-weight: 600;color: black;">
										￥1.50
									</text>

								</view>
								<view class="">
									2025.10.03 10:10:30

								</view>
							</view>
						</view>
						<view
							style="width: 100%;display: flex;justify-content: center;color: #C3C3C3;margin-top: 20rpx;">
							<image
								style="width: 25rpx;height: 25rpx;margin-right: 10rpx;margin-top: 5rpx;margin-left: -10rpx;"
								src="/static/index/warehouse/procurement/picking/loading.png" />
							点击加载更多
						</view>
					</view>

				</view>
			</view>
		</view>
		<!-- 分享的弹出层 -->
		<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">
									{{plsbuy[lefttarget]?.totalPrice}}
								</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 class="share-name">
								{{ plsbuy[lefttarget]?.createBy_dictText }}
							</view>
							<view class="share-font">
								采购人
							</view>
						</view>
						<view class="blue-button" @click="clickshare">
							分享
						</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>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineProps, onUnmounted } from 'vue';
	import { queryInvoicingList, getCgdMaterialTreeData, queryNuInfoByNuId, updateKfstatus, queryCgdList, queryCgdInfoList, queryWlInfoByWlId, voidedCgdMain } from './api/lunpan.js'
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"


	const typechange = ref(0);
	const serverUrl = ref("");
	const opengaijia = ref(false);
	const openjianhuo = ref(false);

	const openjianhuoclick = () => {
		openjianhuo.value = true;
		donghuaopo.value = false;
		setTimeout(() => {
			donghuaopo.value = true;
		}, 100)
	}
	// const opengaijiaclick = () => {
	// 	opengaijia.value = true;
	// 	donghuaopo.value = false;
	// 	setTimeout(() => {
	// 		donghuaopo.value = true;
	// 	}, 100)
	// }
	const opengaijiaclick = () => {
		opengaijia.value = true;
		donghuaopo.value = false;
		setTimeout(() => {
			donghuaopo.value = true;
		}, 100)
	}
	onLoad(() => {
		firstgetqueryCgdList();
		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
	})

	const openselect = ref(false);

	const searchValue = ref("");
	const middletarget = ref(0);
	const tagesstatues = ["待采购", "拣货", "完结", "作废"];

	const topbuttontarget = ref(-1);

	const typestatues = ref(0)

	const plzinfo = reactive({
		pageNo: 1,
		pageSize: 10,
		canpull: true
	})
	const mobanplzinfo = {
		pageNo: 1,
		pageSize: 10,
		canpull: true
	}
	const leftscrolltop = ref(0)

	const plsbuy = ref([])

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

			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
		queryCgdList(plzinfo).then((res : any) => {
			plsbuy.value.push(...res.result.records)

			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}
		})
	}
	const lefttarget = ref(0);
	const clickLeftMenu = (index : any) => {
		let num = Math.ceil((index + 1))
		leftscrolltop.value = (num - 2) * 186;
		lefttarget.value = index;
		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)
			if (res.result.records.length == 1) {
				InvoicingList.value.push(...res.result.records);
				InvoicingList.value.push(...res.result.records);
				InvoicingList.value.push(...res.result.records);
				InvoicingList.value.push(...res.result.records);
			}
			InvoicingList.value.push(...res.result.records);
			if (form.pageNo) {
				clickmiddle(0);
			}
		})
	}
	const showvalue = ref({
		materialImg: ""
	})

	const goback = () => {
		uni.navigateBack()
	}
	const form = reactive({
		nuId: '',
		pageNo: 1,
		pageSize: 9,
		categoryId: '',
		typeId: '',
		medicationId: '',
		wlParamInfo: '',
		cgdId: "",
		isWaring: 0,
		canpull: true
	})
	const mobanform = {
		nuId: '',
		pageNo: 1,
		pageSize: 9,
		categoryId: '',
		typeId: '',
		medicationId: '',
		wlParamInfo: '',
		cgdId: "",
		isWaring: 0
	}
	const tagsArray = [`待入库`, `已入库`, `已销账`, `挂账中`]
	const clickmiddle = (index : number) => {
		middletarget.value = index;
		showvalue.value = InvoicingList.value[index];
		Object.assign(form, mobanform)

	}
	const InvoicingList = ref([])
	const queryInvo = () => {
		queryCgdInfoList(form).then(res => {
			if (res.result.records.length == 1) {
				InvoicingList.value.push(...res.result.records);
				InvoicingList.value.push(...res.result.records);
				InvoicingList.value.push(...res.result.records);
				InvoicingList.value.push(...res.result.records);
			}
			InvoicingList.value.push(...res.result.records);

			clickmiddle(0);
		})
	}
	const getmore = () => {
		if (form.canpull) {
			form.pageNo++
			queryCgdInfoList(form).then(res => {
				InvoicingList.value.push(...res.result.records);
				if (res.result.records.length != 10) {
					form.canpull = false
				}
				console.log("??????", res.result.records)
			})
		}

	}
	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();
	}
	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 = () => {
		uni.share({
			provider: "weixin",
			scene: "WXSceneSession",
			type: 0,
			href: "https://www.baidu.com/",
			title: "采购单分享",
			summary: "采购单",
			imageUrl: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png",
			success: function (res) {
				console.log("success:");
			},
			fail: function (err) {
				console.log("fail:");
			}
		});
	}
	const badshow = ref(false);
	const donghuacs = ref(false)
	const bebad = () => {
		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 donghuaopo = ref(false)
	const donghuastart = (index : number) => {
		topbuttontarget.value = index;
		donghuaopo.value = false;
		setTimeout(() => {
			donghuaopo.value = true;
			console.log("zzz", donghuaopo.value)
		}, 100)
	}
	// 配置
	const SEG_COUNT = 8;       // 分段数量
	const PADDING = 2;        // 外层 padding（rpx）
	const W = 180, H = 70;    // 宽高（rpx）
	const RADIUS = 40;        // 外层圆角（rpx）
	const innerRadius = 36;   // 内层圆角（rpx）
	const intervalMs = 120;   // 动画步进时间（ms）
	const loopDuration = 1000; // 一个完整循环（ms）

	// 颜色起止（RGB 数组）
	const from = [210, 210, 210]; // #ababab
	const to = [50, 152, 255];  // #1083F8


	// 状态：基准进度 0..1（整条条带整体移动）
	const baseP = ref(0);

	// 插值函数
	function mix(a, b, p) { return Math.round(a + (b - a) * p); }
	function rgbToHex(rgb) { return '#' + rgb.map(n => n.toString(16).padStart(2, '0')).join(''); }

	// 计算每个 segment 的颜色：每段在整体进度上有一个相位偏移
	const segColors = computed(() => {
		const colors = [];
		for (let i = 0; i < SEG_COUNT; i++) {
			// 每段在 0..1 上的相对位置：把每段想成条带上的一点
			// pos = baseP + i / SEG_COUNT，模 1 后得到 0..1
			let pos = (baseP.value + i / SEG_COUNT) % 1;
			// 使用平滑函数（可选）：这里用三角/贝塞尔会更柔和
			// 但简单的线性即可产生中间过渡色：
			const p = pos; // 0..1
			const rgb = [
				mix(from[0], to[0], p),
				mix(from[1], to[1], p),
				mix(from[2], to[2], p)
			];
			colors.push(rgbToHex(rgb));
		}
		return colors;
	});

	// 行内样式
	const outerStyle = computed(() => ({
		width: `${W}rpx`,
		height: `${H}rpx`,
		padding: `${PADDING}rpx`,
		borderRadius: `${RADIUS}rpx`,
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: 'transparent',
		position: 'relative'
	}));

	const segmentsWrapperStyle = computed(() => ({
		position: 'absolute',
		left: 0,
		top: 0,
		width: '100%',
		height: '100%',
		borderRadius: `${RADIUS}rpx`,
		overflow: 'hidden',
		display: 'flex',
		flexDirection: 'row',
		zIndex: 1
	}));

	const innerStyle = computed(() => ({
		width: `calc(100% - ${PADDING * 2}rpx)`,
		height: `calc(100% - ${PADDING * 2}rpx)`,
		borderRadius: `${innerRadius}rpx`,
		backgroundColor: '#ffffff',
		display: 'flex',
		alignItems: 'center',
		justifyContent: 'center',
		zIndex: 2
	}));

	const textStyle = computed(() => ({
		color: segColors.value[0] || rgbToHex(from),
		fontSize: '30rpx',
		fontWeight: '500',
		zIndex: 3
	}));

	// 启动定时器：推进 baseP，从 0 线性到 1 再回到 0（循环）
	let timer = null;
	onMounted(() => {
		const stepMs = intervalMs;
		const stepsPerLoop = Math.max(1, Math.round(loopDuration / stepMs));
		timer = setInterval(() => {
			baseP.value += 1 / stepsPerLoop;
			if (baseP.value >= 1) baseP.value -= 1; // 保持 0..1
		}, stepMs);
	});
	onUnmounted(() => {
		if (timer) clearInterval(timer);
	});
</script>

<style lang="less" scoped>
	.contain {
		background-color: rgb(239, 240, 244);
		width: 100vw;
		height: 100vh;
		padding: 5vh 2vw 0 2vw;
		display: flex;

		.contain-left {
			height: 95vh;
			width: 30%;
			position: relative;

			.left-select-more {
				position: absolute;
				top: 7%;
				left: 0;
				width: 100%;
				height: 83%;
				background-color: #fff;
				border-radius: 30rpx;
				box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
				z-index: 100;
				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: 32rpx;

					}
				}

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

				.more-time {
					margin-top: 20rpx;
					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;
					}

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

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

				.more-statues-father {
					width: 100%;
					height: 7vh;
					margin-top: 30rpx;
					display: flex;
					margin-left: -10rpx;
					// align-items: center;

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

					.more-statues-button {
						width: 30%;
						margin-right: 2%;
						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-right: 2%;
						height: 5.5vh;
						border-radius: 40rpx;
						font-size: 28rpx;
						background-color: #DFF4FC;
						border: 1rpx solid #0da6f8;
						color: #1083F8;
						display: flex;
						justify-content: center;
						align-items: center;
						box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
					}
				}
			}

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

				.title-input {
					width: 60%;
					height: 5vh;
					background-color: #E2E4E9;
					font-size: 25rpx;
					padding-left: 40rpx;
					border-radius: 40rpx;
				}

				.title-input-button {
					width: 20%;
					margin-left: 2%;
					height: 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);
				}
			}

			.statues-father {
				width: 100%;
				height: 7vh;
				display: flex;
				align-items: center;
				margin-top: -4rpx;

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

				.statues-button {
					width: 24%;
					margin-left: 2%;
					height: 4vh;
					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);
				}

				.statues-button-target {
					width: 24%;
					margin-left: 2%;
					height: 4vh;
					border-radius: 40rpx;
					font-size: 28rpx;
					background-color: #DFF4FC;
					border: 1rpx solid #0da6f8;
					color: #1083F8;
					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: 80vh;

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

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

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

							.title-left {
								font-weight: 600;
								font-size: 32rpx;
							}

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

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

						.pls-card-middle {
							width: 100%;
							height: 11vh;
							margin-top: 1vh;
							// background-color: blue;
							display: flex;

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

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

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

									.middle-heng {
										width: 100%;
										height: 0.8vh;
										position: absolute;
										left: 0;
										top: 50%;
										transform: translateY(-50%);
										background-color: #EEEEEE;

									}

									.middle-ball {
										width: 30rpx;
										height: 30rpx;
										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;
								}
							}
						}

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

							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: 400rpx;
									// 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;
								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;
								position: absolute;
								right: -5rpx;
								bottom: 20rpx;
							}
						}
					}
				}
			}
		}

		.contain-right {
			z-index: 1;
			height: 95vh;
			width: 70%;
			margin-left: 2%;
			overflow: hidden;

			.contain-right-title {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: flex-end;
				position: relative;

				.contain-right-button {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					padding: 0 35rpx;
					border-radius: 40rpx;
					border: 1rpx solid #555555;
					margin-left: 20rpx;

					.buttont-img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 5rpx;
						// margin-top: 4rpx;
					}

					.button-font {
						font-size: 30rpx;
						color: #555555;
					}
				}

				.contain-right-button-bad {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					padding: 0 35rpx;
					border-radius: 40rpx;
					border: 1rpx solid #555555;
					margin-left: 20rpx;
					background-color: #f7f7f7;
					color: #999999;

					.buttont-img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 5rpx;
						// margin-top: 4rpx;
					}

					.button-font {
						font-size: 30rpx;
						// color: #555555;
					}
				}

				.contain-right-button-target {
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					padding: 0 35rpx;
					border-radius: 40rpx;
					border: 1rpx solid #3699FF;
					margin-left: 20rpx;
					// background-color: #D9DADC;
					color: #1083F8;

					.buttont-img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 5rpx;
						// margin-top: 4rpx;
					}

					.button-font {
						font-size: 30rpx;
						// color: #555555;
					}
				}
			}

			.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 {
							min-width: 325rpx;
							height: 450rpx;
							background-color: #F9F9F9;
							border-radius: 30rpx;
							margin-left: 20rpx;
							margin-bottom: 30rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							position: relative;
							// justify-content: space-around;

							.middle-img {
								margin-top: 10rpx;
								width: 180rpx;
								height: 180rpx;
							}

							.middle-right {
								width: 250rpx;

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

								.right-middle {
									// margin-bottom: 7rpx;

								}
							}
						}
					}
				}
			}
		}
	}

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

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

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

	.wuliao-title-no {
		margin-top: 40rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 32rpx;
		font-weight: 600;
		width: 200rpx;
		color: #888888;

		.wuliao-heng {
			display: none;
		}
	}

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

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

			.left-img {
				width: 300rpx;
				height: 300rpx;
			}

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

			.tags-one {
				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;
			}
		}

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

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

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

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

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

				.threeone {
					width: 33%;
				}

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

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

					.right-text {
						font-size: 32rpx;
					}
				}
			}
		}
	}

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

	}

	.title-input-img {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 220rpx;
		top: 50%;
		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 2rpx 6rpx 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: 50%;
			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: 50rpx;
			position: relative;

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

				.share-weight {
					font-weight: 600;
					font-size: 30rpx;
				}

				.share-font {
					color: #666666;
					font-size: 30rpx;
					margin-top: 20rpx;
				}
			}
		}

		.popup-share-content {
			position: absolute;
			display: flex;
			flex-direction: column;
			width: 1000rpx;
			height: 500rpx;
			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: 70rpx;
			left: 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

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

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

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

		.blue-button {
			margin-top: 60rpx;
			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;
		}
	}

	.filter {
		position: absolute;
		right: -30rpx;
		top: 20rpx;
		width: 100rpx;
		height: 50rpx;
		// background-color: #0076ff;
		display: flex;
		justify-content: center;
		// align-items: center;

		.filter-img {
			width: 35rpx;
			height: 35rpx;
			margin-left: 5rpx;
			// margin-top: 4rpx;
		}

		.filter-font {
			margin-top: 5rpx;
			font-size: 27rpx;
			color: #555555;
		}

		.filter-font-target {
			margin-top: 5rpx;
			font-size: 27rpx;
			color: #1083F8;
		}
	}

	.left-top-tags {
		position: absolute;
		top: -25rpx;
		left: 0rpx;
	}

	.juzhong {
		justify-content: space-between;
		align-items: center;
		height: 40rpx;
		font-size: 25rpx;
		display: flex;
	}

	.up-tags {
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		width: 110rpx;
		height: 50rpx;
		border-radius: 40rpx;
		background-color: #fff;
		color: #555555;
		border: 1rpx solid #C3C3C3;
		font-size: 24rpx;
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.up-tags-target {
		position: absolute;
		right: 15rpx;
		top: 15rpx;
		width: 110rpx;
		height: 50rpx;
		border-radius: 40rpx;
		background-color: #fff;
		color: #1083F8;
		border: 1rpx solid #A4D5FE;
		font-size: 24rpx;
		z-index: 2;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.gaijiafather {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 50%;
		height: 55%;
		border-radius: 30rpx;
		background-color: #fff;
		transition: all 0.3s;
		z-index: 999;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
		padding: 0 60rpx;
	}

	.jianhuofather {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 50%;
		height: 95%;
		border-radius: 30rpx;
		background-color: #fff;
		transition: all 0.3s;
		z-index: 999;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
		padding: 0 60rpx;

		.jianhuobutton {
			position: absolute;
			bottom: 30rpx;
			right: 50rpx;
			display: flex;
		}
	}

	.photowall {
		position: fixed;
		top: 53%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 70%;
		height: 83%;
		border-radius: 30rpx;
		background-color: #fff;
		transition: all 0.3s;
		z-index: 999;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
		padding: 0 90rpx;

		.photowall-title {
			margin-top: 80rpx;
			display: flex;
			justify-content: space-between;
			width: 100%;

			.photowall-name {
				font-size: 38rpx;
				font-weight: 600;
			}

			.photowall-left {
				color: #888888;
			}

			.photowall-right {
				font-size: 30rpx;
				font-weight: 600;
			}
		}

		.photowall-other {
			width: 110%;
			display: flex;
			flex-wrap: wrap;
			margin-top: 50rpx;

			.photowall-other-one {
				width: 28.5%;
				height: 400rpx;
				margin-right: 3%;
				margin-bottom: 3%;
				border-radius: 30rpx;
				// background-color: red;
			}
		}
	}

	.gray-button {
		font-size: 50rpx;
		background-color: #F3F5F9;
		border-radius: 20rpx;
		width: 100rpx;
		height: 100rpx;
		border: 1rpx solid #CBCFD0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
	}

	.gray-button-jianpan {
		font-size: 40rpx;
		font-weight: 600;
		background-color: #F3F5F9;
		border-radius: 30rpx;
		width: 100rpx;
		height: 100rpx;
		border: 1rpx solid #CBCFD0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
	}

	.gray-input {
		font-size: 50rpx;
		font-weight: 600;
		background-color: #F3F5F9;
		border-radius: 20rpx;
		// width: 100rpx;
		padding: 0 30rpx;
		letter-spacing: 10rpx;
		height: 100rpx;
		border: 1rpx solid #CBCFD0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 40rpx;
		margin-right: 10rpx;
	}

	.jianhuo-jianpan {
		position: absolute;
		right: 0rpx;
		bottom: 15%;
	}

	.text-anim {
		animation: colorScale 2s linear infinite;
		transform-origin: left bottom;
		animation-iteration-count: 1;
		color: #1083F8;
	}

	@keyframes colorScale {
		0% {
			color: #1083F8 ;
			transform: scale(calc(1));
		}

		50% {
			color: #333333;
			transform: scale(calc(3));
		}

		100% {
			color: #1083F8;
			transform: scale(calc(1));
		}
	}
</style>