<template>
	<view>
		<!-- 自定义导航栏 -->
		<u-navbar bgColor="#ffffff" :placeholder="true" :autoBack="true" titleStyle="font-weight:600">
			<!-- @click="popCheBian()" -->
			<view slot="center" style="display: flex;align-items: center;">
				<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">调出仓库: {{ changku }}</view>
				</view>
				<!-- 卡片 -->
				<view class="paibanInfo">
					<view style="position: relative;">
						<image style="width: 132rpx; height: 132rpx;position: absolute;top: 2rpx;right: 15rpx;" src="../../../../static/images/wuzhi/diaobotupian.png"></image>
						<span style="font-weight: 600;font-size: 31rpx;display: flex;margin-bottom: 30rpx;">
							部门名称:
							<p style="margin-left: 25rpx;">{{ deptName }}</p>
						</span>
						<span style="font-weight: 600;font-size: 31rpx;margin-bottom: 20rpx;">
							调拨说明:
							<u--textarea autoHeight style="margin-top: 30rpx;" v-model="diaoBoexplain" placeholder="请输入调拨说明......"></u--textarea>
						</span>
						<span style="font-weight: 600;font-size: 31rpx;display: flex;margin-top: 30rpx;color: red;" @click="popCheBian()">
							调入仓库:
							<p style="margin-left: 25rpx;font-weight: 600;">{{ outchangku == '' ? '点击选择调入仓库' : outchangku }}</p>
						</span>
						<span v-if="ruKuDanHao !== ''" style="font-weight: 600;font-size: 31rpx;display: flex;margin-top: 10rpx;">
							调拨批次:
							<p style="margin-left: 25rpx;">{{ ruKuDanHao }}</p>
						</span>
					</view>
				</view>
			</view>
		</view>

		<!-- <view style="display: flex;align-items: center; justify-content: space-between;padding: 0rpx 30rpx;">
			<view style="display: flex;align-items: center;">
				<image style="width: 56rpx; height: 56rpx;" src="../../../../static/images/wuzhi/rukuliebiao.png"></image>
				<span style="font-weight: 600;font-size: 31rpx;margin-left: 25rpx;">调拨列表</span>
			</view>
			<u-button style="width: 160rpx;margin: 0rpx;" shape="circle" type="primary" size="mini" icon="plus" :plain="true" text="" @click="openRuKuDialog">物资调拨</u-button>
		</view> -->
		<!-- 物资调拨列表 -->
		<view class="paibanBox">
			<view class="paiban" style="padding:0rpx ;">
				<view class="head" style="background:  #4679FE;border-radius:20rpx 20rpx 0rpx 0rpx;height: 80rpx;">
					<view style="display: flex;align-items: center;margin-left: 20rpx;margin-top: 10rpx;">
						<image style="width: 56rpx; height: 56rpx;" src="../../../../static/images/wuzhi/rukuliebiao.png"></image>
						<span style="font-weight: 600;font-size: 33rpx;margin-left: 25rpx;color: #FFFFFF;">调出物资列表</span>
					</view>
					<u-button
						style="width: 160rpx;margin-right: 20rpx;margin-top: 10rpx;"
						shape="circle"
						type="primary"
						size="mini"
						icon="plus"
						:plain="true"
						text=""
						@click="openRuKuDialog"
					>
						调拨物资
					</u-button>
				</view>
				<!-- 头部 -->
				<!-- <view class="head" style="background:  #4679FE;border-radius:20rpx 20rpx 0rpx 0rpx;height: 80rpx;">
					<view class="headTime" style="color: #FFFFFF;text-align: center;margin-left: 18rpx;font-size: 33rpx;">调拨物资</view>
				</view> -->
				<scroll-view scroll-y="true" style="height: 770rpx;" 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, index) in diaoBoWzParams.moveDelList"
						:key="index"
					>
						<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;">
							<view style="display: flex;justify-content: space-between;width: 100%;">
								<span style="font-weight: 600;font-size: 28rpx;width: 100%;margin-bottom: 10rpx;">{{ item.materialName }} ({{ item.materialUnit }})</span>
								<u-icon name="trash-fill" @click="delWuzhi(index)" color="#d64964" size="22"></u-icon>
							</view>

							<span style="font-size: 24rpx;color: #999999;margin-bottom: 10rpx;">{{ item.materialCategory }}</span>
							<span style="font-size: 24rpx;color: #999999;margin-bottom: 10rpx;margin-right: 20rpx;">{{ item.batch }}</span>
							<!-- <span
								style="font-size: 24rpx;color: #999999;margin-bottom: 10rpx;margin-right: 20rpx;">{{ item.inOutDbId }}</span> -->
							<view style="display: flex;align-items: center;width: 100%;justify-content: space-between;">
								<span style="font-size: 24rpx;color: #0c0c0c;margin-bottom: 10rpx;margin-right: 20rpx;">
									{{ item.materialSpecification == null ? '暂无规格' : item.materialSpecification }}
								</span>
								<u-number-box style="margin-right: 15rpx;" v-model="item.realNum" inputWidth="60" buttonSize="25"></u-number-box>
							</view>
						</view>
					</view>
				</scroll-view>
				<!-- 卡片 -->
			</view>
		</view>

		<view class="paibanBox">
			<!-- 头部 -->
			<view
				class="head"
				style="background: rgb(70, 121, 254);color: rgb(255, 255, 255); margin-left: 18rpx; font-size: 34rpx; text-align: center; border-radius: 36rpx; height: 81rpx;display: flex; flex-direction: column;  align-items: center; justify-content: center;"
				@click="rukuSumbit"
			>
				调拨
			</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>

		<!-- 物资调拨下弹框 -->
		<u-popup :show="diaoBoDialogshow" :round="10" mode="bottom" @close="closeRuKuDialog" @open="RuKuDialogOpened">
			<view class="bottomPopup" style="height: 85vh">
				<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: 65vh;" 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: 26rpx;width: 100%;margin-bottom: 10rpx;">{{ item.materialName }} ({{ item.materialUnit }})</span>
								<span style="font-size: 24rpx;color: #999999;margin-bottom: 10rpx;">库存数:{{ item.num }} {{ item.materialUnit }}</span>
								<span style="font-size: 24rpx;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="SelectdiaoBoShowPopup(item)"></u-button>
								</view> -->
								<view style="display: flex;align-items: center;width: 100%;justify-content: space-between;">
									<span style="font-size: 24rpx;color: #0c0c0c;margin-bottom: 10rpx;margin-right: 20rpx;">
										{{ item.materialSpecification == null ? '暂无规格' : item.materialSpecification }}
									</span>
									<u-button type="primary" size="mini" style="margin-right: 15rpx;width: 100rpx;" text="选择" @click="SelectdiaoBoShowPopup(item)"></u-button>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="RuKuPagination">
					<uni-pagination
						@change="paginationChange"
						:show-icon="true"
						:pageSize="listDictionaryParams.pageSize"
						:current="listDictionaryParams.pageNum"
						:total="total"
						title="标题文字"
					/>
				</view>
			</view>
		</u-popup>
		<u-popup overlayOpacit="1" style="width: 300rpx;" mode="center" :round="10" :show="SelectdiaoBoNumShow" @close="SelectRuKuclose" @open="SelectRuKuopen">
			<view
				style="display: flex; width: 90vw;height: 260rpx; 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;">
					<view style="display: flex;justify-content: space-between;width: 100%;">
						<span style="font-weight: 600;font-size: 26rpx;width: 100%;margin-bottom: 10rpx;">{{ operationWZ.materialName }} ({{ operationWZ.materialUnit }})</span>
					</view>
					<span style="font-size: 24rpx;font-weight: 600;color: #999999;margin-bottom: 10rpx;">{{ operationWZ.materialCategory }}</span>
					<view style="display: flex;align-operationWZs: center;width: 100%;justify-content: space-between;">
						<span style="font-size: 24rpx;color: #0c0c0c;margin-bottom: 10rpx;margin-right: 20rpx;">
							{{ operationWZ.materialSpecification == null ? '暂无规格' : operationWZ.materialSpecification }}
						</span>
					</view>
					<view style="display: flex;align-items: center;width: 100%;">
						<u-number-box style="margin-right: 15rpx;" v-model="SelectWzNum" inputWidth="60" buttonSize="25"></u-number-box>
					</view>
				</view>
			</view>
			<view class="confirmBtn">
				<u-button style="width: 100rpx;height: 60rpx;" type="primary" text="暂存" @click="SelectRuKuNumConfirm(operationWZ)"></u-button>
				<!-- <u-button text="取消" @click="SelectRuKuNumCancel"></u-button> -->
			</view>
		</u-popup>
		<!-- <u-popup mode="center" :round="10" :closeOnClickOverlay="false" :show="SelectdiaoBoNumShow"
			@close="SelectRuKuclose" @open="SelectRuKuopen">
			<view class="pandianPopupSelect"
				style="display: flex; width: 90vw;height: 350rpx;padding-bottom: 15rpx; align-items: center;padding: 12rpx;flex-direction: column;">
				<view style="display: flex;margin-bottom: 50rpx;width: 100%;align-items: center;">
					<view style="width: 145rpx;height: 145rpx;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 }}
							({{ operationWZ.materialUnit }})</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%;">
							<u-number-box style="margin-right: 15rpx;" v-model="SelectWzNum" inputWidth="60"
								buttonSize="25"></u-number-box>
						</view>
					</view>
				</view>

				<view class="confirmBtn">
					<u-button text="取消" size="mini" style="margin-right: 30rpx;width: 130rpx;"
						@click="SelectRuKuNumCancel"></u-button>
					<u-button type="primary" size="mini" style="margin-right: 30rpx;width: 130rpx;" text="确定"
						@click="SelectRuKuNumConfirm(operationWZ)"></u-button>
				</view>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
