<template>
	<view>
		<u-navbar bgColor="#ffffff" :placeholder="true" :autoBack="true" titleStyle="font-weight:600">
			<view slot="center" style="display: flex;align-items: center;flex-direction: column;">
				<view>
					<span style="font-size: 30rpx; font-weight: 600;color: #333333;margin-right: 10rpx;">{{ changku }}</span>
					<!-- <image style="width: 32rpx; height: 32rpx;" src="../../../static/images/wuzhi/zhuanhuan.png"></image> -->
				</view>
				<span style="font-size: 20rpx; font-weight: 600;color: #b1b1b1;margin-right: 10rpx;">物资预警</span>
			</view>
			<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>
		<!-- 预警信息 -->
		<!-- 分类 -->
		<view style="background-color: #fff;">
			<!-- 头部 -->
			<view class="sortHead">
				<image src="../../../../static/images/Yjplan/sort.png" style="width: 36rpx;height: 36rpx;margin-right: 22rpx;"></image>
				<span class="sortTitle">预警统计</span>
			</view>
			<!-- 卡片 -->
			<view class="sortCard">
				<view class="zonghe">
					<view class="title">库存预警(个)</view>
					<view class="count">{{ kucunyuJing.length }}</view>
				</view>
				<view class="zhuanxiang">
					<view class="title">到期时间预警(个)</view>
					<view class="count">{{ timeyuJing.length }}</view>
				</view>
			</view>
		</view>
		<!-- 库存预警 -->
		<scroll-view scroll-y="true" style="height: calc(100vh - 180px);" enableBackToTop="true">
			<uni-list>
				<uni-list-item v-for="(item, index) in kucunyuJing" :key="index" clickable>
					<view slot="header" style="display: flex;">
						<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>
					<view slot="body" style="display: flex;flex-direction: column;margin-left: 12rpx;flex: 1;">
						<span style="font-size: 28rpx;margin-bottom: 5rpx;">{{ item.materialName }}({{ item.materialUnit }})</span>
						<span style="font-size: 22rpx;margin-bottom: 5rpx;">{{ item.materialSpecification == null ? '暂无规格' : item.materialSpecification }}</span>
						<view style="margin-bottom: 5rpx;">
							<span style="font-size: 25rpx;margin-right: 15rpx;">标准数量:{{ item.num }}</span>
							<span style="font-size: 25rpx;color: red;">实际数量:{{ item.realnum }}</span>
						</view>
					</view>
					<view slot="footer" style="display: flex; flex-direction: column;  align-items: center;  justify-content: space-between;">
						<view class=""><uni-badge text="库存预警"></uni-badge></view>
						<span style="font-size: 24rpx;margin-top: 15rpx;">{{ item.materialCategory }}</span>
					</view>
				</uni-list-item>
				<!-- 时间预警 -->
				<uni-list-item v-for="(item, index) in timeyuJing" :key="index" clickable title="列表右侧显示角标">
					<view slot="header" style="display: flex;">
						<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>
					<view slot="body" style="display: flex;flex-direction: column;margin-left: 12rpx;flex: 1;">
						<span style="font-size: 28rpx;margin-bottom: 5rpx;">{{ item.materialName }}({{ item.materialUnit }})</span>
						<span style="font-size: 22rpx;margin-bottom: 5rpx;">{{ item.materialSpecification == null ? '暂无规格' : item.materialSpecification }}</span>
						<view style="margin-bottom: 5rpx;">
							<span style="font-size: 25rpx;margin-right: 15rpx;color: red;">有效期至:{{ item.yxTime }}</span>
						</view>
					</view>
					<view slot="footer" style="display: flex; flex-direction: column;  align-items: center;  justify-content: space-between;">
						<view class=""><uni-badge type="warning" text="到期时间预警"></uni-badge></view>
						<span style="font-size: 24rpx;margin-top: 15rpx;">{{ item.materialCategory }}</span>
					</view>
				</uni-list-item>
			</uni-list>
			<uni-list v-if="timeyuJing.length == '0' && kucunyuJing.length == '0'"><uni-list-item title="本仓库暂无预警信息"></uni-list-item></uni-list>
		</scroll-view>

		<!-- 侧边栏弹窗 -->
		<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 :show="wuzhiXiangQing" mode="bottom" :round="15" :customStyle="{ width: '100vw' }" :safeAreaInsetBottom="true" @close="offPopXiangQing()">
			<scroll-view scroll-y="true" style="height: 36vh;display: flex;margin-left: 30rpx;" scroll-with-animation="true">
				<view
					style="display: flex;margin-bottom: 20rpx;width: 100%; margin-top: 30rpx;padding-bottom: 15rpx; align-items: center;
    justify-content: space-between;"
				>
					<view style="width: 165rpx;height: 165rpx;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;">
						<span style="font-weight: 600;font-size: 35rpx;width: 100%;margin-bottom: 10rpx;">{{ kucunSigle.materialName }}</span>
						<span style="font-size: 28rpx;color: #999999;margin-bottom: 10rpx;">物资类型:{{ kucunSigle.materialCategory }}</span>
						<view style="width: 100%;  display: flex;   justify-content: flex-start;align-items: center;">
							<view class="count">
								<view class="basicCount" v-if="kucunSigle.text4">
									<image src="../../../../static/images/zhuye/basic.png" alt=""></image>
									标准数量：{{ kucunSigle.text4 }} {{ kucunSigle.materialUnit }}
								</view>
								<view class="currentCount">
									<image src="../../../../static/images/zhuye/current.png" alt=""></image>
									当前数量:{{ kucunSigle.num }} {{ kucunSigle.materialUnit }}
								</view>
							</view>
						</view>
					</view>
				</view>
				<view style="    display: flex;flex-direction: column;align-items: flex-start;">
					<span style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
						入库批次:
						<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.batch }}</p>
					</span>
					<span v-if="kucunSigle.materialSpecification" style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
						主要规格:
						<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.materialSpecification }}</p>
					</span>
					<span style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
						所属部门:
						<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.unitName }}</p>
					</span>
					<span style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
						所属库房:
						<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.houseName }}</p>
					</span>
					<span v-if="kucunSigle.yxTime" style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 20rpx;">
						有效期至:
						<p style="margin-left: 25rpx;color: #7D858E;">{{ kucunSigle.yxTime }}</p>
					</span>
				</view>
			</scroll-view>
		</u-popup>
	</view>
