<template>
	<view>
		<u-navbar bgColor="#ffffff" :placeholder="true" :autoBack="true" titleStyle="font-weight:600">
	
		</u-navbar>
		<!-- 自定义导航栏 -->
		<!-- <u-navbar bgColor="#ffffff" :placeholder="true" :autoBack="true" titleStyle="font-weight:600">
			<view slot="center" style="display: flex;align-items: center;" @click="popCheBian()">
				<span style="font-size: 32rpx; font-weight: 600;color: #333333;margin-right: 10rpx;">{{ changku }}</span>
				<image style="width: 32rpx; height: 32rpx;" src="../../../static/images/wuzhi/zhuanhuan.png"></image>
			</view>
		</u-navbar> -->
		<!-- 仓库管理 -->
		<view class="paibanBox">
			<view class="paiban">
				<!-- 头部 -->
				<view class="head">
					<view class="headTime">仓库管理</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;flex-wrap: wrap;align-items: center;justify-content: space-around;">
						<view class="bgWz" style="background:#F2FEFF ;" @click="goToPage(1)">
							<p class="textSize">仓库库存</p>
							<image class="imgwh" src="../../../static/images/wuzhi/kucun.png"></image>
						</view>
						<view class="bgWz" style="background: #FBF6F8 ;" @click="goToPage(10)">
							<p class="textSize">物资预警</p>
							<image class="imgwh" src="../../../static/images/wuzhi/kucunyujing.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 出入库 -->
		<view class="paibanBox">
			<view class="paiban">
				<!-- 头部 -->
				<view class="head"><view class="headTime">出入库</view></view>
				<!-- 卡片 -->
				<view class="paibanInfo">
					<view style="display: flex;flex-wrap: wrap;align-items: center;justify-content: space-around;">
						<view class="bgWz" style="margin-bottom: 30rpx;background: #F2F8FF;" @click="goToPage(2)">
							<p class="textSize">物资入库</p>
							<image class="imgwh" src="../../../static/images/wuzhi/ruku.png"></image>
						</view>
						<view class="bgWz" style="margin-bottom: 30rpx;background: #FDF7F0 ;" @click="goToPage(4)">
							<p class="textSize">物资出库</p>
							<image class="imgwh" src="../../../static/images/wuzhi/chuku.png"></image>
						</view>
						<view class="bgWz" style="background:#F2F9F7 ;margin-bottom: 30rpx;" @click="goToPage(5)">
							<p class="textSize">物资调拨</p>
							<image class="imgwh" src="../../../static/images/wuzhi/diaobo.png"></image>
						</view>
						<view class="bgWz" style="background:#FBF6F8 ;margin-bottom: 30rpx;" @click="goToPage(3)">
							<p class="textSize">物资盘点</p>
							<image class="imgwh" src="../../../static/images/wuzhi/pandian.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="paibanBox">
			<view class="paiban">
				<!-- 头部 -->
				<view class="head"><view class="headTime">出入库明细</view></view>
				<!-- 卡片 -->
				<view class="paibanInfo">
					<view style="display: flex;flex-wrap: wrap;align-items: center;justify-content: space-around;">
						<view class="bgWz" style="margin-bottom: 30rpx;background: #F2F8FF;" @click="goToPage(6)">
							<p class="textSize">入库明细</p>
							<image class="imgwh" src="../../../static/images/wuzhi/rukumingxi.png"></image>
						</view>
						<view class="bgWz" style="margin-bottom: 30rpx;background: #FDF7F0 ;" @click="goToPage(7)">
							<p class="textSize">出库明细</p>
							<image class="imgwh" src="../../../static/images/wuzhi/cukumingxi.png"></image>
						</view>
						<view class="bgWz" style="background:#F2F9F7 ;margin-bottom: 30rpx;" @click="goToPage(8)">
							<p class="textSize">调拨明细</p>
							<image class="imgwh" src="../../../static/images/wuzhi/diaobomingxi.png"></image>
						</view>
						<view class="bgWz" style="background:#FBF6F8 ;margin-bottom: 30rpx;" @click="goToPage(9)">
							<p class="textSize">盘点明细</p>
							<image class="imgwh" src="../../../static/images/wuzhi/pandianmingxi.png"></image>
						</view>
					</view>
				</view>
			</view>
		</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>
	</view>
