hldy_app_mini/pages/Warehouse/picking.vue

<template>
	<view class="contain">
		<view v-show="moreindex!=-1 || topbuttontarget!=-1 || openjianhuo || opengaijia || opendata || opencgr || opengys"
			class="mengban"  :style="opencgr||opengys||opendata ?{background:`transparent`}:{}"
			@click="moreindex=-1; topbuttontarget=-1;openjianhuo=false;opengaijia=false;opendata=false;opencgr=false;opengys=false">
		</view>
		<!-- 没数据了，遮罩 -->
		<nomessageimge cont="暂无数据" :show="nomessageshow" />
		<!-- 给模糊搜索用的 -->
		<view v-show="filteredCgrListsecond.length&&gysvalue" class="mengban" style="background: transparent;" @click="closefilteredCgrListsecond">
		</view>

		<view class="input-next" style="bottom: 450rpx;" v-if="filteredCgrListsecond.length && gysvalue">
			<view v-show="filteredCgrListsecond[0].suppliersName!=`暂无数据`" class="next-father"
				v-for="(item, index) in filteredCgrListsecond.slice(0, 5)" :key="index"
				@click="clickfilteredCgrListsecond(item,index)">
				{{ item.suppliersName }}
			</view>
			<view class="nomessage" v-if="filteredCgrListsecond[0].suppliersName===`暂无数据`">
				暂无数据
			</view>
		</view>
		<!-- 给模糊搜索用的 -->
		<view v-show="filteredCgrList.length&&cgrvalue" class="mengban" style="background: transparent;" @click="closefilteredCgrList"></view>

		<view class="input-next" v-if="filteredCgrList.length && cgrvalue">
			<view v-show="filteredCgrList[0].cgBy!=`暂无数据`" class="next-father"
				v-for="(item, index) in filteredCgrList.slice(0, 5)" :key="index" @click="clickfilteredCgrList(item)">
				{{ item.cgBy }}
			</view>
			<view class="nomessage" v-if="filteredCgrList[0].cgBy===`暂无数据`">
				暂无数据
			</view>
		</view>
		<!-- 日期 -->
		<view class="calendar-father" v-show="opendata" v-if="xiaohui">
			<calendar @datachange="dateget" />
		</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;">
					￥{{ gaijia }}
				</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" style="width: 410rpx;">
					¥ {{ gaijia }}
				</view>
			</view>
			<view style="position: absolute;right: 30rpx;bottom: 30rpx;">
				<view style="display: flex;">
					<view @click="opengaijia=false"
						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 @click="dogaijia"
						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" @click="press('1')">
						1
					</view>
					<view class="gray-button-jianpan" @click="press('2')">
						2
					</view>

					<view class="gray-button-jianpan" @click="press('3')">
						3
					</view>
				</view>
				<view style="display: flex;width: 480rpx;">
					<view class="gray-button-jianpan" @click="press('4')">
						4
					</view>
					<view class="gray-button-jianpan" @click="press('5')">
						5
					</view>

					<view class="gray-button-jianpan" @click="press('6')">
						6
					</view>
				</view>
				<view style="display: flex;width: 480rpx;">
					<view class="gray-button-jianpan" @click="press('7')">
						7
					</view>
					<view class="gray-button-jianpan" @click="press('8')">
						8
					</view>

					<view class="gray-button-jianpan" @click="press('9')">
						9
					</view>
				</view>
				<view style="display: flex;width: 480rpx;">
					<view class="gray-button-jianpan" style="font-size: 35rpx;" @click="press('AC')">
						AC
					</view>
					<view class="gray-button-jianpan" @click="press('0')">
						0
					</view>

					<view class="gray-button-jianpan" @click="press('.')">
						.
					</view>
				</view>
			</view>
		</view>
		<!-- 拣货 -->
		<view class="jianhuofather guodu" 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;">
				{{showvalue.wlName}}
			</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;color: #555555;">
					￥{{showvalue.totalPrice}}
				</view>
			</view>
			<view style="display: flex;margin-top: 10rpx;">
				<view class="" style="width: 33%;">
					<view style="color: #999999;margin-top: 10rpx;font-size: 25rpx;">
						物料编码
					</view>
					<view class="" style="margin-top: 5rpx;font-size: 34rpx;">
						{{showvalue.wlMaterialNo}}
					</view>
				</view>
				<view style="width: 33%;">
					<view style="color: #999999;margin-top: 10rpx;white-space: nowrap;font-size: 25rpx;">
						规格型号
					</view>
					<view
						style="margin-top: 5rpx;font-size: 34rpx;white-space: nowrap;display: flex;flex-wrap: nowrap;">
						{{showvalue.wlSpecificationModel}}
					</view>
				</view>
			</view>
			<view style="display: flex;margin-top: 20rpx;">
				<view class="" style="width: 33%;">
					<view style="color: #999999;margin-top: 10rpx;font-size: 25rpx;">
						采购单价
					</view>
					<view class="text-anim" style="margin-top: 5rpx;font-weight: 600;font-size: 34rpx;">
						￥{{showvalue.arrivalPrice?Number(showvalue.arrivalPrice).toFixed(2):Number(showvalue.procurementPrice).toFixed(2)}}
					</view>
				</view>
				<view class="" style="width: 33%;">
					<view style="color: #999999;margin-top: 10rpx;font-size: 25rpx;">
						采购数量
					</view>
					<view class="" style="margin-top: 5rpx;font-weight: 600;font-size: 34rpx;">
						{{showvalue.purchaseQuantity}}
					</view>
				</view>
				<view class="" style="width: 33%;">
					<view style="color: #999999;margin-top: 10rpx;font-size: 25rpx;">
						采购单位
					</view>
					<view class="" style="margin-top: 5rpx;font-size: 34rpx;">
						{{showvalue.wlUnits}}
					</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;margin-top: 10rpx;">
					入库信息
				</view>
			</view>
			<view style="display: flex;margin-top: 10rpx;">
				<view class="" style="width: 33%;">
					<view style="color: #999999;margin-top: 10rpx;font-size: 25rpx;">
						入库数量
					</view>
					<view class="" style="margin-top: 5rpx;font-size: 34rpx;">
						{{showvalue.rksl}}
					</view>
				</view>
				<view class="" style="width: 33%;">
					<view style="color: #999999;margin-top: 10rpx;font-size: 25rpx;">
						挂账数量
					</view>
					<view class="" style="margin-top: 5rpx;font-size: 34rpx;">
						{{showvalue.wrksl}}
					</view>
				</view>
				<view class="" style="width: 33%;">
					<view style="color: #999999;margin-top: 10rpx;font-size: 25rpx;">
						销账数量
					</view>
					<view class="" style="margin-top: 5rpx;font-size: 34rpx;">
						{{showvalue.xzsl}}
					</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;margin-top: 10rpx;">
					拣货拍照
				</view>
			</view>
			<view style="display: flex;flex-wrap: wrap;width: 60%;">
				<view class="moban-photo" v-for="(item,index) in albumlist" :key="index">
					<view
						style="width: 1.6vw;height: 1.6vw;z-index: 20;position: absolute; right: 0.1vw;top: 0.1vw;background: rgba(255, 255, 255, 0.7);display: flex;justify-content: center;align-items: center;"
						@click.stop="deldex=index;open=1">
						<image src="/static/x.png" mode="aspectFill" style="width: 100%;height: 100%;"></image>
					</view>
					<image style="width: 100%;height: 100%;" :src="item?item:'/static/zhanwei.png'" mode="aspectFill"
						@click="previewImage(item,index,albumlist)" />
				</view>
				<view style="width: 40%;height: 150rpx;margin-right: 4%;margin-top: 3%;" v-if="albumlist.length<4"
					@click="uplod(0)">
					<view class="moban-photo-special">
						<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: 87%;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: 20rpx;">
				<view class="gray-button" @click="jjnum(-1)" @longpress="handleTouchStart(-1)"
					@touchend="handleTouchEnd">
					-
				</view>
				<view class="gray-input" style="width:12vw;">
					<text v-for="(v,i) in stringjh" :key="i">{{v}}</text>
				</view>
				<!-- <text></text>{{showvalue.num}} -->
				<view class="gray-button" @click="jjnum(1)" @longpress="handleTouchStart(1)" @touchend="handleTouchEnd">
					+
				</view>
			</view>
			<view class="jianhuobutton">
				<view style="display: flex;">
					<view @click="openjianhuo = false;clickflag = false"
						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 @click="config(1)"
						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 @click="config(0)"
						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" @click="clknum(1)">
						1
					</view>
					<view class="gray-button-jianpan" @click="clknum(2)">
						2
					</view>

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

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

					<view class="gray-button-jianpan" @click="clknum(9)">
						9
					</view>
				</view>
				<view style="display: flex;width: 480rpx;">
					<view class="gray-button-jianpan" style="font-size: 35rpx;" @click="clknum('AC')">
						AC
					</view>
					<view class="gray-button-jianpan" @click="clknum(0)">
						0
					</view>

					<view class="gray-button-jianpan" style="font-size: 35rpx;" @click="clknum('AE')">
						AE
					</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">
						{{plsbuy[lefttarget]?.cgdNo}}
					</text>

				</view>
			</view>
			<scroll-view scroll-y="true" class="photowall-other" scroll-with-animation v-if="topbuttontarget==0">
				<view class="photowall-other-one" v-for="(item,index) in jhdanarr" :key="index"
					@click="previewImage(item,index,jhdanarr,2)">
					<image style="width: 100%;height: 70%;border-radius: 30rpx;"
						:src="item.jhPic?serverUrl + item.jhPic:'/static/ceshiyaoshan.png'" mode="aspectFill"
						:lazy-load="true" />
					<view style="margin-top: 20rpx;">
						<text style="color: #888888;">
							上传时间:
						</text>
						<text style="margin-left: 15rpx;">
							{{item.createTime}}
						</text>
					</view>
					<view style="margin-top: 10rpx;">
						<text style="color: #888888;letter-spacing: 8.9rpx;">
							上传人:
						</text>
						<text>
							{{item.createBy}}
						</text>
					</view>
				</view>
				<view class="noarray" v-if="!jhdanarr.length">

					<image class="noarray-img" src="/static/index/warehouse/procurement/picking/noarray.png"
						mode="aspectFill" />
					<view class="noarray-font">
						暂无拣货照片
					</view>
				</view>
			</scroll-view>

			<scroll-view scroll-y="true" class="photowall-other" scroll-with-animation v-if="topbuttontarget==1" style="margin-top:0 !important;">
				<view class="photowall-other-one" v-for="(item,index) in suixingdanarr" :key="index"
					@click="previewImage(item,index,suixingdanarr,1)">
					<image style="width: 100%;height: 70%;border-radius: 30rpx;"
						:src="item.sxdPic?serverUrl + item.sxdPic:'/static/ceshiyaoshan.png'" mode="aspectFill" />
					<view style="margin-top: 20rpx;">
						<text style="color: #888888;">
							上传时间:
						</text>
						<text style="margin-left: 15rpx;">
							{{item.createTime}}
						</text>
					</view>
					<view style="margin-top: 10rpx;">
						<text style="color: #888888;letter-spacing: 8.9rpx;">
							上传人:
						</text>
						<text>
							{{item.createBy}}
						</text>
					</view>
				</view>
				<view class="photowall-other-one" v-if="topbuttontarget==1">
					<view style="width: 100%;height: 71%;display: flex;flex-direction: column;
						justify-content: center;align-items: center;position: absolute;top:1vw;left: 0;
						background-color:#fafdff ;border: 1rpx solid #78B1EB;border-radius: 30rpx;" @click="uplod(1)">
						<image style="width: 70rpx;height: 70rpx;margin-bottom: 5rpx;"
							src="/static/index/warehouse/procurement/picking/addphoto.png" />
						<view style="color: #78B1EB;">
							点击拍照上传
						</view>
					</view>
				</view>

			</scroll-view>
		</view>



		<view class="contain-left">
			<view v-show="openselect" class="mengban" style="background: transparent;" @click="openselect=false"></view>
			<view class="left-select-more" v-show="openselect">
				<view class="more-bottom">
					<view class="bottom-left" @click="chongzhi">
						重置
					</view>
					<view class="bottom-right" @click="openselect=false">
						确定
						<text style="font-size: 25rpx;margin-top: 5rpx;" v-if="alltotal>=99">
							(99+采购单)
						</text>

					</view>
				</view>
				<view class="more-title">
					采购单状态
				</view>
				<view class="more-statues-father">
					<view :class="plzinfo.cgdType==`0,1`?`more-statues-button-target`:`more-statues-button`"
						@click="plzinfo.cgdType=`0,1`;search()">
						全部
					</view>
					<view :class="plzinfo.cgdType==`0`?`more-statues-button-target`:`more-statues-button`"
						@click="plzinfo.cgdType=`0`;search()">
						待入库
					</view>
					<view :class="plzinfo.cgdType==`1`?`more-statues-button-target`:`more-statues-button`"
						@click="plzinfo.cgdType=`1`;search()">
						待完结
					</view>
				</view>


				<view class="more-time">
					采购日期
				</view>
				<view class="more-time-select" @click="opendata=!opendata">
					<view class="more-gray" v-show="!plzinfo.startTime">
						开始日期
					</view>
					<view class="more-black" v-show="plzinfo.startTime">
						{{ plzinfo.startTime }}
					</view>

					<view style="font-size: 32rpx;">
						至
					</view>
					<view class="more-gray" v-show="!plzinfo.endTime">
						结束日期
					</view>
					<view class="more-black" v-show="plzinfo.endTime">
						{{ plzinfo.endTime }}
					</view>
					<image class="more-img" src="/static/index/warehouse/procurement/picking/data.png" />
				</view>
				<view class="more-select">
					采购人
				</view>
				<view class="more-time-select" @click="opencgr=true">
					<input class="more-gray" v-model="cgrvalue" placeholder="请输入采购人" placeholder-style="color: #BFBFBF;"
						style="margin-left: 30rpx;width: 400rpx;" @input="changeArray"></input>
					<image class="select-img" src="/static/index/warehouse/procurement/picking/center.png" />
				</view>
				<view class="more-select">
					供应商
				</view>
				<view class="more-time-select" @click="opengys=true">
					<input class="more-gray" v-model="gysvalue" placeholder="请输入供应商" placeholder-style="color: #BFBFBF;"
						style="margin-left: 30rpx;width: 400rpx;" @input="changeArraysecond"></input>
					<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="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="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="plzinfo.cgdType==`0,1`?`statues-button-target`:`statues-button`" style="margin-left: 4%;"
					@click="plzinfo.cgdType=`0,1`;search()">
					全部
				</view>
				<view :class="plzinfo.cgdType==`0`?`statues-button-target`:`statues-button`"
					@click="plzinfo.cgdType=`0`;search()">
					待入库
				</view>
				<view :class="plzinfo.cgdType==`1`?`statues-button-target`:`statues-button`"
					@click="plzinfo.cgdType=`1`;search()">
					待完结
				</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',
						  background: i === lefttarget ? '#fff' : 'rgba(255,255,255,0.6)'
						}">
						<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).toFixed(2) }}
								</view>

							</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">
									{{ v.jhTime?.slice(0,10).replace(/-/g, '.') }}
								</view>
								<view class="middle-heng-father">

									<view class="middle-ball" v-if="Number(v.status)<1"></view>
									<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
								</view>
								<view class="end-font">

									<view>
										拣货
									</view>
									<view  v-if=" v.jhBy">
										{{ "[ " + v.jhBy + " ]" }}
									</view>
								</view>
							</view>
							<view class="pls-card-middle-one">
								<view class="middle-title">
									{{ Number(v.status)>=2 ? v.wjTime?.slice(0,10).replace(/-/g, '.') :""}}
								</view>

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

									<!-- <view class="middle-ball" :style="{backgroundColor: `#1083F8`}"></view> -->
									<view class="middle-ball"
										:style="{backgroundColor: Number(v.status)==1? ``:`#E5E5E5`}"
										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 style="font-size: 25rpx;" v-if=" 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.gysId_dictText }}
								</view>
							</view>
							<view class="tag-success">
								{{ 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="left-top-tags">
					<view class="wuliao-title">
						物料信息
						<!-- <view class="wuliao-heng"></view> -->
					</view>
				</view>
				<view :class="!topbuttontarget?`contain-right-button-target`: `contain-right-button`"
					@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`"
					@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)?`contain-right-button`: `contain-right-button-bad`"
					style="border-color: #D9DADC;box-shadow: 0 1rpx 3rpx #D9DADC;" @click="bebad">
					<image class="buttont-img"
						:src="`/static/index/warehouse/procurement/picking/bebad${!Number(plsbuy[lefttarget]?.status)?``:`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" :scroll-left="Invoiscroll" scroll-with-animation>
					<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',backgroundColor:middletarget === i?`#F9FCFF`:``}"
							@click="clickmiddle(i)">
							<view :class="v.status<2?`up-tags-target`: `up-tags`">
								{{v.status_dictText}}
							</view>
							<image class="middle-img"
								:src="v.materialImg?serverUrl + v.materialImg : '/static/index/warehouse/procurement/k.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;margin-right: -5rpx;margin-left: -5rpx;">
											￥
										</text>

										<text style="font-size: 30rpx;"
											:style="{fontWeight:middletarget !== i?`600`:``,color:middletarget !== i?`#333333`:`#888888`}">
											{{v.arrivalPrice?Number(v.arrivalPrice).toFixed(2):Number(v.procurementPrice).toFixed(2) }}
										</text>

									</view>
									<view class="" style="font-size: 30rpx;position: relative;">
										<text style="font-weight: 600;margin-right: 5rpx;"
											:style="{fontWeight:middletarget === i?`600`:``,color:middletarget === i?`#333333`:`#888888`}">
											{{ v.purchaseQuantity }}
										</text>
										<text style="font-size: 26rpx;color: #888888;">
											{{ v.wlUnits}}
										</text>

									</view>

								</view>
								<view class="right-middle">

								</view>
								<view class="juzhong">
									<view class="">
										<text style="color: #888888;">
											入库数量
										</text>
									</view>
									<view class="">
										<text :style=" {fontWeight: v.rksl>0? `600` :`` }">
											{{v.rksl}}
										</text>
									</view>

								</view>
								<view class="juzhong">
									<view class="">
										<text style="color: #888888;">
											挂账数量
										</text>
									</view>
									<view class="">
										<text :style=" {fontWeight: v.wrksl>0? `600` :`` }">
											{{v.wrksl}}
										</text>
									</view>

								</view>
								<view class="juzhong">
									<view class="">
										<text style="color: #888888;">
											销账数量
										</text>
									</view>
									<view class="">
										<text :style=" {fontWeight: v.xzsl>0? `600` :`` }">
											{{v.xzsl}}
										</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: 10rpx;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"
							:class="showvalue.jianhuobtn==false?`jianhuobutton-gray-bad`: `jianhuobutton-gray`">
							拣货
						</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/index/warehouse/procurement/k.png'"
							mode="aspectFill"></image>

						<view class="left-tags">
							<view class="tags-one" v-if="showvalue.categoryId_dictText">
								{{showvalue.categoryId_dictText}}
							</view>
							<view class="tags-one" v-if="showvalue.typeId_dictText">
								{{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">
									<view class="gray-text">
										规格型号
									</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">
										￥{{showvalue.arrivalPrice? Number(showvalue.arrivalPrice).toFixed(2):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="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">
										{{showvalue.rksl}}
									</view>
								</view>
								<view class="threeone">
									<view class="gray-text">
										挂账数量
									</view>
									<view class="right-text">
										{{showvalue.wrksl}}
									</view>
								</view>
								<view class="threeone">
									<view class="gray-text">
										销账数量
									</view>
									<view class="right-text">
										{{showvalue.xzsl}}
									</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;margin-left: 20rpx;color: #222222;">
							{{showvalue.wlName}}
						</view>
						<view style="color: black;">
							<text style="color: #888888;">
								采购数量：
							</text>

							<text style="font-weight: 600;color: #555555;">
								{{showvalue.purchaseQuantity}}
							</text>
							{{showvalue.wlUnits}}
						</view>
					</view>
					<scroll-view style="width: 110%;height: 400rpx;display: flex;flex-wrap: wrap;" scroll-y="true"
						scroll-with-animation @scrolltolower="lhjlfy()">
						<view
							style=" display: inline-block;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 lhjlarr" :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: #555555;">
										{{item.crkNum}}
									</text>
									<text style="color: #555555;">
										{{showvalue.materialUnits}}
									</text>

								</view>
								<view
									style="width: 110rpx;height: 50rpx;border-radius: 30rpx;display: flex;justify-content: center;align-items: center;border: 1rpx solid #C3C3C3;background-color: #f1f1f1;color: #888888;margin-top: -10rpx;">
									{{ item.crkStatus_dictText}}
								</view>
							</view>
							<view style="width: 100%;justify-content: space-between;display: flex;">
								<view class="">
									采购单价：

									<text style="font-weight: 600;color: #555555;">
										￥{{Number(item.oldPrice).toFixed(2)}}
									</text>

								</view>
								<view class="">
									拣货人：
									<text style="color: #888888;font-weight: 600;">
										{{item.createBy}}
									</text>

								</view>
							</view>
							<view style="width: 100%;justify-content: space-between;display: flex;margin-top: 10rpx;">
								<view class="">
									到货单价：
									<text style="font-weight: 600;color: #555555;">
										￥{{Number(item.newPrice).toFixed(2)}}
									</text>

								</view>
								<view class="">
									{{item.createTime}}
								</view>
							</view>
						</view>
						<view
							style="width: 100%;display: flex;justify-content: center;color: #C3C3C3;margin-top: 20rpx;" v-if="lhjlarr.length">
							<image v-if="statustory=='loading'"
								style="width: 25rpx;height: 25rpx;margin-right: 10rpx;margin-top: 5rpx;margin-left: -10rpx;"
								src="/static/index/warehouse/procurement/picking/loading.png" />
							<text v-if="statustory=='loading'">上划加载更多</text>
							<text v-if="statustory=='nomore'">已加载全部~</text>
							<text v-if="statustory=='loadmore'">加载中~</text>
						</view>
						
					</scroll-view>
					<view class="nomessage-samll"  v-if="!lhjlarr.length">
						<image style="width: 300rpx;height: 300rpx;margin-top: -200rpx;"
							src="/static/index/warehouse/procurement/picking/nomessage.png" />
						<view class="noarray-font">
							暂无拣货记录
						</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>
		<tanchuang :show="badshow" font="确定要作废这个采购单吗" @back="badshow=false;" @right="zuofei"> </tanchuang>
		<tanchuang :show="open==1" font="是否删除此图片" @back="open = 0" @right="del()"> </tanchuang>
		<tanchuang :show="open==2" font="是否销账此物料？" @back="open = 0" @right="sctp(1)"> </tanchuang>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick, defineProps, onUnmounted } from 'vue';
	import { editIzNew, queryPickingRecordList, queryJhzpList, addSxd, querySxdList, queryInvoicingList, getCgdMaterialTreeData, queryNuInfoByNuId, updateKfstatus, queryCgdList, queryCgdInfoList, queryWlInfoByWlId, voidedCgdMain, getCgrLis, getGysList, upload, editPrice, pickingInfo } from './api/lunpan.js'
	import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
	import calendar from '@/component/public/calendar.vue'
	import superpicker from '@/component/public/superpicker.vue'
	import nomessageimge from '@/pages/procurement/components/nomessage.vue';
	import tanchuang from '@/pages/procurement/components/tanchuang.vue';

	const open = ref(0);
	const typechange = ref(0);
	const stringjh = ref("")
	const serverUrl = ref("");
	const opengaijia = ref(false);
	const guiling = ref(false);
	const openjianhuo = ref(false);
	const opendata = ref(false);
	const gaijia = ref("");


	// 改价
	const dogaijia = () => {
		// console.log("????",showvalue.value.id,gaijia.value)
		editPrice({ id: showvalue.value.id, arrivalPrice: gaijia.value }).then((res) => {
			// console.log("改价", showvalue.value.id,gaijia.value)
			console.log("res", res)
			if (res.code == 200) {
				showvalue.value.arrivalPrice = gaijia.value;
				// console.log("000",Number(gaijia.value),Number(showvalue.value.purchaseQuantity))
				showvalue.value.totalPrice = Number(gaijia.value) * Number(showvalue.value.purchaseQuantity);
				plsbuy.value[lefttarget.value].totalPrice = res.result.totalPrice
				// showvalue.value.arrivalPrice
				// plsbuy.value[lefttarget.value].totalPrice = gaijia.value
				opengaijia.value = false;
			}
		})
	}
	// 计算器
	function press(k : string) {

		if (guiling.value) {
			gaijia.value = '';
			guiling.value = false
		}

		if (k === 'AC') {
			gaijia.value = ''
			return
		}

		// 小数点
		if (k === '.') {
			if (!gaijia.value.includes('.')) {
				gaijia.value = gaijia.value === '' ? '0.' : gaijia.value + '.'
			}
			return
		}

		// 数字
		if (/^\d$/.test(k)) {
			// 有小数
			if (gaijia.value.includes('.')) {
				const [i, d] = gaijia.value.split('.')
				if ((d || '').length < 2) gaijia.value += k
				return
			}

			// 无小数，整数部分限制 4 位
			let intPart = gaijia.value
			if (intPart === '0') intPart = '' // 防止 01

			if (intPart.length < 4) gaijia.value = intPart + k
		}
	}
	// 模糊查询
	const gysclick = (res : any) => {
		console.log("///", res);
		opengys.value = false;
	}

	const openjianhuoclick = () => {
		if (showvalue.value.jianhuobtn == false) {
			return
		}
		openjianhuo.value = true;
		clickflag.value = true;
		donghuaopo.value = false;
		setTimeout(() => {
			donghuaopo.value = true;
		}, 100)
	}
	const opengaijiaclick = () => {
		opengaijia.value = true;
		guiling.value = true
		gaijia.value = (showvalue.value.arrivalPrice ? showvalue.value.arrivalPrice : showvalue.value.procurementPrice).toString()
		donghuaopo.value = false;
		setTimeout(() => {
			donghuaopo.value = true;
		}, 100)
	}
	// 过滤后的结果，页面上渲染用这个
	const filteredCgrList = ref([]);

	const closefilteredCgrList = () => {
		filteredCgrList.value = [];
		cgrvalue.value = plzinfo.cgBy;
	}
	const clickfilteredCgrList = (item : any) => {
		filteredCgrList.value = [];
		plzinfo.cgBy = item.cgBy
		cgrvalue.value = plzinfo.cgBy;
		search()
	}

	// --- 模糊匹配 ---
	function fuzzyMatch(text : unknown, q : string) {
		const s = String(text ?? '').toLowerCase()
		const ql = String(q ?? '').toLowerCase().trim()
		if (!ql) return true
		if (s.includes(ql)) return true

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

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

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

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

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

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

			filteredCgrList.value = cgrlist.value.filter(item =>
				fuzzyMatch(item?.cgBy, keyword)
			)
			if (!filteredCgrList.value.length) {
				filteredCgrList.value.push({ cgBy: `暂无数据` })
			}

		}, 300)
	}
	// 过滤后的结果，页面上渲染用这个
	const filteredCgrListsecond = ref([]);
	const secondindex = ref(-1)

	const closefilteredCgrListsecond = () => {
		filteredCgrListsecond.value = [];
		gysvalue.value = "";
		plzinfo.suppliers = "";
		search()
	}
	const clickfilteredCgrListsecond = (item : any, index : number) => {
		filteredCgrListsecond.value = [];
		plzinfo.suppliers = item.suppliers;
		gysvalue.value = item.suppliersName;
		secondindex.value = index;
		search()
	}
	const cgrvalue = ref("");
	const gysvalue = ref("");
	function changeArraysecond(res : any) {
		if (!res.detail.value) {
			plzinfo.suppliers = "";
			filteredCgrListsecond.value = [];
			secondindex.value = -1;
			gysvalue.value = "";
			search()
			return
		}

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

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

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

			filteredCgrListsecond.value = gyslist.value.filter(item =>
				fuzzyMatch(item?.suppliersName, keyword)
			)

			// filteredCgrListsecond.value = [...filteredCgrListsecond.value, ...filteredCgrListsecond.value, ...filteredCgrListsecond.value, ...filteredCgrList.value, ...filteredCgrList.value]
			if (!filteredCgrListsecond.value.length) {
				filteredCgrListsecond.value.push({ suppliersName: `暂无数据` })
			}

		}, 300)
	}


	onLoad(() => {
		firstgetqueryCgdList();
		serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
		getSelectList();
	})
	const opencgr = ref(false);
	const opengys = ref(false);


	const cgrlist = ref([]);
	const gyslist = ref([]);

	const getSelectList = () => {
		getCgrLis().then((res : any) => {
			cgrlist.value = res.result;
		})
		getGysList().then((res : any) => {
			gyslist.value = res.result;
			// console.log("isright", res)
		})
	}

	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,
		cgdParamInfo: "",
		suppliers: "",
		cgdType: "0,1",
		startTime: "",
		endTime: "",
		cgBy: "",
		nuId: uni.getStorageSync('nuId')
	})
	const mobanplzinfo = {
		pageNo: 1,
		pageSize: 10,
		canpull: true,
		cgdParamInfo: "",
		suppliers: "",
		cgdType: "0,1",
		startTime: "",
		endTime: "",
		cgBy: "",
		nuId: uni.getStorageSync('nuId')
	}
	// 销毁日历
	const xiaohui = ref(true);
	const chongzhi = () => {
		xiaohui.value = false;
		setTimeout(() => {
			xiaohui.value = true;
		}, 300)
		Object.assign(plzinfo, mobanplzinfo);
		cgrvalue.value = "";
		gysvalue.value = ""
		search()
	}
	type datetype = {
		start : string,
		end : string
	}
	const dateget = (res : datetype) => {
		plzinfo.startTime = res.start;
		plzinfo.endTime = res.end;
		search()
	}
	const leftscrolltop = ref(0)

	const plsbuy = ref([])
	const alltotal = ref(0);
	const nomessageshow = ref(false);
	const firstgetqueryCgdList = () => {
		queryCgdList(plzinfo).then((res : any) => {

			plsbuy.value.push(...res.result.records)
			alltotal.value = res.result.total
			if (!res.result.total) {
				// console.log("没数据了!!!")
				nomessageshow.value = true;
			}
			// console.log("请购单数据呢???", res)
			if (res.result.records.length) {
				form.cgdId = plsbuy.value[0].id
				queryInvo(0);
			}

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

	})

	const goback = () => {
		uni.navigateBack()
	}
	const form = reactive({
		nuId: '',
		pageNo: 1,
		pageSize: -1,
		categoryId: '',
		typeId: '',
		medicationId: '',
		wlParamInfo: '',
		cgdId: "",
		isWaring: 0,
		canpull: true
	})
	const mobanform = {
		nuId: '',
		pageNo: 1,
		pageSize: 9,
		categoryId: '',
		typeId: '',
		medicationId: '',
		wlParamInfo: '',
		cgdId: "",
		isWaring: 0
	}
	const Invoiscroll = ref(0)
	const tagsArray = [`待入库`, `挂账中`, `已入库`, `已销账`,]
	const clickmiddle = (index : number) => {
		// console.log(showvalue.value)
		middletarget.value = index;
		showvalue.value = InvoicingList.value[index];
		showvalue.value.jianhuobtn = false;
		Invoiscroll.value = (index - 2) * 205;
		if (Number(showvalue.value.status) == 0 || (Number(showvalue.value.status) > 0 && Number(showvalue.value.wrksl) > 0)) {
			showvalue.value.maxnum = (showvalue.value.rksl == 0 && showvalue.value.wrksl == 0 && showvalue.value.xzsl == 0) ? showvalue.value.purchaseQuantity : showvalue.value.wrksl
			showvalue.value.num = showvalue.value.maxnum;
			stringjh.value = toFixed4ByPadStart(showvalue.value.num);
			showvalue.value.jianhuobtn = true;
		}
		Object.assign(form, mobanform)
		lhjpageNo.value = 1;
		lhjlarr.value = [];
		lhjilu()
	}
	const InvoicingList = ref([])
	const queryInvo = (index : number) => {
		queryCgdInfoList(form).then(res => {
			InvoicingList.value = res.result.records;
			clickmiddle(index);
		})
	}
	const lhjlarr = ref([])
	const lhjpageNo = ref(1)
	const statustory = ref('loading')
	const lhjilu = () => {
		let obj = {
			cgdId: showvalue.value.cgdId,
			wlId: showvalue.value.wlId,
			pageNo: lhjpageNo.value,
			pageSize: 10,
		}
		queryPickingRecordList(obj).then(res => {
			lhjlarr.value.push(...res.result.records)
			statustory.value = (res.result.total == lhjlarr.value.length || res.result.records.length == 0 ? 'nomore' : 'loadmore')
		})
	}
	const lhjlfy = () => {
		if (statustory.value == 'nomore') { return }
		lhjpageNo.value++;
		lhjilu()
	}
	const search = () => {
		// if (!plzinfo.cgdParamInfo) return
		plzinfo.pageNo = 1;
		plsbuy.value = [];
		queryCgdList(plzinfo).then((res : any) => {
			plsbuy.value.push(...res.result.records)
			alltotal.value = res.result.total
			if (res.result.records.length) {
				form.cgdId = plsbuy.value[0].id
				queryInvo(0);
			}
			if (res.result.records.length < plzinfo.pageSize) {
				plzinfo.canpull = false;
			}
		})
	}
	const moreindex = ref(-1);
	const zuofeiindex = ref(-1);
	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 = () => {
		console.log("-----------------------> 点击分享按钮");

		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) {
				uni.showToast({
					title: res,
					icon: 'none', // 'none' 表示不带图标
					duration: 20000
				})
				console.log("-------------------success:", res);
			},
			fail: function (err) {
				console.log("------------------- fail:", err);
				uni.showToast({
					title: err,
					icon: 'none', // 'none' 表示不带图标
					duration: 20000
				})
			}
		});
	}
	const badshow = ref(false);
	const donghuacs = ref(false)
	const bebad = () => {
		if (!Number(plsbuy.value[lefttarget.value]?.status) && plsbuy.value.length) {
			badshow.value = true;
			moreindex.value = -1;
			donghuacs.value = false;
			setTimeout(() => donghuacs.value = true, 50)
		}
	}
	const zuofei = () => {
		voidedCgdMain({ id: plsbuy.value[lefttarget.value].id }).then((res : any) => {
			console.log("res", res)
			if (res.success) {
				uni.showToast({
					title: res.message,
					icon: 'success', // 'none' 表示不带图标
					duration: 2000
				})
				lefttarget.value = 0;
				badshow.value = false;
				InvoicingList.value = [];
				plsbuy.value = []
				Object.assign(plzinfo, mobanplzinfo)
				Object.assign(form, mobanform)
				firstgetqueryCgdList();
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none',
					duration: 2000
				})
				badshow.value = false;
			}
		})
	}
	const donghuaopo = ref(false)
	const suixingdanarr = ref([])
	const jhdanarr = ref([])

	const donghuastart = (index : number) => {
		if (index == 1) {
			sxdarr()
		} else {
			JhzpList()
		}

		topbuttontarget.value = index;
		donghuaopo.value = false;
		setTimeout(() => {
			donghuaopo.value = true;
		}, 100)
	}
	const Jhz = ref(1)
	const JhzpList = () => {
		let obj = {
			cgdId: plsbuy.value[lefttarget.value].id,
		}
		queryJhzpList(obj).then(res => {
			jhdanarr.value = res.result
		})
	}
	const sxdarr = () => {
		let obj = {
			cgdId: plsbuy.value[lefttarget.value].id,
			pageNo: 1,
			pageSize: -1
		}
		querySxdList(obj).then(res => {
			console.log(res.result.records)
			suixingdanarr.value = res.result.records
		})
	}
	const sxdupld = (e) => {
		let now = new Date();
		let year = now.getFullYear();
		let month = now.getMonth() + 1;
		uni.uploadFile({
			url: uni.getStorageSync('serverUrl') + '/sys/common/upload',
			filePath: e,
			name: 'file',
			formData: {
				biz: year + '/' + month + '/sxdPic'
			},
			header: {
				'X-Access-Token': uni.getStorageSync('token')
			},
			success: res => {
				const data = JSON.parse(res.data)
				addSxd({ sxdPic: data.message, cgdId: plsbuy.value[lefttarget.value].id }).then(resd => {
					if (resd.success) {
						sxdarr()
					}
				})
			},
			fail: () => {
				uni.showToast({ title: '上传失败', icon: 'none' })
			}
		})
	}
	// 上传
	const albumlist = ref([])
	const uplod = (type : number) => {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['camera'], //从相册选择
			success: (e) => {
				let ar = JSON.stringify(e.tempFilePaths)
				uni.compressImage({
					src: JSON.parse(ar)[0],
					quality: 60,
					success: res => {
						if (!type) {
							albumlist.value.push(res.tempFilePath)
						} else if (type == 1) {
							sxdupld(res.tempFilePath)
							console.log(res.tempFilePath)
						}

					}
				})
			}
		});
	}
	// 预览
	const previewImage = (v, i, arr, n) => {
		if (n == 1) {
			let u = []
			arr.forEach(e => {
				u.push(serverUrl.value + e.sxdPic)
			})
			uni.previewImage({
				current: i,
				urls: u,
				showmenu: false,
				longPressActions: {
					itemList: [],
				}
			})
		}
		else if (n == 2) {
			let u = []
			arr.forEach(e => {
				u.push(serverUrl.value + e.jhPic)
			})
			uni.previewImage({
				current: i,
				urls: u,
				showmenu: false,
				longPressActions: {
					itemList: [],
				}
			})
		}
		else {
			uni.previewImage({
				current: i,
				urls: arr,
				showmenu: false,
				longPressActions: {
					itemList: [],
				}
			})
		}
	}
	// 删除1个
	const deldex = ref(-1)
	const del = () => {
		albumlist.value.splice(deldex.value, 1)
		deldex.value = -1;
		open.value = 0;
	}
	const clickflag = ref(false);
	const clknum = (item : any) => {
		// showvalue.value.maxnum = showvalue.value.purchaseQuantity : showvalue.value.wrksl
		// showvalue.value.num 
		if (item == "AC") {
			showvalue.value.num = 0;
			stringjh.value = toFixed4ByPadStart(showvalue.value.num);
			return
		}
		if (item == "AE") {
			showvalue.value.num = Math.trunc(showvalue.value.num / 10)
			stringjh.value = toFixed4ByPadStart(showvalue.value.num);

			return
		}
		if (clickflag.value == true) {
			showvalue.value.num = item;
			clickflag.value = false;
			stringjh.value = toFixed4ByPadStart(showvalue.value.num)
			return
		}
		if (digitCountByString(showvalue.value.num) > 3) {
		} else {
			if (!showvalue.value.num) {
				showvalue.value.num = item
			} else {
				showvalue.value.num = showvalue.value.num * 10 + item;
			}
			// cy()
			stringjh.value = toFixed4ByPadStart(showvalue.value.num)
		}
	}
	// 数字转化
	const digitCountByString = (n) => {
		const s = Math.abs(n).toString();
		return s.length;
	}
	// 数字转化
	const toFixed4ByPadStart = (n) => {
		const intPart = Math.floor(Math.abs(n));
		return String(intPart).padStart(4, '0');
	}
	// 加减
	const InteroutId = ref(null)
	const handleTouchStart = (e : number) => {
		Interval(e)
	}
	const handleTouchEnd = () => {
		clearInterval(InteroutId.value);
		// 清除定时器
	}
	const Interval = (e : number) => {
		InteroutId.value = setInterval(() => {
			jjnum(e);
		}, 120);
	}
	const jjnum = (e : number) => {
		let m = showvalue.value.maxnum;
		if (m <= showvalue.value.num && e == 1) { showvalue.value.num = m; return }
		if (showvalue.value.num <= 1 && e == -1) { showvalue.value.num = 1; return }
		showvalue.value.num += e;
		stringjh.value = toFixed4ByPadStart(showvalue.value.num)
	}
	// 
	const fag = (e) => {
		let str = '';
		addupimg.value.forEach(item => {
			str += item + ','
		})

		let obj = {
			jhId: showvalue.value.id,
			jhNum: showvalue.value.num,
			jhType: e,
			jhPic: str == '' ? null : str,
			cgdId: showvalue.value.cgdId
		}
		pickingInfo(obj).then(res => {
			// console.log(`提交数据`,res)
			uni.showToast({
				icon: 'none',
				title: res.message ? res.message : '操作成功'
			})
			if (res.success) {
				plsbuy.value[lefttarget.value].totalPrice = res.result.cgdTotalPrice
				albumlist.value = [];
				addupimg.value = [];
				openjianhuo.value = false;
				open.value = 0;
				form.cgdId = plsbuy.value[lefttarget.value].id;
				plsbuy.value[lefttarget.value] = res.result.cgdInfo;
				queryInvo(middletarget.value)
			}
		})
	}
	const addupimg = ref([])
	const sctp = (e : number) => {
		if (albumlist.value.length == 0) {
			fag(e)
			return
		}
		let now = new Date();
		let year = now.getFullYear();
		let month = now.getMonth() + 1;
		albumlist.value.forEach(item => {
			uni.uploadFile({
				url: uni.getStorageSync('serverUrl') + '/sys/common/upload',
				filePath: item,
				name: 'file',
				formData: {
					biz: year + '/' + month + '/jhPic'
				},
				header: {
					'X-Access-Token': uni.getStorageSync('token')
				},
				success: res => {
					const data = JSON.parse(res.data)
					addupimg.value.push(data.message)
					if (addupimg.value.length == albumlist.value.length) {
						fag(e)
					}
				},
				fail: () => {
					uni.showToast({ title: '上传失败', icon: 'none' })
				}
			})

		})

	}

	const config = (e) => {
		if (e == 1) {
			open.value = 2;
		} else {
			sctp(0)
		}
	}
	// 配置
	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: '600',
		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);
	});
	const jiansuotarget = ref(false);