</template>

<script>
//查询仓库列表
import { listWarehouse, listCategory, getCategory, listYj } from '@/api/indexpage/yjWz/warehouse.js';
//查询库存物资
import { listStock, getStock } from '@/api/indexpage/yjWz/kuCun.js';
export default {
	data() {
		return {
			//侧边栏
			menuScrollIntoView: '',
			cateScrollTop: 0,
			current: 0,
			//侧边栏
			timer: '', //防抖函数
			keyword: '',
			changku: '仓库名称', // 仓库名称
			changkuId: '', //仓库ID
			wuzhiCheBian: false,
			titlelist: [], //场库列表
			// 物资列表
			wuzhiXiangQing: false,
			kucunLeftMenu: [],
			kucunyuJing: [],
			timeyuJing: [],
			kucunSigle: {},
			listDictionaryParams: {
				houseId: '',
				categoryId: ''
			}
		};
	},
	onLoad(options) {
		//获取场库id和名字
		let name = options.ckName;
		let id = options.ckId;
		this.changku = name;
		this.changkuId = id;
		this.getChangKu();
		this.getlistYj();
	},
	watch: {
		keyword(newdata, olddata) {
			let that = this;
			//防抖函数
			clearTimeout(that.timer);
			that.timer = setTimeout(function() {
				if (newdata === '') {
					//发场库请求
					listWarehouse().then(res => {
						that.titlelist = res.rows;
					});
				} else {
					//发场库请求
					listWarehouse({
						name: newdata
					}).then(res => {
						that.titlelist = res.rows;
					});
				}
			}, 600);
		}
	},
	methods: {
		//物资详情
		wuZhiXiangQing(item) {
			//显示弹窗
			this.wuzhiXiangQing = true;
			this.getStockById(item.id);
			//传入弹窗内容
		},
		offPopXiangQing() {
			this.wuzhiXiangQing = false;
		},

		getlistYj() {
			listYj(this.changkuId).then(res => {
				//时间预警
				this.timeyuJing = res.data[1];
				//库存预警
				this.kucunyuJing = res.data[0];
				// this.kucunlist = res.rows;
			});
		},
		getStockById(id) {
			getStock(id).then(res => {
				this.kucunSigle = res.data;
			});
		},

		getChangKu() {
			//发场库请求
			listWarehouse().then(res => {
				this.titlelist = res.rows;
			});
		},
		//弹出侧边栏
		popCheBian() {
			//弹出侧边栏
			this.wuzhiCheBian = true;
		},
		offPop() {
			//弹出侧边栏
			this.wuzhiCheBian = false;
			//清空搜索
			this.keyword = '';
		},
		xuanZheChangKu(item) {
			//获取仓库名称和ID
			this.changku = item.name;
			this.changkuId = item.id;
			this.getlistYj();
			//弹出侧边栏
			this.wuzhiCheBian = false;
			//清空搜索
			this.keyword = '';
		}
	}
};
</script>

