<template>
	<view class="stock-check-page">
		<NavBar :title="$t('库存盘点')"></NavBar>
		<view class="container">
			<view class="title">
				{{$t('盘点作业')}}
			</view>
			<view class="search-area">
				<view class="top">
					<uni-easyinput v-model="value" prefixIcon="search" :placeholder="$t('请输入盘点产品号')" trim="all" focus/>
					<button class="search-btn" :loading="loadings" @click="handleSearch">{{$t('确认')}}</button>
				</view>
				<uni-easyinput v-model="warehouse" class="warehouse-input" prefixIcon="search"
					:placeholder="$t('请输入盘点仓库')" trim="all" />
			</view>
			<view class="sub-title">
				<view>
					{{$t('盘点明细')}}
				</view>
				<u-icon name="plus" size="32" @click="handleAdd"></u-icon>
			</view>
			<view class="detail">
				<view class="card" v-if="list.length > 0" @click="handleDetail">
					<view class="top">
						<view class="product-number">
							{{list[0].ml001}}|{{list[0].materialName}}
						</view>
						<view class="top-r">
							<view class="total-quantity">
								{{physicalQuantitys}}ps/{{stockQuantitys}}ps
							</view>
						</view>
					</view>
					<view class="bottom">
						<view class="content" v-for="(item, index) in list" :key="index">
							<view class="left">
								<view class="text">
									{{item.warehouse}}|{{item.location}}
								</view>
								<view class="batch-text" v-if="item.batchNo">
									{{item.batchNo}}
								</view>
							</view>
							<view class="right">
								<view class="text">
									{{item.physicalQuantity || 0}}ps/{{item.stockQuantity || 0}}ps
								</view>
								<u-icon v-if="item.isAppend" name="minus" size="32"
									@click.native.stop="handleDelete(item, index)"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<button class="sumbit-btn" :loading="loading" @click="handleSumbit">{{$t('确认')}}</button>
		</view>
	</view>
</template>

<script>
	import i18n from '@/lang/index';
	export default {
		data() {
			return {
				loading: false,
				loadings: false,
				value: "",
				warehouse: "",
				list: [],
			}
		},
		computed: {
			physicalQuantitys() {
				let num = 0;
				this.list.forEach((item, index) => {
					num += Number(item.physicalQuantity);
				});
				return num;
			},
			stockQuantitys() {
				let num = 0;
				this.list.forEach((item, index) => {
					num += Number(item.stockQuantity);
				});
				return num;
			}
		},
		methods: {
			getAddValue(data) {
				this.list.push(data);
			},
			getDetailValue(data) {
				this.list = data;
			},
			handleReset() {
				this.value = "";
				this.warehouse = "";
				this.list = [];
			},
			handleSearch() {
				if (this.loadings) {
					return this.$u.toast(i18n.t('请勿重复提交'))
				}
				if (!this.value) {
					return this.$u.toast(i18n.t('盘点产品号不能为空'));
				}
				if (this.list.length > 0) {
					return this.$u.toast(i18n.t('当前已经存在盘点产品'));
				}
				const params = {
					ml001: this.value,
					ml002: this.warehouse
				}
				this.loadings = true;
				this.$u.api.getforinvmlinfoApi(params)
					.then(res => {
						this.loadings = false;
						if (res.success) {
							if (res.data.length > 0) {
								this.list = res.data.map((item) => {
									return {
										...item,
										isAppend: 0,
										warehouse: item.ml002,
										location: item.ml003,
										physicalQuantity: item.ml005,
										stockQuantity: item.ml005,
										batchNo: item.ml004 || ''
									}
								});
								setTimeout(() => {
									this.value = "";
									this.warehouse = "";
								}, 1000);
							}
						} else {
							this.$u.toast(res.errorMessage);
						}
					})
			},
			handleAdd() {
				uni.navigateTo({
					url: '/pages/stockCheck/add?list=' + encodeURIComponent(JSON.stringify(this.list))
				});
			},
			handleDetail() {
				uni.navigateTo({
					url: '/pages/stockCheck/detail?list=' + encodeURIComponent(JSON.stringify(this.list))
				});
			},
			handleDelete(row, index) {
				this.list.splice(index, 1);
			},
			handleSumbit() {
				if (this.loading) {
					return this.$u.toast(i18n.t('请勿重复提交'))
				}
				if (this.list.length == 0) {
					return this.$u.toast(i18n.t('提交数据不能为空'));
				}
				this.loading = true;
				const params = this.list.map((item) => {
					return {
						isAppend: item.isAppend,
						location: item.location,
						materialName: item.materialName,
						materialNo: item.ml001,
						physicalQuantity: Number(item.physicalQuantity),
						stockQuantity: Number(item.stockQuantity),
						warehouse: item.warehouse,
						batchNo: item.batchNo || '',
					}
				})
				this.$u.api.stockConfirmApi({
						data: params
					})
					.then(res => {
						this.loading = false;
						if (res.success) {
							this.$u.toast(i18n.t('提交成功'));
							setTimeout(() => {
								this.handleReset();
							}, 1000);
						} else {
							this.$u.toast(res.errorMessage);
						}
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.stock-check-page {
		.container {
			.title {
				font-size: 32rpx;
				font-weight: bolder;
				padding-top: 24rpx;
				padding-left: 24rpx;
			}

			.search-area {
				display: flex;
				flex-direction: column;
				padding: 24rpx;

				.top {
					display: flex;
					justify-content: space-between;
					align-content: center;
					margin-bottom: 12rpx;

					.search-btn {
						width: 120rpx;
						height: 60rpx;
						line-height: 60rpx;
						margin-left: 12rpx;
						font-size: 26rpx;
					}
				}

				/deep/.uni-easyinput {
					height: 60rpx;

					.uni-easyinput__content {
						height: 100%;
						border-radius: 36rpx;
					}
				}

				.warehouse-input {
					width: calc(100% - 132rpx);

					/deep/.uni-easyinput__content {
						height: 60rpx;
					}
				}
			}

			.sub-title {
				font-size: 32rpx;
				font-weight: bolder;
				padding: 0 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.detail {
				width: calc(100% - 40rpx);
				margin: 20rpx;
				padding: 20rpx;
				padding-bottom: 120rpx;
				background-color: #f1f1f3;
				border-radius: 12rpx;

				.card {
					padding: 12rpx;
					margin-bottom: 24rpx;
					box-sizing: border-box;
					background-color: #ffffff;
					border-radius: 12rpx;

					.top {
						height: 60rpx;
						padding: 0 12rpx;
						padding-bottom: 8rpx;
						box-sizing: border-box;
						display: flex;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px solid #d8dadf;

						.top-r {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding-right: 12rpx;

							.total-quantity {
								margin-right: 12rpx;
							}
						}
					}

					.bottom {
						padding: 12rpx;
						box-sizing: border-box;

						.content {
							padding: 24rpx 12rpx;
							margin-bottom: 16rpx;
							display: flex;
							justify-content: space-between;
							font-size: 28rpx;
							background-color: #f1f1f3;
							border: 1px solid #d8dadf;
							border-radius: 12rpx;
							box-sizing: border-box;

							.left {
								.text {
									font-size: 28rpx;
								}
								.batch-text {
									font-size: 24rpx;
									color: #666;
									margin-top: 8rpx;
								}
							}

							.right {
								display: flex;
								justify-content: flex-end;

								.text {
									margin-right: 12rpx;
									font-size: 28rpx;
								}
							}
						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 150rpx;
			padding: 24rpx;
			background-color: #ffffff;

			.sumbit-btn {
				width: 300rpx;
			}
		}
	}
</style>