</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;
			z-index: 99;

			.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: 9999;
				padding: 0 50rpx;

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

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

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

					}
				}

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

				.more-time {
					margin-top: 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-black {
						font-size: 28rpx;
						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: 103%;
					height: 7vh;
					margin-top: 30rpx;
					display: flex;
					margin-left: -10rpx;
					// background-color: green;
					justify-content: space-between;
					// align-items: center;

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

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

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

			.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: #fff;
					border: 1rpx solid #0da6f8;
					color: #0da6f8;
					display: flex;
					justify-content: center;
					align-items: center;
					box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
				}
			}

			.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;
									color: #555555;
								}

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

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

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

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

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

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

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

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

								.end-font {
									width: 100%;
									height: 6vh;
									font-size: 23rpx;
									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;
								border: 1rpx solid #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;
					border-color: #D9DADC;
					box-shadow: 0 1rpx 3rpx #D9DADC;
					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 {

					background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					padding: 0 35rpx;
					color: #1083F8;
					border-radius: 40rpx;
					border: 1rpx solid #555555;
					border-color: #1083F8;
					box-shadow: 0 1rpx 3rpx #D9DADC;
					margin-left: 20rpx;

					.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: 15rpx;
									text-align: center;
								}

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

	.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;
			padding-top: 30rpx;

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

			.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: 10rpx;
				font-size: 23rpx;
				color: #555555;
				padding: 0 0.5vw;
			}
		}

		.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;
						color: #555555;
					}
				}
			}
		}
	}

	.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: 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;
		background: RGBA(239, 240, 244, 0.55);
	}

	.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: 40rpx;
		background-color: #fff;
		transition: all 0.3s;
		z-index: 999;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		padding: 0 60rpx;
	}

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

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

	.photowall {
		position: fixed;
		top: 54%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		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.1);
		padding: 0 90rpx;

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

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

			.photowall-left {
				color: #888888;
			}

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

		.photowall-other {
			width: 107%;
			height: 67vh;
			display: flex;
			margin-top: 20rpx;

			.photowall-other-one {
				width: 28.5%;
				height: 430rpx;
				margin-right: 3vw;
				margin-bottom: 0%;
				border-radius: 30rpx;
				display: inline-block;
				position: relative;
			}
		}
	}

	.gray-button {
		font-size: 50rpx;
		background-color: #f3f5f9;
		// box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.12);
		border-radius: 20rpx;
		width: 100rpx;
		height: 100rpx;
		border: 1rpx solid #eeeeee;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
	}

	.gray-button:active {
		background: linear-gradient(to top, #00C9FF, #0076FF);
		color: #fff;
		font-size: 44rpx;
		font-weight: 700;
		border: 1rpx solid #00C9FF;
	}

	.gray-button-jianpan:active {
		background: linear-gradient(to top, #00C9FF, #0076FF);
		color: #fff;
		font-size: 44rpx;
		font-weight: 700;
		border: 1rpx solid #00C9FF;
	}

	.gray-button-jianpan {
		font-size: 40rpx;
		font-weight: 600;
		background-color: #f3f5f9;
		border-radius: 35rpx;
		// box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.12);
		color: #555555;
		width: 100rpx;
		height: 100rpx;
		border: 1rpx solid #eeeeee;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
		margin-bottom: 20rpx;
		transition: .1s;
		-webkit-transform-style: preserve-3d;
		-webkit-overflow-scrolling: touch;
	}

	.gray-input {
		font-size: 50rpx;
		font-weight: 600;
		background-color: #f3f5f9;
		border-radius: 20rpx;
		// box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.12);
		padding: 0 30rpx;
		letter-spacing: 10rpx;

		height: 100rpx;
		border: 1rpx solid #eeeeee;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		padding-left: 40rpx;
		margin-right: 10rpx;
	}

	.jianhuo-jianpan {
		position: absolute;
		right: -10rpx;
		bottom: 12%;
	}

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

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

	.input-next {
		position: fixed;
		bottom: 660rpx;
		left: 40rpx;
		width: 610rpx;
		// height: 300rpx;
		border-radius: 30rpx;
		z-index: 102;
		background-color: #fff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
		padding: 40rpx 30rpx;

		.next-father {
			color: #999;
			margin: 10rpx;
			font-size: 28rpx;
		}
	}

	.nomessage {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 200rpx;
		font-size: 34rpx;
		color: #999;
	}

	.moban-photo {
		width: 40%;
		height: 150rpx;
		margin-right: 4%;
		margin-top: 3%;
		background-color: #F9F9F9;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx;
		border-radius: 0.6vw;
		overflow: hidden;
		position: relative;
	}

	.moban-photo-special {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #fafdff;
		border: 1rpx solid #c4ebff;
		border-radius: 20rpx;
	}

	.jianhuobutton-gray {
		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;
	}

	.jianhuobutton-gray-bad {
		background-color: #f8f8f8;
		color: #999;
		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;
	}

	.bottom-left:active,
	.title-input-button:active,
	.donghua-do:active,
	.contain-right-button:active,
	.jianhuobutton-gray: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;
	}

	.noarray {
		width: 90%;
		height: 100%;
		// background-color: red;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.noarray-img {
			margin-top: -200rpx;
			width: 350rpx;
			height: 350rpx;
		}
		
	}
	.noarray-font{
		margin-top: -60rpx;
		color: #888888;
		font-size: 25rpx;
	}
	.nomessage-samll{
		width: 100%;
		height: 100%;
		// background-color: red;
		display: flex;
		// justify-content: center;
		align-items: center;
		flex-direction: column;
	}
</style>