<template>
	<view>
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="物资盘点" :autoBack="true">
		<view slot="right" style="display: flex;align-items: center;flex-direction: column;" @click="popCheBian()">
			<image style="width: 48rpx; height: 48rpx;" src="../../../../static/images/wuzhi/qiehuancangku.png"></image>
			<span style="font-size: 18rpx; font-weight: 600;margin-right: 10rpx;color: #1296db;">切换仓库</span>
		</view>
		</u-navbar>
		<u-sticky bgColor="#fff" style="padding: 20rpx;">
			<u-search placeholder="请输入需要搜索的物资名称" @focus="openSelect" :clearabled="false" v-model="keyword" :showAction="false"></u-search>
		</u-sticky>

		<view>
			<u-collapse accordion :value="1">
				<u-collapse-item name="1">
					<text slot="title" style="font-weight: 600;font-size: 30rpx;">未盘点({{ weiPanDianList.length }})</text>
					<!-- 盘点卡片 -->
					<scroll-view style="height: 65vh;" scroll-with-animation scroll-y>
						<view class="paiban" v-for="item in weiPanDianList">
							<!-- 头部 -->
							<view class="head">
								<view class="headTime" style="display: flex;">
									<p
										style="width: 81rpx;height: 34rpx;margin-right: 10rpx; background: #16C4AF;border-radius: 17rpx;text-align: center;color: #FFFFFF;font-size: 26rpx;"
									>
										编号
									</p>
									{{ item.id }}
								</view>
								<!-- 副标题 -->
								<view class="operate">
									<!-- <view class="opInfo" @click="gotoTiaoBan">调班</view>
									<view class="opInfo" @click="gotoPaiBan">开始排班</view> -->
								</view>
							</view>
							<!-- 卡片 -->

							<view class="paibanInfo">
								<view style="display: flex; padding-bottom: 15rpx; align-items: center;position: relative;">
									<u-album
										singleSize="72"
										multipleMode="scaleToFill"
										singleMode="scaleToFill"
										multipleSize="72"
										rowCount="1"
										style="width: 145rpx;height: 145rpx;border: 1px solid #EFEFEF;background-color:#EFEFEF ;"
										:urls="item.showUrls == null ? [] : item.showUrls"
										maxCount="1"
									></u-album>
									<view @click="openPanDianNum(item, false)" style="width: 50rpx;height: 50rpx;position: absolute;top: 50rpx;right: 24rpx;">
										<image style="width: 100%;height: 100%;" src="../../../../static/images/wuzhi/weipandian.png"></image>
									</view>
									<view style="  display: flex; flex-direction: column;justify-content: space-between; align-items: flex-start;margin-left: 10rpx;">
										<span style="font-weight: 600;font-size: 28rpx;margin-bottom: 10rpx;">{{ item.materialName }}</span>
										<span style="font-size: 28rpx;color: #999999;margin-bottom: 10rpx;">物资类型:{{ item.materialCategory }}</span>
										<view style="  display: flex;   justify-content: space-between;align-items: center;">
											<span style="font-size: 28rpx; margin-right: 30rpx;font-weight: 800;">
												库存:
												<p style="font-weight: 600;font-size: 28rpx;margin-bottom: 10rpx;display: inline;">{{ item.num }}</p>
												{{ item.materialUnit }}
											</span>
											<span style="font-size: 28rpx;">
												盘点数:
												<p style="font-weight: 600;font-size: 28rpx;margin-bottom: 10rpx;display: inline;color: #FFB911;">未盘点</p>
											</span>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</u-collapse-item>
				<u-collapse-item>
					<text slot="title" style="font-weight: 600;font-size: 30rpx;">已盘点({{ panDianWzParams.pdDelList.length }})</text>
					<!-- 盘点卡片 -->
					<scroll-view style="height: 65vh;" scroll-with-animation scroll-y>
						<view class="paiban" v-for="item in panDianWzParams.pdDelList">
							<!-- 头部 -->
							<view class="head">
								<view class="headTime" style="display: flex;">
									<p
										style="width: 81rpx;height: 34rpx;margin-right: 10rpx; background: #16C4AF;border-radius: 17rpx;text-align: center;color: #FFFFFF;font-size: 26rpx;"
									>
										编号
									</p>
									{{ item.id }}
								</view>
								<!-- 副标题 -->
								<view class="operate">
									<!-- <view class="opInfo" @click="gotoTiaoBan">调班</view>
									<view class="opInfo" @click="gotoPaiBan">开始排班</view> -->
								</view>
							</view>
							<!-- 卡片 -->

							<view class="paibanInfo">
								<view style="display: flex; padding-bottom: 15rpx; align-items: center;position: relative;">
									<u-album
										singleSize="72"
										multipleMode="scaleToFill"
										singleMode="scaleToFill"
										multipleSize="72"
										rowCount="1"
										style="width: 145rpx;height: 145rpx;border: 1px solid #EFEFEF;background-color:#EFEFEF ;"
										:urls="item.showUrls == null ? [] : item.showUrls"
										maxCount="1"
									></u-album>
									<!-- @click="openPanDianNum(item, true)" -->
									<view style="width: 50rpx;height: 50rpx;position: absolute;top: 50rpx;right: 24rpx;">
										<image v-if="item.num == SelectWzNum" style="width: 100%;height: 100%;" src="../../../../static/images/wuzhi/yipandian.png"></image>
										<image v-else style="width: 100%;height: 100%;" src="../../../../static/images/wuzhi/pandianyichang.png"></image>
									</view>
									<view style="  display: flex; flex-direction: column;justify-content: space-between; align-items: flex-start;margin-left: 10rpx;">
										<span style="font-weight: 600;font-size: 28rpx;margin-bottom: 10rpx;">{{ item.materialName }}</span>
										<span style="font-size: 28rpx;color: #999999;margin-bottom: 10rpx;">物资类型:{{ item.materialCategory }}</span>
										<view style="  display: flex;   justify-content: space-between;align-items: center;">
											<span style="font-size: 28rpx; margin-right: 30rpx;">
												库存:
												<p style="font-weight: 600;font-size: 28rpx;margin-bottom: 10rpx;display: inline;">{{ item.num }}</p>
												{{ item.materialUnit }}
											</span>
											<span style="font-size: 28rpx;">
												盘点数:
												<p
													:style="
														item.num == item.realNum
															? 'font-weight: 600;font-size: 28rpx;margin-bottom: 10rpx;display: inline;color:#2ACC45'
															: 'font-weight: 600;font-size: 28rpx;margin-bottom: 10rpx;display: inline;color:#FF0000'
													"
												>
													{{ item.realNum }} {{ item.materialUnit }}
												</p>
											</span>
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</u-collapse-item>
			</u-collapse>
		</view>
		<view style="width: 100%;display: flex; justify-content: space-around;position: fixed;bottom: 40rpx;">
			<view
				style="width: 40%;display: flex;    align-items: center;justify-content: center;height: 80rpx;background: #FFECBB;border-radius: 40rpx;border: 1px solid #FFB244;"
			>
				<p style="font-weight: 600;font-size: 30rpx;color: #DC7200;" @click="zancun">暂存</p>
			</view>
			<view
				style="width: 40%;display: flex;    align-items: center; justify-content: center;height: 80rpx;background: #ACEDC7;border-radius: 40rpx;border: 1px solid #63C68E;"
			>
				<p style="font-weight: 600;font-size: 30rpx;color: #00A649;" @click="pandianOver">盘库结束</p>
			</view>
		</view>

		<!-- 出库物资下弹框 -->
		<u-popup :show="panDianDialogshow" :round="10" mode="bottom" @close="closepanDianDialog" @open="panDianDialogOpened">
			<view class="bottomPopup">
				<view class="">
					<u--input
						v-model="listDictionaryParams.materialName"
						@change="getKuCun"
						placeholder="请输入您要查找的物资名称"
						prefixIcon="search"
						prefixIconStyle="font-size: 22px;color: #909399"
						shape="circle"
					></u--input>
				</view>
				<view class=""><u-tabs :list="tabsList" @click="tabsClick" keyName="categoryName"></u-tabs></view>
				<view class="">
					<scroll-view scroll-y="true" style="height: 700rpx;" scroll-with-animation="true">
						<view
							style="display: flex;width: 100%; margin-top: 15rpx;padding-bottom: 15rpx; align-items: center;
		justify-content: space-between;padding: 12rpx;"
							v-for="item in kucunlist"
							:key="item.id"
						>
							<u-album
								singleSize="72"
								multipleMode="scaleToFill"
								singleMode="scaleToFill"
								multipleSize="72"
								rowCount="1"
								style="width: 145rpx;height: 145rpx;border: 1px solid #EFEFEF;background-color:#EFEFEF ;"
								:urls="item.showUrls == null ? [] : item.showUrls"
								maxCount="1"
							></u-album>
							<view style=" width: 75%;display: flex;    flex-direction: column;justify-content: space-between; align-items: flex-start;margin-left: 10rpx;">
								<span style="font-weight: 600;font-size: 28rpx;width: 100%;margin-bottom: 10rpx;">{{ item.materialName }}</span>
								<span style="font-size: 28rpx;color: #999999;margin-bottom: 10rpx;">{{ item.materialCategory }}</span>
								<span style="font-size: 29rpx;color: #999999;margin-bottom: 10rpx;margin-right: 20rpx;">{{ item.batch }}</span>
								<view style="display: flex;align-items: center;width: 100%;justify-content: flex-end;">
									<u-button type="primary" style="margin-right: 15rpx;width: 100rpx;height: 50rpx;" text="确定" @click="SelectChuKuShowPopup(item)"></u-button>
									<!-- 	<u-number-box style="margin-right: 15rpx;" v-model="value2" inputWidth="60"
											buttonSize="25"></u-number-box> -->
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<view class="panDianPagination">
					<uni-pagination
						@change="paginationChange"
						:show-icon="true"
						:pageSize="listDictionaryParams.pageSize"
						:current="listDictionaryParams.pageNum"
						:total="total"
						title="标题文字"
					/>
				</view>
			</view>
		</u-popup>
