<template>
	<page-meta :page-style="themeColor"></page-meta>
	<div class="view">
		
		<div class="card top">
			<div class="row">
				<div class="left">采购单号</div>
				<div class="right">
					<div class="label">{{item.status}}</div>
					{{item.id}}
				</div>
			</div>
			<u-line margin="24rpx 0"></u-line>
			
			<div class="row">
				<div class="left">采购订单日期</div>
				<div class="right">{{item.time}}</div>
			</div>
			
			<u-line margin="24rpx 0"></u-line>
			<div class="row">
				<div class="left">入库仓库</div>
				<div class="right">{{item.warehouse}}</div>
			</div>
			
			<u-line margin="24rpx 0"></u-line>
			<div class="row">
				<div class="left">供应商</div>
				<div class="right">{{item.supplier}}</div>
			</div>
			
			<u-line margin="24rpx 0"></u-line>
			<div class="row">
				<div class="left">付款金额</div>
				<div class="right">￥{{item.price}}</div>
			</div>
			
		</div>
		<div style="margin-bottom: 32rpx;">
			 <u-tabs :list="tabs" :scrollable="false" lineColor="var(--base-color)" activeStyle="color:var(--base-color);font-weight:bold;" @change="tabChange"></u-tabs>
		</div>
		
		 
		 <div v-if="currentTab==0">
			 <div class="sub_label">商品清单</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" style="color:#222222">{{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="sub_label">
			 	订单备注
			 </div>
			 
			 <div class="card textarea">
			 	<u-textarea v-model="textarea" height="150rpx" placeholder="请输入"></u-textarea>
			 </div>
		 </div>
		 
		 <div v-if="currentTab==1">
			 <div class="sub_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" style="color:#222222">{{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="sub_label">
			 	订单备注
			 </div>
			 
			 <div class="card textarea">
			 	<u-textarea v-model="textarea" height="150rpx" placeholder="请输入"></u-textarea>
			 </div>
		 </div>
		 
		<u-overlay :show="modalShow">
			<div class="modal">
				<div class="title">提示</div>
				<div class="content">
					确定要取消该订单吗？
				</div>
				<div class="modal_btn">
					<div class="cancel" @click="modalShow=false">取消</div>
					<div class="confirm">确定</div>
				</div>
			</div>
		</u-overlay>
		 <!-- 确定入库 -->
		 <u-overlay :show="warehouseShow">
		 	<div class="modal">
		 		<div class="title">提示</div>
		 		<div class="content">
		 			确定将商品入库吗？
		 		</div>
		 		<div class="modal_btn">
		 			<div class="cancel" @click="warehouseShow=false">取消</div>
		 			<div class="confirm">确定</div>
		 		</div>
		 	</div>
		 </u-overlay>
		 
		 <paymentRecord ref="paymentRecord" v-if="currentTab==2"></paymentRecord>
		 <addPaymentRecord ref="addPaymentRecord"></addPaymentRecord>
		 <operationRecord ref="operationRecord" v-if="currentTab==3"></operationRecord>
		<div class="btnBox" v-if="currentTab!=3">
			<div class="detail" v-if="currentTab==0">
				<div class="print_cancel" @click="print">打印订单</div>
				<div class="print_cancel" @click="openModal('cancel')">取消订单</div>
				<div class="edit">编辑订单</div>
			</div>
			<div class="warehouse" v-if="currentTab==1" @click="warehouseShow=true">
				确认入库
			</div>
			<div class="warehouse" v-if="currentTab==2" @click="$refs.addPaymentRecord.start()">
				新增付款
			</div>
		</div>
	</div>
</template>

<script>
	import paymentRecord from "./components/paymentRecord.vue" //付款记录
	import addPaymentRecord from "./components/addPaymentRecord.vue" //新增付款记录
	import operationRecord from "./components/operationRecord.vue" //操作记录
	export default {
		components:{paymentRecord,addPaymentRecord,operationRecord},
		data () {
			return {
				warehouseShow:false,
				modalShow:false,
				modalType: '',
				textarea: '',
				input:'',
				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
				}],
				currentTab: '',
				tabs: [{
					name: '订单详情'
				},{
					name: '入库收货'
				},{
					name: '付款记录'
				},{
					name: '操作记录'
				}],
				item:{
					id:'CG.1233231123312',
					time: '2022-12-29 10:00:00',
					warehouse:'北京一号库',
					supplier: '北京供应商',
					price: 5000,
					status: '待入库'
				}
			}
		},
		methods:{
			print(){
				uni.navigateTo({
					url:'/page_salesman_index/print/print'
				})
			},
			tabChange({index}) {
				this.currentTab=index
			},
			openModal(type) {
				this.modalShow = true
			},
			countMinus(index) {
				if(this.data[index].count<=1) return
				this.data[index].count--;
			},
			countPlus(index) {
				this.data[index].count++;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		padding-bottom: 134rpx;
		.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: #999999;
					line-height: 40rpx;
				}
				.right {
					height: 40rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					image {
						margin-left: 8rpx;
						width: 28rpx;
						height: 28rpx;
						position: relative;
						top: 5rpx;
					}
					.label {
						
						height: 36rpx;
						background: rgba(33,187,243,0.08);
						border-radius: 8rpx;
						
						display: inline;
						padding: 0 8rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #21BBF3;
						line-height: 36rpx;
						text-align: center;
						
						margin-right: 10rpx;
					}
				}
			}
		}
		.sub_label {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #585858;
			line-height: 44rpx;
			margin: 16rpx 32rpx;
		}
		.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;
				}
			}
		}
		
		.input {
			padding: 0 32rpx;
			.prefix {
				image {
					width: 36rpx;
					height: 36rpx;
					position: relative;
					top: 6rpx;
				}
			}
			::v-deep {
				.u-input {
					background-color: #fff;
					border: 0;
				}
			}
		}
		
		.btnBox{
			position: fixed;
			bottom: 0;
			padding: 14rpx 32rpx 50rpx;
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			.detail {
				display: flex;
				justify-content: space-evenly;
				.print_cancel {
					width: 192rpx;
					height: 72rpx;
					border-radius: 40rpx;
					border: 2rpx solid #E8E8E8;
					
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.edit {
					width: 192rpx;
					height: 72rpx;
					background: #21BBF3;
					border-radius: 40rpx;
					
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
			.warehouse {
				
				height: 80rpx;
				background: $base-color;
				border-radius: 50rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
			}
		}
		.modal {
			height: 300rpx;
			width: 540rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			position: relative;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #222222;
				line-height: 44rpx;
				text-align: center;
				margin-top: 24rpx;
			}
			.content {
				margin-top: 30rpx;
				text-align: center;
				
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
			}
			.modal_btn {
				width: 100%;
				position: absolute;
				bottom: 0;
				display: flex;
				justify-content: space-evenly;
				padding-bottom: 32rpx;
				margin-top: 56rpx;
				.cancel {
					width: 206rpx;
					height: 72rpx;
					border-radius: 40rpx;
					border: 2rpx solid #E8E8E8;
					
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.confirm {
					width: 206rpx;
					height: 72rpx;
					background: #21BBF3;
					border-radius: 40rpx;
					
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					line-height: 40rpx;
					
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
</style>