//查询仓库列表
import { listWarehouse, listCategory,listWarehouseAll } from '@/api/indexpage/yjWz/warehouse.js';
//查询库存物资
import { listStock, getStock } from '@/api/indexpage/yjWz/kuCun.js';
import { listDictionary, getCategory, addOrUpdateOutList } from '@/api/indexpage/yjWz/wzCuKu.js';
import { deptTreeSelect, addOrUpdateMoveList } from '@/api/indexpage/yjWz/diaoBo.js';

import { getUserProfile } from '@/api/indexpage/user.js';

export default {
	data() {
		return {
			total: 0,
			outchangkuId: '', //被调拨方
			outchangku: '', //被调拨方
			//使用公共变量存储单号
			ruKuDanHao: '',
			diaoBoexplain: '', //物资调拨说明
			SelectWzNum: '1', //物资调拨说明 步进器
			timer: '', //防抖函数
			keyword: '',
			changku: '仓库名称', // 仓库名称
			changkuId: '', //仓库ID
			wuzhiCheBian: false, //物资侧边栏
			titlelist: [], //场库列表
			diaoBoDialogshow: false, //物资调拨弹框
			tabsList: [],
			kucunlist: [],
			SelectdiaoBoShow: false,
			SelectdiaoBoNumShow: false,
			listDictionaryParams: {
				pageNum: 1,
				pageSize: 5,
				materialName: '',
				categoryId: ''
			},
			operationWZ: {},
			AddWzList: [],
			userInfo: {},
			diaoBoitemDeptId: '',
			diaoBoWzParams: {
				moveDelList: [],
				inHouseId: '', //出
				outHouseId: '', //入
				waterNum: '' //单号
			},
			pickerShow: false,

			deptName: ''
		};
	},
	onLoad(options) {
		//获取场库id和名字
		let name = options.ckName;
		let id = options.ckId;
		this.changku = name;
		this.changkuId = id;
		this.deptName = options.deptName;

		this.getChangKu();
		this.getListCategory();
		this.getUserProfileList();
	},
	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: {
		delWuzhi(index) {
			this.diaoBoWzParams.moveDelList.splice(index, 1);
		},
		// 获取用户信息
		getUserProfileList() {
			getUserProfile().then(res => {
				this.userInfo = res.data.user;
			});
		},
		SelectdiaoBoShowPopup(item) {
			item.text2 = item.id;
			item.id = null;

			this.SelectdiaoBoNumShow = true;
			this.operationWZ = item;
			this.diaoBoDialogshow = false;
		},
		paginationChange(e) {
			this.listDictionaryParams.pageNum = e.current;
			this.getKuCun();
		},
		SelectRuKuopen() {
			// console.log('open');
		},
		SelectRuKuclose() {
			this.SelectdiaoBoNumShow = false;
			// console.log('close');
		},
		SelectRuKuNumCancel() {
			this.SelectdiaoBoNumShow = false;
			this.diaoBoDialogshow = true;
		},
		SelectRuKuNumConfirm(operationWZ) {
			//单号只获取一次
			if (this.diaoBoWzParams.moveDelList.length == '0') {
				//使用公共变量存储单号
				this.ruKuDanHao = this.danhao();
				operationWZ.inOutDbId = this.ruKuDanHao;
			} else {
				operationWZ.inOutDbId = this.ruKuDanHao;
			}
			operationWZ.realNum = this.SelectWzNum;
			operationWZ.status = '1';
			operationWZ.type = '1';
			operationWZ.outHouseId = this.changkuId;
			// operationWZ.inOutDbId = this.danhao();
			this.diaoBoWzParams.moveDelList.push(operationWZ);
			this.diaoBoWzParams.djuserId = this.userInfo.userId;
			this.diaoBoWzParams.djUserName = this.userInfo.userName;
			this.diaoBoWzParams.status = '1';
			// console.log(this.SelectWzNum, operationWZ, "operationWZoperationWZoperationWZ")

			this.SelectdiaoBoNumShow = false;
			this.diaoBoDialogshow = true;
		},
		getHouseListIn() {
			this.houseListIn = [];
			this.queryParamsHouse.deptId = this.form.inUnitId;
			listWarehouseAll(this.queryParamsHouse).then(res => {
				this.houseListIn = res.rows;
			});
		},
		rukuSumbit() {
			if (this.outchangkuId == '') {
				this.$modal.msg('请选择调入仓库');
				return;
			}
			if (this.diaoBoWzParams.moveDelList.length == '0') {
				this.$modal.msg('请选择调拨物资');
				return;
			}
			//调拨说明
			this.diaoBoWzParams.reason = this.diaoBoexplain;
			//调拨单号
			this.diaoBoWzParams.waterNum = this.ruKuDanHao;
			//调拨id
			this.diaoBoWzParams.outHouseId = this.changkuId;
			this.diaoBoWzParams.inHouseId = this.outchangkuId;
			//给物资循环调入id
			this.diaoBoWzParams.moveDelList.map(item => {
				item.inHouseId = this.outchangkuId;
			});
			addOrUpdateMoveList(this.diaoBoWzParams).then(res => {
				this.outchangku = '';
				this.outchangkuId = '';
				this.diaoBoexplain = '';
				this.diaoBoWzParams = {
					moveDelList: [],
					inHouseId: '', //出
					outHouseId: '', //入
					waterNum: '' //单号
				};
				this.$modal.msg('调拨成功');
				//重新获取库存
				this.getKuCun();
			});
		},

		danhao() {
			const now = new Date();
			const formattedDate = `DB-${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;
		},
		getListCategory() {
			listCategory()
				.then(res => {
					this.tabsList = res.rows;
					//默认第一个
					this.listDictionaryParams.categoryId = res.rows[0].id;
					//获取库存
					this.getKuCun();
				})
				.catch(error => {
					console.error(error);
				});
		},
		openRuKuDialog() {
			this.diaoBoDialogshow = true;
		},
		closeRuKuDialog() {
			this.diaoBoDialogshow = false;
		},
		RuKuDialogOpened() {},
		tabsClick(item) {
			console.log('item', item);
			this.diaoBoitemDeptId = item.id;
			this.listDictionaryParams.categoryId = item.id;
			this.getKuCun();
		},
		// getStockById(id) {
		// 	getStock(id).then(res => {
		// 		this.kucunSigle = res.data;
		// 	});
		// },

		getChangKu() {
			//发场库请求
			listWarehouseAll().then(res => {
				this.titlelist = res.rows;
			});
		},
		getKuCun() {
			//携带场库id
			this.listDictionaryParams.houseId = this.changkuId;
			listStock(this.listDictionaryParams).then(res => {
				this.kucunlist = res.rows;
				this.total = res.total;
			});
		},
		//弹出侧边栏
		popCheBian() {
			//弹出侧边栏
			this.wuzhiCheBian = true;
		},
		offPop() {
			//弹出侧边栏
			this.wuzhiCheBian = false;
			//清空搜索
			this.keyword = '';
		},
		xuanZheChangKu(item) {
			//给被调拨方赋值
			this.outchangku = item.name;
			this.outchangkuId = item.id;
			//弹出侧边栏
			this.wuzhiCheBian = false;
			//清空搜索
			this.keyword = '';
		}
	}
};
</script>

<style scoped lang="scss">
.confirmBtn {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.bottomPopup {
	padding: 20px;
}

.RuKuPagination {
	margin: 10px 0 20px 0;
}

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

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

			.paibanInfo {
				padding: 15rpx 0;
				overflow: scroll;
				height: 90%;
			}
		}
	}
}
</style>
