<template>
	<div class="view">
		<div class="top card">
			<div class="row">
				<div class="left">
					供应商<span class="star">*</span>
				</div>
				<div class="right" @click="openPick('supplier')">
					北京供应商
					<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
				</div>
			</div>
			<u-line style="margin: 24rpx 0;"></u-line>
			
			<div class="row">
				<div class="left">
					入库仓库<span class="star">*</span>
				</div>
				<div class="right" @click="openPick('warehouse')">
					北京一号库
					<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
				</div>
			</div>
			<u-line style="margin: 24rpx 0;"></u-line>
			
			<div class="row">
				<div class="left">
					采购日期<span class="star">*</span>
				</div>
				<div class="right" @click="openPick('time')">
					2022-12-29 10:00:00
					<image :src="$util.img('/upload/weapp/user/arrow-right.png')" mode=""></image>
				</div>
			</div>
			
		</div>
		
		<div class="label">商品清单</div>
		<div class="input">
			<u-input v-model="input" placeholder="请输入商品名称/编号/条形码">
				<div class="prefix" slot="prefix">
					<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode=""></image>
				</div>
			</u-input>
		</div>
		
		<div class="card content" v-for="(item,index) in data" :key="index" >
			<div class="title">{{item.title}}</div>
			<u-line ></u-line>
			<div class="row">
				<div class="left">
					<span>商品编号：{{item.id}}</span>
					<span class="unit">规格：{{item.unit}}</span>
				</div>
			</div>
			
			<div class="row">
				<div class="left">
					<span>进货价：￥{{item.price}}</span>
				</div>
				<div class="right">
					<span>金额：</span>
					<span class="rmb">￥</span>
					<span class="number">{{item.number}}</span>
				</div>
			</div>
			
			<div class="row">
				<div class="left">采购数量：</div>
				<div class="right">
					<image @click.stop="countMinus(index)" :src="$util.img(`/upload/weapp/pageSalesman/minus.png`)"  style="margin-right: 10rpx;" mode=""></image>
					<div class="count">{{item.count}}</div>
					<image @click.stop="countPlus(index)" :src="$util.img(`/upload/weapp/pageSalesman/add.png`)" style="margin-left: 10rpx;" mode=""></image>
				</div>
			</div>
			
			<u-line margin="24rpx 0"></u-line>
			<div class="row">
				<div class="left">
					备注：
					<span v-if="item.remark">{{item.remark}}</span>
					<image v-else :src="$util.img('/upload/weapp/user/edit.png')" mode=""></image>
				</div>
			</div>
		</div>
		
		<div class="total card">
			<div class="left">合计：
				<span class="value">3种</span>
			</div>
			<div class="right">
				合计金额：
				<span class="rmb">￥</span>
				<span class="value">68.88</span>
			</div>
		</div>
		
		<div class="label">
			订单备注
		</div>
		
		<div class="card textarea">
			<u-textarea v-model="textarea" height="150rpx" placeholder="请输入"></u-textarea>
		</div>
		
		
		<div class="btnBox">
			<div class="btn">完成</div>
		</div>
		
		<u-picker :show="showPick" :columns="pickData" @cancel="showPick=false" confirmColor="#222222"></u-picker>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				showPick:false,
				textarea: '',
				input:'',
				pickFlag: '',
				supplierPickData: [['河北供应商','天津供应商','北京供应商','河南供应商','湖南供应商']],
				warehosePickData:[['河北一号库','天津一号库','北京一号库','河南一号库','湖南一号库']],
				timePickData:[
					['2020年','2021年','2023年','2024年','2025年','2026年','2027年','2028年'],
					['01月','02月','03月','04月','05月','06月','07月','08月','09月','10月','11月','12月'],
					['01日','02日','03日','04日','05日','06日','07日','08日','09日','10日','11日','12日']
				],
				data:[{
					title: '蜜款冬花 选0.5kg/袋（优）',
					id:'A0001',
					unit: '0.5kg/袋',
					price: '35.00',
					quantity: 1,
					remark: '少买一点',
					number: 68.88,
					count: 1
				},{
					title: '蜜款冬花 选0.5kg/袋（优）',
					id:'A0001',
					unit: '0.5kg/袋',
					price: '35.00',
					quantity: 1,
					number: 68.88,
					count: 1
				},{
					title: '蜜款冬花 选0.5kg/袋（优）',
					id:'A0001',
					unit: '0.5kg/袋',
					price: '35.00',
					quantity: 1,
					number: 68.88,
					count: 1
				},{
					title: '蜜款冬花 选0.5kg/袋（优）',
					id:'A0001',
					unit: '0.5kg/袋',
					price: '35.00',
					quantity: 1,
					remark: '少买一点',
					number: 68.88,
					count: 1
				}],
				
			}
		},
		computed:{
			pickData() {
				if(this.pickFlag=='supplier') return this.supplierPickData
				else if(this.pickFlag=='warehouse') return this.warehosePickData
				else if(this.pickFlag=='time') return this.timePickData
			}
		},
		methods:{
			countMinus(index) {
				if(this.data[index].count<=1) return
				this.data[index].count--;
			},
			countPlus(index) {
				this.data[index].count++;
			},
			openPick(type) {
				this.showPick = true
				this.pickFlag = type
			},
			
		}
		
	}