<!-- 侧边栏 -->
		<u-popup :show="wuzhiCheBian" mode="left" :customStyle="{ width: '70vw' }" :safeAreaInsetBottom="true" @close="offPop()">
			<view style="height: 50px;margin-bottom: 10rpx;"></view>
			<u-search placeholder="请输入仓库名称搜索" v-model="keyword" :clearabled="false" :showAction="false"></u-search>
			<scroll-view scroll-y="true" style="height: 95vh;" scroll-with-animation="true">
				<view class="status_bar"></view>
				<uni-list>
					<uni-list-item v-for="(item, index) in titlelist" :title="`${index + 1}.${item.name}`" :clickable="true" @click="xuanZheChangKu(item)"></uni-list-item>
				</uni-list>
				<view style="height: 50px;"></view>
			</scroll-view>
		</u-popup>
		<!-- 	<u-popup mode="bottom" :round="10" :show="SelectPanDianNumShow" @close="SelectPanDianclose"
			@open="SelectPanDianopen">
			<view style="display: flex; width: 100vw;height: 900rpx; margin-top: 15rpx;padding-bottom: 15rpx; align-items: center;
				justify-content: space-between;padding: 12rpx;">
				<view style="width: 175rpx;height: 175rpx;border: 1px solid #EFEFEF;">
					<image style="width: 100%;height: 100%;" src="../../../../static/mine/edit.png"></image>
				</view>
				<view
					style=" width: 75%;display: flex;flex-direction: column;justify-content: space-between; align-items: flex-start;margin-left: 10rpx;">
					<span
						style="font-weight: 600;font-size: 28rpx;width: 100%;margin-bottom: 10rpx;">{{operationWZ.materialName}}</span>
					<span
						style="font-size: 28rpx;color: #999999;margin-bottom: 10rpx;">{{operationWZ.materialCategory}}</span>
					<span
						style="font-size: 29rpx;color: #999999;margin-bottom: 10rpx;margin-right: 20rpx;">{{operationWZ.batch}}</span>
					<view style="display: flex;align-items: center;width: 100%;justify-content: flex-end;">

					</view>

				</view>

			</view>
			<view class="confirmBtn">
				<u-button text="确定" @click="SelectRuKuNumConfirm(operationWZ)"></u-button>
				<u-button text="取消" @click="SelectRuKuNumCancel"></u-button>
			</view>
		</u-popup> -->

		<view class="pandianCenter">
			<u-popup mode="center" :round="10" :show="pandianShow" @close="pandianclose" @open="pandianShowopen">
				<view class="pandianPopupSelect" style="display: flex;flex-direction: column; width: 100vw;height: 700rpx;justify-content: space-around;align-items: center;">
					<view class="" style="display: flex;  margin-top: 15rpx;padding-bottom: 15rpx; align-items: center;justify-content: space-between;padding: 12rpx;">
						<u-album
							singleSize="72"
							multipleMode="scaleToFill"
							singleMode="scaleToFill"
							multipleSize="72"
							rowCount="1"
							style="width: 145rpx;height: 145rpx;border: 1px solid #EFEFEF;background-color:#EFEFEF ;"
							:urls="operationWZ.showUrls == null ? [] : operationWZ.showUrls"
							maxCount="1"
						></u-album>
						<view style=" width: 75%;display: flex;flex-direction: column;justify-content: space-between; align-items: flex-start;margin-left: 10rpx;">
							<span style="font-weight: 600;font-size: 28rpx;width: 100%;margin-bottom: 10rpx;">{{ operationWZ.materialName }}</span>
							<span style="font-size: 28rpx;margin-bottom: 10rpx;">库存数量：{{ operationWZ.num }}</span>
							<view style="display: flex;">
								<span style="margin-right: 20rpx;">盘点数量</span>
								<u-number-box :disabled="isDisable" style="margin-right: 15rpx;" v-model="SelectWzNum" inputWidth="60" buttonSize="25"></u-number-box>
							</view>
						</view>
					</view>
					<view class="" style="display: flex;width: 90%">
						<span style="margin-right: 20rpx;">数量异常说明：</span>
						<u--textarea v-model="panDianWzParams.remark" placeholder="请输入内容"></u--textarea>
					</view>

					<view style="display: flex;">
						<u-button text="确定" type="primary" style="margin-right: 30rpx;width: 130rpx;" @click="SelectPanDianNumConfirm(operationWZ)"></u-button>
						<u-button text="取消" style="background-color: #B4B4B4;width: 130rpx;color: #fff;" @click="SelectPanDianNumCancel"></u-button>
					</view>
				</view>
			</u-popup>
		</view>

		<u-notify ref="uNotify" message=""></u-notify>
	</view>