</template>

<script>
import { listWarehouse } from '@/api/indexpage/yjWz/warehouse.js';
export default {
	data() {
		return {
			timer: '', //防抖函数
			keyword: '',
			changku: '仓库名称', // 仓库名称
			changkuId: '', //场库ID
			wuzhiCheBian: false, //物资侧边栏
			titlelist: [], //场库列表
			deptName: ''
		};
	},
	onLoad() {
		this.getChangKu();
	},
	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: {
		goToPage(bs) {
			if (bs === 1) {
				//仓库库存
				this.$tab.navigateTo(`/pages/indexpage/YJgoods/cangKuKuCun/cangKuKuCun?ckId=${this.changkuId}&ckName=${this.changku}`);
			} else if (bs === 2) {
				//物资入库
				this.$tab.navigateTo(`/pages/indexpage/YJgoods/wzRuKu/wzRuKu?ckId=${this.changkuId}&ckName=${this.changku}&deptName=${this.deptName}`);
			} else if (bs === 3) {
				//物资盘点
				this.$tab.navigateTo(`/pages/indexpage/YJgoods/wzPanDian/wzPanDian?ckId=${this.changkuId}&ckName=${this.changku}`);
			} else if (bs === 4) {
				//物资出库
				this.$tab.navigateTo(`/pages/indexpage/YJgoods/wzChuKu/wzChuKu?ckId=${this.changkuId}&ckName=${this.changku}&deptName=${this.deptName}`);
			} else if (bs === 5) {
				//物资调拨
				this.$tab.navigateTo(`/pages/indexpage/YJgoods/wzDiaoBo/wzDiaoBo?ckId=${this.changkuId}&ckName=${this.changku}&deptName=${this.deptName}`);
			} else if (bs === 6) {
				//入库明细
				this.$tab.navigateTo(`/pages/indexpage/YJgoods/rkMingXi/rkMingXi?ckId=${this.changkuId}&ckName=${this.changku}`);
			} else if (bs === 7) {
				//出库明细
				this.$tab.navigateTo(`/pages/indexpage/YJgoods/ckMingXi/ckMingXi?ckId=${this.changkuId}&ckName=${this.changku}`);
			} else if (bs === 8) {
				//调拨明细
				this.$tab.navigateTo(`/pages/indexpage/YJgoods/diaoboMingXi/diaoboMingXi?ckId=${this.changkuId}&ckName=${this.changku}`);
			} else if (bs === 9) {
				//盘点明细
				this.$tab.navigateTo(`/pages/indexpage/YJgoods/pandianMingXi/pandianMingXi?ckId=${this.changkuId}&ckName=${this.changku}`);
			} else if (bs === 10) {
				this.$tab.navigateTo(`/pages/indexpage/YJgoods/wzYvJing/wzYvJing?ckId=${this.changkuId}&ckName=${this.changku}`);
			}
		},
		getChangKu() {
			//发场库请求
			listWarehouse().then(res => {
				this.titlelist = res.rows;

				//选择第一个
				this.changku = this.titlelist[0].name;
				this.changkuId = this.titlelist[0].id;
				this.deptName = this.titlelist[0].deptName;
			});
		},
		//弹出侧边栏
		popCheBian() {
			//弹出侧边栏
			this.wuzhiCheBian = true;
		},
		offPop() {
			//弹出侧边栏
			this.wuzhiCheBian = false;
			//清空搜索
			this.keyword = '';
		},
		xuanZheChangKu(item) {
			//获取仓库名称和ID
			this.changku = item.name;
			this.changkuId = item.id;
			this.deptName = item.deptName;
			//弹出侧边栏
			this.wuzhiCheBian = false;
			//清空搜索
			this.keyword = '';
		}
	}
};
</script>

<style lang="scss">
// 日历日期
/deep/.uni-calendar__header-text {
	font-weight: bolder;
	color: #454545;
	font-size: 30rpx;
}

// 选中日期
/deep/.uni-calendar-item--isDay {
	background-color: #8792df !important;
	border-radius: 15rpx;
}

page {
	.paibanBox {
		width: 100vw;
		padding: 20rpx 30rpx;

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

			.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 {
				padding: 15rpx 0;
				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>
