<template>
	<view class="lists">
		<uni-list ref="list" class="scroll-wrapper" :enableBackToTop="true" :scroll-y="true"
			@scrolltolower="loadMore()">
			<uni-cell class="middle view" v-for="item in 3" :key='item'>
				<view class="middle-wrapper">
					<view class="middle-plan">
						<image class="icon_plan" src="@/static/image/icon_plan@3x.png" mode=""></image>
						<text class="middle-title">五粮液1618</text>
					</view>
					<view class="text-block">
						<text class="middle-date">规格</text>
						<text class="middle-date-des">52% 500ml *4</text>
					</view>
					<view class="text-block">
						<text class="middle-date">未发货件数</text>
						<text class="middle-date-des">300</text>
					</view>
					<view class="text-block">
						<text class="middle-date">本月计划件数</text>
						<text class="middle-date-des">200</text>
					</view>
					<view class="text-block">
						<text class="middle-date">本次要货件数</text>
						<view class="middle-date-des uni-list picker-year">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<input type="text" v-model="applyNum" class="picker-block" />
								</view>
							</view>
						</view>
					</view>
				</view>
				<view v-if="item == 3" class="blank"></view>
				<view class="bottom" :style="btnStyle">
					<button class="btn btn-l" type="default" @tap="preStep">
						<text class="btn-text btn-text-l">上一步</text>
					</button>
					<button class="btn" type="default" @tap="nextStep">
						<text class="btn-text">下一步</text>
					</button>
				</view>
			</uni-cell>
		</uni-list>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import uniList from '@/components/uni-list.vue';
	import uniCell from '@/components/uni-cell.vue';

	export default {
		components: {
			uniList,
			uniCell,
		},
		data() {
			return {
				applyNum: 100
			}
		},
		computed: {
			btnStyle() {
				return {
					'bottom': `${this.sysinfo.safeAreaInsets.bottom + 56}px`
				}
			},
			listsStyle() {
				return {
					'height': `${this.sysinfo.safeArea.height - this.sysinfo.safeArea.top - 68}px`
				}
			},
			...mapState(['sysinfo'])
		},
		methods: {
			loadMore(e) {
				console.log('loadMore');
			},
			nextStep(e) {
				this.$emit('click', 'deliveryCheckIn')
			},
			preStep(e) {
				this.$emit('click', 'deliveryPlan')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		flex-direction: column;
	}

	.lists {
		overflow: hidden;
		flex-direction: column;
		padding: 0 16rpx 0;
		background: $background-color-1;
		// background-color: green;
	}

	.scroll-wrapper {
		// overflow-y:scroll;
	}

	.middle-wrapper {
		flex-direction: column;
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0px 2px 4px 0px #dbe4ee;
		padding: 32rpx 64rpx 64rpx 48rpx;
		margin-bottom: 24rpx;
	}

	.middle-plan {
		align-items: center;
		height: 60rpx;
		margin-bottom: 46rpx;
	}

	.middle-title {
		font-weight: 500;
		font-size: 32rpx;
		color: $text-base-color;
		font-family: PingFangSC, PingFangSC-Medium;
	}

	.icon_plan {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.text-block {
		flex: 1;
		margin-bottom: 32rpx;
	}

	.middle-date {
		flex: 2;
		font-size: 28rpx;
		color: #999;
		margin-bottom: 8rpx;
	}

	.middle-date-des {
		flex: 3;
		font-size: 28rpx;
		color: $text-base-color;
	}

	.picker-year {
		position: relative;
		background: #f5f6f7;
		border-radius: 4px;
		align-items: center;
		padding-left: 14rpx;
	}

	.uni-list-cell {
		flex: 1;
	}

	.uni-list-cell-db {
		flex: 1;
	}

	.picker-block {
		flex: 1;
		font-size: 14px;
		color: $text-base-color;
	}

	.blank {
		height: 220rpx;
	}

	.bottom {
		position: fixed;
		left: 16rpx;
		right: 16rpx;
		margin-top: 50rpx;
		z-index: 100;
		justify-content: space-between;
	}

	.btn {
		flex: 1;
		height: 92rpx;
		background: $wly-primary-color;
		border-radius: 46rpx;
	}

	.btn-l {
		margin-right: 30rpx;
		border: 1px solid $wly-primary-color;
		background-color: transparent;

	}

	.btn-text {
		color: #fff;
		font-size: 34rpx;
	}

	.btn-text-l {
		color: $wly-primary-color;
	}
</style>