</template>

<script>
//查询库存物资
import { listStock, getStock } from '@/api/indexpage/yjWz/kuCun.js';
//查询仓库列表
import { listWarehouse, listCategory } from '@/api/indexpage/yjWz/warehouse.js';
import { addOrUpdateCheck } from '@/api/indexpage/yjWz/panDian.js';
import { getUserProfile } from '@/api/indexpage/user.js';

export default {
	data() {
		return {
			//使用公共变量存储单号
			ruKuDanHao: '',
			panDianDialogshow: false,
			listDictionaryParams: {
				pageNum: 1,
				pageSize: 5,
				materialName: '',
				categoryId: ''
			},
			wuzhiCheBian: false,
			changkuId: '',
			kucunlist: [],
			tabsList: [],
			titlelist: [],
			keyword: '',
			SelectPanDianNumShow: false,
			operationWZ: {},
			SelectWzNum: '1', //出库说明 步进器
			panDianWzParams: {
				pdDelList: [],
				remark: '',
				houseId: '',
				checkId: ''
			},
			weiPanDianList: [],
			pandianShow: false,
			isShowLog: true,
			// 是否启用步进器
			isDisable: false,
			total: 0
		};
	},
	watch: {
		keyword(newdata, olddata) {
			let that = this;
			//防抖函数
			clearTimeout(that.timer);
			that.timer = setTimeout(function() {
				if (newdata === '') {
					//发请求 请求全部
					listWarehouse().then(res => {
						that.titlelist = res.rows;
					});
				} else {
					//发请求 请求车队名字
				}
			}, 600);
		}
	},
	methods: {
		//弹出侧边栏
		popCheBian() {
			//弹出侧边栏
			this.wuzhiCheBian = true;
			//发场库请求
			listWarehouse().then(res => {
				this.titlelist = res.rows;
			});
		},
		xuanZheChangKu(item) {
			console.log("item,",item)
			//给入库接口入参
			// this.addWzParams.deptId = item.deptId;
			// this.addWzParams.houseId = item.id;
			// 部门名称
			this.deptName = item.deptName;
			// 获取仓库名称
			this.name = item.name;
			this.houseId=item.id;
			//获取仓库名称和ID
			this.changku = item.name;
			this.changkuId = item.id;
			this.getKuCun();
			//弹出侧边栏
			this.wuzhiCheBian = false;
			//清空搜索
			this.keyword = '';
		},
		offPop() {
			//弹出侧边栏
			this.wuzhiCheBian = false;
			//清空搜索
			this.keyword = '';
		},
		SelectPanDianNumCancel() {
			this.pandianShow = false;
		},
		paginationChange(e) {
			this.listDictionaryParams.pageNum = e.current;
			this.getKuCun();
			console.log(e, 'eeeee');
		},
		onLoad(options) {
			//获取场库id和名字
			let name = options.ckName;
			let id = options.ckId;
			this.panDianWzParams.houseId = id;
			this.changku = name;
			this.changkuId = id;

			this.getListCategory();
			this.getUserProfileList();
		},
		// 获取用户信息
		getUserProfileList() {
			getUserProfile().then(res => {
				this.userInfo = res.data.user;
				this.panDianWzParams.userId = this.userInfo.userId;
				this.panDianWzParams.userName = this.userInfo.userName;
			});
		},
		SelectPanDianNumConfirm(item) {
			this.panDianWzParams.deptId = item.deptId;
			item.checkId = '';
			item.text2 = item.id;
			// item.id=null;

			if (Number(this.SelectWzNum) != Number(item.num) && this.panDianWzParams.remark.trim() == '') {
				this.$refs.uNotify.show({
					top: 10,
					type: 'error',
					color: '#fff',
					bgColor: '#f9ae3d',
					message: '请填写数量异常说明',
					duration: 1000 * 1,
					fontSize: 20,
					safeAreaInsetTop: true
				});
				// this.isShowLog = true;
				this.pandianShow = true;
			} else {
				item.realNum = this.SelectWzNum;

				this.panDianWzParams.pdDelList.push(item);
				this.weiPanDianList = this.weiPanDianList.filter(e => e.id != item.id);
				this.pandianShow = false;
				console.log(this.panDianWzParams.pdDelList, 'pdDelListpdDelListpdDelList');
			}
		},
		pandianShowopen() {},
		openPanDianNum(item, isDisable) {
			this.isDisable = isDisable;
			this.operationWZ = item;
			console.log('00000');
			this.pandianShow = true;
		},
		pandianclose() {
			this.pandianShow = false;
		},
		openSelect() {
			this.panDianDialogshow = true;
		},
		getKuCun() {
			//携带场库id
			this.listDictionaryParams.houseId = this.changkuId;
			listStock(this.listDictionaryParams).then(res => {
				this.kucunlist = res.rows;
				this.total = res.total;
			});
		},
		tabsClick(item) {
			this.listDictionaryParams.pageNum = 1;

			this.listDictionaryParams.categoryId = item.id;
			this.getKuCun();
		},
		SelectChuKuShowPopup(item) {
			console.log(item, 'weiPanDianListweiPanDianList');
			// this.SelectPanDianNumShow = true;

			// operationWZ.realNum = this.SelectWzNum;
			// operationWZ.status = "1";
			// operationWZ.type = "1";

			this.weiPanDianList.push(item);
		},
		zancun() {
			if (this.weiPanDianList.length == '0' && this.panDianWzParams.pdDelList.length == '0') {
				this.$modal.msg('请选择物资');
				return;
			}
			this.panDianWzParams.status = '0';
			//暂存单号
			this.panDianWzParams.checkId = this.danhao();
			this.ruKuDanHao = this.panDianWzParams.checkId;
			//暂存已盘点未盘点
			this.panDianWzParams.pdDelList = [...this.panDianWzParams.pdDelList, ...this.weiPanDianList];
			//给每个都加单号
			this.panDianWzParams.pdDelList.map(item => {
				item.checkId = this.ruKuDanHao;
			});

			addOrUpdateCheck(this.panDianWzParams).then(res => {
				this.panDianWzParams = {
					pdDelList: [],
					remark: '',
					houseId: '',
					checkId: ''
				};
				this.$modal.msg('暂存完成');
			});
		},
		pandianOver() {
			if (this.weiPanDianList.length == '0' && this.panDianWzParams.pdDelList.length == '0') {
				this.$modal.msg('请选择物资');
				return;
			}
			if (this.weiPanDianList.length > 0) {
				this.$modal.confirm('完工非常规作业后，将不能开始或停工，您确定完工吗？').then(res => {
					if (res) {
						this.panDianWzParams.status = '1';
						//暂存单号
						this.panDianWzParams.checkId = this.danhao();
						this.ruKuDanHao = this.panDianWzParams.checkId;
						//给每个都加单号
						this.panDianWzParams.pdDelList.map(item => {
							item.checkId = this.ruKuDanHao;
						});

						addOrUpdateCheck(this.panDianWzParams).then(res => {
							this.panDianWzParams = {
								pdDelList: [],
								remark: '',
								houseId: '',
								checkId: ''
							};
							this.weiPanDianList = [];
							this.$modal.msg('盘库完成');
						});
					}
				});
			} else {
				this.panDianWzParams.status = '1';
				//暂存单号
				this.panDianWzParams.checkId = this.danhao();
				this.ruKuDanHao = this.panDianWzParams.checkId;
				//给每个都加单号
				this.panDianWzParams.pdDelList.map(item => {
					item.checkId = this.ruKuDanHao;
				});

				addOrUpdateCheck(this.panDianWzParams).then(res => {
					this.panDianWzParams = {
						pdDelList: [],
						remark: '',
						houseId: '',
						checkId: ''
					};
					this.weiPanDianList = [];
					this.$modal.msg('盘库完成');
				});
			}
		},
		// SelectRuKuNumConfirm(operationWZ) {
		// 	operationWZ.realNum = this.SelectWzNum;
		// 	operationWZ.status = "1";
		// 	operationWZ.type = "1";
		// 	operationWZ.houseId = this.chuKuitemDeptId;
		// 	this.weiPanDianList.push(operationWZ)
		// 	this.panDianWzParams.pdDelList.push();
		// 	this.panDianWzParams.djuserId = this.userInfo.userId;
		// 	this.panDianWzParams.djUserName = this.userInfo.userName;
		// 	this.panDianWzParams.status = "1";

		// 	this.SelectChuKuNumShow = false;
		// },
		getListCategory() {
			listCategory()
				.then(res => {
					this.tabsList = res.rows;
					//默认第一个
					this.listDictionaryParams.categoryId = res.rows[0].id;
					this.getKuCun();
				})
				.catch(error => {
					console.error(error);
				});
		},
		danhao() {
			const now = new Date();
			const formattedDate = `PD-${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}-${now
				.getDate()
				.toString()
				.padStart(2, '0')}-${now
				.getHours()
				.toString()
				.padStart(2, '0')}${now
				.getMinutes()
				.toString()
				.padStart(2, '0')}${now
				.getSeconds()
				.toString()
				.padStart(2, '0')}`;
			return formattedDate;
		},
		openpanDianDialog() {
			this.ChukuDialogshow = true;
		},
		closepanDianDialog() {
			this.panDianDialogshow = false;
		},

		SelectPanDianopen() {
			// console.log('open');
		},
		SelectPanDianclose() {
			this.SelectPanDianNumShow = false;
			// console.log('close');
		},
		panDianDialogOpened() {}
	}
};
</script>