</script>

<style scoped lang="scss">
	.view {
		padding-bottom: 132rpx;
		.card {
			margin: 32rpx;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
		}
		.top {
			.row {
				display: flex;
				justify-content: space-between;
				.left {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					.star {
						margin-left: 8rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #F33B50;
					}
				}
				.right {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					image {
						margin-left: 8rpx;
						width: 28rpx;
						height: 28rpx;
						position: relative;
						top: 5rpx;
					}
				}
			}
		}
		.label {
			margin: 32rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #222222;
		}
		.input {
			padding: 0 32rpx;
			.prefix {
				image {
					width: 36rpx;
					height: 36rpx;
					position: relative;
					top: 6rpx;
				}
			}
			::v-deep {
				.u-input {
					background-color: #fff;
					border: 0;
				}
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				margin-bottom: 24rpx;
			}
			.row {
				margin-top: 24rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 34rpx;
				
				display: flex;
				justify-content: space-between;
				.left {
					image {
						position: relative;
						top: 2rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}
				.right {
					.rmb {
						font-size: 24rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #F33B50;
					}
					.number {
						font-size: 40rpx;
						font-family: DINAlternate-Bold, DINAlternate;
						font-weight: bold;
						color: #F33B50;
					}
					image {
						position: relative;
						top: 5rpx;
						width: 24rpx;
						height: 24rpx;
					}
					.count {
						display: inline-flex;
						justify-content: center;
						align-content: center;
						
						width: 78rpx;
						height: 40rpx;
						background: #F6F6F6;
						border-radius: 8rpx;
						
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #222222;
						line-height: 36rpx;
					}
				}
				
				.unit {
					margin-left: 24rpx;
				}
			}
		}
		.total {
			display: flex;
			justify-content: space-between;
			.left {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #BFBFBF;
				line-height: 40rpx;
				.value {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
				}
			}
			.right {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #BFBFBF;
				line-height: 40rpx;
				.rmb {
					font-size: 24rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #F33B50;
					line-height: 40rpx;
				}
				.value {
					font-size: 40rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #F33B50;
					line-height: 40rpx;
				}
			}
		}
		.textarea {
			::v-deep {
				.u-textarea {
					background: #F7F7F7;
					border-radius: 16rpx;
					border: 0;
				}
			}
		}
		
		.btnBox{
			position: fixed;
			bottom: 0;
			padding: 0 32rpx 50rpx;
			width: 100%;
			box-sizing: border-box;
			background-color: #F7F7F7;
			.btn {
				width: 100%;
				height: 80rpx;
				background: #21BBF3;
				border-radius: 40rpx;
				
				display: flex;
				justify-content: center;
				align-items: center;
				
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 40rpx;
			}
		}
		::v-deep {
			.u-popup__content {
				border-radius: 24rpx 24rpx 0rpx 0rpx;
			}
			.u-picker{
				padding-top: 24rpx !important;
			}
		}
	}
</style>