<template>
	<view class="cardbox">
		<view class="cardContent">
			<view class="listItemTitle">
				<view>
					<view class="item">盘点计划：WHPD202311080001</view>
					<view class="item">线边仓|XB-001-02</view>
					<view class="item">计划日期：2023-11-09</view>
					<view class="item">盘点人员：张丹</view>
					<view class="item">盘点状态：未开始</view>
				</view>
			</view>
			<view class="listBottom">
				<view class="bottomTitle" @tap="show = !show">
					<view class="desc">展开盘点明细</view>
					<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 class="workBtn">
						<u-button size="mini" class="" type="primary" @click="handleClickWork()">盘点作业</u-button>
					</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 class="items">生产日期：2023-10-27</view>
						</view>
						<view class="boxRight">
							<view class="items">891/1000pcs</view>
							<view class="items">线边仓|XB-X01-001</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: true
		};
	},
	computed: {},
	methods: {
		handleClickWork() {
			uni.navigateTo({
				url: `/pages/inventoryCounting/inventoryList`
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.cardbox {
	min-height: calc(100vh - 480rpx);
	margin-top: 20rpx;
}
.cardContent {
	border-radius: 8px;
	background: #fff;
}
.listItemTitle {
	display: flex;
	justify-content: space-between;
	padding: 20rpx;
	border-bottom: 2px solid #f8f8f8;
	.u-btn {
		width: 150rpx;
		margin: 0px;
		margin-top: 10rpx;
	}
	.item {
		height: 40rpx;
		line-height: 40rpx;
		color: #000;
		font-size: 28rpx;
		font-weight: 500;
	}
}
.listBottom {
	.bottomTitle {
		height: 60rpx;
		position: relative;
		display: flex;
		justify-content: space-between;
		.desc {
			color: #bbb;
			font-size: 24rpx;
			line-height: 60rpx;
			padding-left: 20rpx;
		}
		.topIcons {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			color: #aaa;
		}
		.workBtn {
			margin-right: 20rpx;
		}
	}
	.bottomBox {
		padding: 20rpx;
		.boxAll {
			display: flex;
			justify-content: space-between;
			background: #f8f8f8;
			border-radius: 10rpx;
		}
		.bottomItem {
			padding: 20rpx;
			// margin-bottom: 20rpx;
			.items {
				color: #333;
				font-size: 24rpx;
				height: 40rpx;
				line-height: 40rpx;
			}
		}
		.boxRight {
			padding: 20rpx;
			.items {
				color: #333;
				font-size: 24rpx;
				height: 40rpx;
				line-height: 40rpx;
			}
		}
	}
}
</style>