<style lang="scss">
.bottomPopup {
	padding: 20px;
}

.pandianCenter {
	/deep/ .u-popup__content {
		background-color: rgba(255, 255, 255, 0);
		position: relative;
	}
}

.pandianPopupSelect {
	background-image: url('../../../../static/images/Yjplan/pandianSelect.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-color: rgba(255, 255, 255, 0);
	// opacity: 1;
}

page {
	/deep/ .u-collapse-item__content__text {
		padding: 12rpx 15rpx;
	}

	.paiban {
		background-color: #fff;
		border-radius: 12rpx;
		box-shadow: 0px 4rpx 12rpx 0px rgba(0, 37, 105, 0.1);
		padding: 20rpx;
		margin-bottom: 10rpx;

		.head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 4rpx solid #f0f1f5;
			padding-bottom: 13rpx;

			.headTime {
				font-weight: bolder;
				color: #454545;
				font-size: 30rpx;
			}

			.operate {
				display: flex;
				align-items: center;

				.opInfo {
					color: #8792df;
					background-color: #e6e9fd;
					padding: 0 15rpx;
					font-weight: 600;
					border-radius: 10rpx;
					margin-left: 20rpx;
					height: 55rpx;
					line-height: 55rpx;
				}
			}
		}

		.paibanInfo {
			margin-top: 5rpx;

			// overflow: scroll;
			// height: 90%;
			.bgWz {
				width: 288rpx;
				height: 96rpx;

				border-radius: 10rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}

			.textSize {
				font-size: 30rpx;
				font-weight: 550;
			}

			.imgwh {
				width: 68rpx;
				height: 68rpx;
			}

			.list {
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;

				.listName {
					font-weight: bolder;
					color: #454545;
					font-size: 30rpx;
					margin-right: 50rpx;
				}

				.status {
					color: #fff;
					background-color: #f5a233;
					padding: 0 15rpx;
					border-radius: 10rpx;
					margin-left: 20rpx;
					height: 42rpx;
					line-height: 42rpx;
					font-size: 26rpx !important;
				}
			}

			.listName {
				font-weight: bolder;
				color: #454545;
				font-size: 30rpx;
				margin-right: 50rpx;
			}
		}
	}
}
</style>