<style lang="scss" scoped>
.sortHead {
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 36rpx 30rpx;

	.sortTitle {
		font-family: Noto Sans S Chinese;
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 40rpx;
	}
}

.sortCard {
	padding: 0 30rpx;
	padding-bottom: 30rpx;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20rpx;

	.zonghe {
		width: 336rpx;
		height: 140rpx;
		background: url('../../../../static/images/Yjplan/zonghe.png') no-repeat;
		background-size: 100% 100%;
		margin-right: 19rpx;
	}

	.zhuanxiang {
		width: 336rpx;
		height: 140rpx;
		background: url('../../../../static/images/Yjplan/qita.png') no-repeat;
		background-size: 100% 100%;
	}

	.title {
		font-family: Noto Sans S Chinese;
		font-weight: 600;
		font-size: 30rpx;
		color: #4d4d4d;
		line-height: 40rpx;
		padding: 18rpx 30rpx;
	}

	.count {
		font-family: DINPro;
		font-weight: 500;
		font-size: 40rpx;
		color: #353535;
		line-height: 40rpx;
		padding: 0 40rpx;
	}
}
.count {
	display: flex;
	font-size: 26rpx;
	font-family: Noto Sans S Chinese;
	font-weight: normal;
	color: #999999;
}

.basicCount {
	font-size: 20rpx;
	font-family: Noto Sans S Chinese;
	font-weight: normal;
	color: #0098df;
	// width: 200rpx;
	// height: 40rpx;
	background: #e8f8ff;
	border: 1px solid #0098df;
	border-radius: 4rpx;
	margin-right: 10rpx;
	padding: 6rpx 10rpx;
	display: flex;
	align-items: center;

	image {
		height: 22rpx;
		width: 20rpx;
	}
}

.currentCount {
	font-size: 20rpx;
	font-family: Noto Sans S Chinese;
	font-weight: normal;
	color: #ffa132;
	// width: 200rpx;
	// height: 40rpx;
	background: #fff9f1;
	border: 1px solid #ffa132;
	border-radius: 4rpx;
	padding: 6rpx 10rpx;
	display: flex;
	align-items: center;

	image {
		height: 22rpx;
		width: 20rpx;
	}
}

.content {
	// flex: 1;
	// overflow: hidden;
	// width: 100%;

	display: flex;

	.menus {
		width: 190rpx;
		// height: 100vh;
		// overflow: hidden;
		background-color: #f7f7f7;

		.wrapper {
			width: 100%;
			height: 100%;

			.menu {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				padding: 30rpx 20rpx;
				font-size: 26rpx;
				color: black;
				position: relative;

				&:nth-last-child(1) {
					margin-bottom: 130rpx;
				}

				&.current {
					border-left: 3px solid #52a3ff;
					background-color: #ffffff;
					color: #52a3ff;
					font-weight: 600;
					width: 195rpx;
				}
			}
		}
	}
}

.goods {
	flex: 1;
	height: calc(100vh - 50px);
	overflow: hidden;
	background-color: #ffffff;

	.wrapper {
		width: 100%;
		height: 100%;
		padding: 10rpx 10rpx;

		.ads {
			height: calc(300 / 550 * 510rpx);

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}

		.list {
			width: 100%;

			padding-bottom: 130rpx;
		}
	}
}
</style>
