<template>
	<view class="lists">
		<StickyNavBar class="stickyBox">
			<NavBar title="库存盘点"></NavBar>
			<view class="planBox">
				<view class="planTitle">盘点计划：WHPD2023110900002</view>
				<view class="planTip">仓库：CBCK|存货单元:XB-001-04</view>
			</view>
		</StickyNavBar>
		<view class="workTitle">盘点作业</view>
		<view class="scanningBtn">
			<uni-easyinput prefixIcon="search" class="topSearch" v-model="value" focus placeholder="请扫描盘点库位条码" @input="handleInput"></uni-easyinput>
			<uni-easyinput prefixIcon="search" v-model="value" focus placeholder="请扫描盘点物料条码" @input="handleInput"></uni-easyinput>
		</view>
		<view class="inventoryDetail">
			<view class="detailTitle">盘点明细</view>
			<view class="">
				<u-button size="mini" class="" type="success" @click="addShowModel = true">
					<u-icon name="plus"></u-icon>
					新增
				</u-button>
			</view>
		</view>
		<view class="cardContent">
			<view class="cardItem">
				<view class="bottomItem">
					<view class="items">防霉抗菌PE平口袋|PD202309992(2)</view>
				</view>
				<view class="boxRight">
					<view class="items">891/1000pcs</view>
				</view>
			</view>
			<view class="listBottom">
				<view class="bottomTitle" @tap="show = !show">
					<view class="topIcons">
						<view v-if="show">
							<u-icon name="arrow-down" color="#aaa" size="32"></u-icon>
							展开
						</view>
						<view v-else>
							<u-icon name="arrow-up" color="#aaa" size="32"></u-icon>
							收起
						</view>
					</view>
				</view>
				<view v-if="!show" class="bottomBox">
					<view class="boxAll">
						<view class="bottomItem">
							<view class="items">C00990099900027</view>
							<view class="items">C009900|防霉抗菌包装纸</view>
						</view>
						<view class="boxRight">
							<view class="items">891/1000pcs</view>
							<view class="itemsBtn">
								<u-button size="mini" class="" type="primary" @click="checkShowModel = true">盘点</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<BottomBtn :btnArr="btnArr" @getBtnHandle="getBtnHandle"></BottomBtn>
		<u-modal v-model="addShowModel" @confirm="addConfirm" ref="addShowModel" :show-title="false" :show-cancel-button="true">
			<view class="slot-content">
				<u-form :model="addForm" ref="addForm">
					<u-form-item label="批号"><u-input v-model="addForm.name" /></u-form-item>
					<u-form-item label="批次"><u-input v-model="addForm.name" /></u-form-item>
					<u-form-item label="数量"><u-input v-model="addForm.name" /></u-form-item>
				</u-form>
			</view>
		</u-modal>
		<u-modal v-model="checkShowModel" @confirm="addConfirm" ref="checkShowModel" :show-title="false" :show-cancel-button="true">
			<view class="slot-content">
				<u-form :model="checkForm" ref="checkForm">
					<uni-easyinput prefixIcon="search" class="topSearch" v-model="checkForm.name" focus placeholder="请扫描盘点库位条码" @input="handleInput"></uni-easyinput>
					<u-form-item label="数量"><u-input v-model="checkForm.name" /></u-form-item>
				</u-form>
			</view>
		</u-modal>
	</view>
</template>

<script>
import StickyNavBar from '@/components/StickyNavBar/index.vue';
import ContentLoadingMore from '@/components/ContentLoadingMore/index.vue';
import BottomBtn from '@/components/BottomBtn/index.vue';
export default {
	components: {
		StickyNavBar,
		ContentLoadingMore,
		BottomBtn
	},
	data() {
		return {
			value: '',
			show: true,
			btnArr: [
				{
					style: '',
					type: 'primary',
					text: '盘点确认',
					way: 'goBack'
				}
			],
			addShowModel: false,
			checkShowModel: false,
			addForm: {
				name: ''
			},
			checkForm: {
				name: ''
			}
		};
	},
	computed: {},
	methods: {
		handleInput(e) {
			console.log(e, 'eee');
		},
		getBtnHandle(row) {
			console.log('getBtnHandle', row);
			this[row.way]();
		},
		goBack() {
			console.log('返回了');
		},
		ontabtap(e, type) {
			console.log('切换tab', e, type);
		},
		addConfirm() {
			this.addShowModel = false;
		}
	}
};
</script>

<style lang="scss">
/deep/ .u-sticky {
	top: 0 !important;
	background: #fff;
}
.planBox {
	padding: 20rpx;
	border-bottom: 1px solid #333;
}
.planTitle {
	font-size: 32rpx;
	font-weight: 600;
	text-align: center;
	line-height: 60rpx;
}
.planTip {
	font-size: 28rpx;
	text-align: center;
	line-height: 40rpx;
}
.scanningBtn {
	padding: 20rpx;
	background: #fff;
	.topSearch {
		margin-bottom: 20rpx;
	}
}
.workTitle {
	font-size: 32rpx;
	font-weight: 600;
	line-height: 40rpx;
	margin: 20rpx 0 0 40rpx;
}
.inventoryDetail {
	display: flex;
	justify-content: space-between;
	padding: 0 20rpx;
}
.detailTitle {
	font-size: 32rpx;
	font-weight: 600;
	line-height: 46rpx;
}
.listBottom {
	padding: 0 10rpx 20rpx 10rpx;
	.bottomTitle {
		height: 60rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		.topIcons {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			color: #aaa;
		}
	}
	.bottomBox {
		.boxAll {
			display: flex;
			justify-content: space-between;
			background: #fff;
			border-radius: 10rpx;
		}
		.bottomItem {
			padding: 20rpx;
			.items {
				color: #333;
				font-size: 24rpx;
				height: 40rpx;
				line-height: 40rpx;
			}
		}
		.boxRight {
			padding: 20rpx 20rpx 0 20rpx;
			.items {
				color: #333;
				font-size: 24rpx;
				height: 40rpx;
				line-height: 40rpx;
			}
			.itemsBtn {
				float: right;
				padding: 20rpx 0 10rpx;
			}
		}
	}
}
.cardContent {
	margin: 20rpx;
	background: #f8f8f8;
}
.cardItem {
	padding: 20rpx 10rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #333;
}
.slot-content {
	padding: 20rpx;
	.u-form-item {
		padding: 0;
	}
}
</style>
