<template>
	<view class="plans">
		<view class="middle view">
			<view class="middle-plan">
				<image class="icon_plan" src="@/static/image/icon_plan@3x.png" mode=""></image>
				<text class="middle-title">发货计划</text>
			</view>
			<view class="text-block">
				<text class="middle-date">制票类型</text>
				<text class="middle-date-des">配额酒制票通知单(计划内)</text>
			</view>
			<view class="text-block">
				<text class="middle-date">开票客户</text>
				<text class="middle-date-des">步步高商贸有限公司</text>
			</view>
			<view class="text-block">
				<text class="middle-date">订单客户</text>
				<text class="middle-date-des">步步高商贸有限公司</text>
			</view>
			<view class="text-block">
				<text class="middle-date">渠道类型</text>
				<text class="middle-date-des">专卖店</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">
							<picker class="picker-block" @change="bindPickerChange" :value="index" :range="array">
								<text class="uni-input">{{array[index]}}</text>
							</picker>
						</view>
					</view>
					<image class="icon-arrow" src="@/static/image/arrow_down@3x.png" mode=""></image>
				</view>
			</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">
							<picker class="picker-block" @change="bindPickerChange" :value="index" :range="array">
								<text class="uni-input">{{array[index]}}</text>
							</picker>
						</view>
					</view>
					<image class="icon-arrow" src="@/static/image/arrow_down@3x.png" mode=""></image>
				</view>
			</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">
							<picker class="picker-block" @change="bindPickerChange" :value="index" :range="array">
								<text class="uni-input">{{array[index]}}</text>
							</picker>
						</view>
					</view>
					<image class="icon-arrow" src="@/static/image/arrow_down@3x.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="bottom view">
			<button class="btn" type="default" @tap="nextStep">
				<text class="btn-text">下一步</text>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['2021', '2020', '2019', '2018'],
				index: 0,
			}
		},
		methods:{
			bindPickerChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			nextStep() {
				this.$emit('click','deliveryList')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		flex-direction: column;
	}
	.plans{
		flex-direction: column;
		padding: 0 16rpx;
	}
	.middle {
		background-color: #fff;
		border-radius: 16rpx;
		box-shadow: 0px 2px 4px 0px #dbe4ee;
		padding: 32rpx 64rpx 64rpx 48rpx;
	}
	
	.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;
	}
	
	.uni-input{
		font-size: 14px;
		color: $text-base-color;
	}
	
	.icon-arrow{
		position: absolute;
		right: 22rpx;
		top: 20rpx;
		width: 7px;
		height: 4px;
		z-index:10;
	}
	
	.bottom {
		margin-top: 48rpx;
		padding: 0 16rpx;
	}
	
	.btn {
		height: 92rpx;
		background: $wly-primary-color;
		border-radius: 46rpx;
	}
	
	.btn-text {
		color: #fff;
		font-size: 34rpx;
	}
</style>
