<template>
	<view class="box-container">
		<u-navbar leftIconSize="25px" height="70px" :titleStyle="{fontWeight:700}" title="录入材积" @leftClick="leftClick" :autoBack="true">
		</u-navbar>

		<view class="entry-info">
			<view class="info">
				<view>订单号</view>
				<view style="margin-top: 8px;">{{form.orderNo}}</view>
			</view>
			<view class="info">
				<view>预报件重体</view>
				<view style="margin-top: 8px;">{{form.spec}}</view>
			</view>
			<u-form labelPosition="top" labelWidth="120" :model="sizeForm" :rules="rules" ref="ruleFormRef">
				<u-form-item label="到仓时间" prop="time" :required="true">
					<u-datetime-picker :show="show" v-model="sizeForm.time" mode="datetime" @confirm="onDatetimeChange"
						@cancel="show = false"></u-datetime-picker>
				</u-form-item>
				<view style="display: flex;">
					<view v-show="sizeForm.arriveTime" style="margin-right: 20px;">{{sizeForm.arriveTime}}</view>
					<view @tap="show = true">请选择</view>
				</view>
			</u-form>
			<view class="backgro"></view>
			<view>
				<view style="display: flex;justify-content: space-between;">
					<view style="display: flex;width: 90%;overflow-x: scroll;">
						<view v-for="(item, index) in sizeForm.volumeList" :key="index"
							@click="selectButton('button' + index)" :class="selectedButton === 'button' + index ? 'activeVolume' : 'noActiveVolume'" class="volume">
							{{"材积" + "("+(index -0 +1)+")"}}
						</view>
					</view>
					<view style="display: flex;padding:10rpx 0; position: relative;">
						<!-- src="@/static/images/common/background.png" -->
						<view  style="color:#1A4F94 ;"></view>
						<image src="@/static/images/common/background.png" class="img"></image>
					</view>
				</view>
				<u-form labelPosition="top" labelWidth="120" :model="sizeForm" :rules="rules" ref="ruleFormRef">
					<view v-for="(item, index) in sizeForm.volumeList" :key="index">
						<view v-show="selectedButton === 'button' + index">
							<u-form-item label="长(CM)" :prop="'volumeList.'+index+'.length'" :required="true"
								:target="item">
								<u-input v-model="item.length" disabled type="number" placeholder="请输入" />
							</u-form-item>
							<u-form-item label="宽(CM)"  :prop="'volumeList.'+index+'.width'" :required="true"
								:target="item">
								<u-input v-model="item.width" disabled type="number"  placeholder="请输入" />
							</u-form-item>
							<u-form-item label="高(CM)" :prop="'volumeList.'+index+'.height'" :required="true"
								:target="item">
								<u-input v-model="item.height" disabled type="number" placeholder="请输入" />
							</u-form-item>
							<u-form-item label="重量(KG)" :prop="'volumeList.'+index+'.weight'" :required="true"
								:target="item">
								<u-input v-model="item.weight" disabled type="number" placeholder="请输入" />
							</u-form-item>
							<u-form-item label="件数" :prop="'volumeList.'+index+'.number'" :required="true"
								:target="item">
								<u-input v-model="item.number" type="number" disabled placeholder="请输入" />
							</u-form-item>
							<!-- <view @click="delVolume(index)" style="text-align: center;color: #FF5133;">删除箱规</view> -->
						</view>
						

					</view>
				</u-form>
			</view>
			<button type="primary" class="btn" @click="submitData">提交材积</button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>
<script>
	import store from '@/store/index'
	import Api from '@/api/api.js'
	export default {
		data() {
			return {
				ruleForm: {
					warehouseId: store.state.userInfo.branchId,
					orderNo: "",
					orderNos: [],
					workType: "1",
					location: "",
					number: "",
					userId: "",

				},
				form: {
					spec: "",
					orderId: ""
				},

				sizeForm: {
					arriveTime:'',
					volumeList: [{
						length: "",
						number:"",
						weight:"",
						height:"",
						width:""
					}],
					time: ""
				},
				rules: {
					volumeList: []

				},
				sizeFormRules: {
					length: {
						type: 'string',
						required: true,
						message: '请输入长度',
						trigger: ['change', 'blur'],
					},
					number: {
						type: 'string',
						required: true,
						message: '请输入件数',
						trigger: ['change', 'blur'],
					},
					
					weight: {
						type: 'string',
						required: true,
						message: '请输入重量',
						trigger: ['change', 'blur'],
					},
					
					height: {
						type: 'string',
						required: true,
						message: '请输入高度',
						trigger: ['change', 'blur'],
					},
					
					width: {
						type: 'string',
						required: true,
						message: '请输入宽度',
						trigger: ['change', 'blur'],
					},
				
					

				},
				selectedButton: "button0",
				show: false,
				time: ""
			}
		},
		onLoad(op) {
			if (op.data) {
				const resData = JSON.parse(op.data)
				this.form.spec = resData.spec
				this.form.orderId = resData.orderId
				this.form.orderNo = resData.orderNo
				this.sizeForm.volumeList = resData.transferVolume
				this.sizeForm.volumeList.map(item=>{
					item.number = 1
				})
			}
			this.rules.volumeList.unshift(this.sizeFormRules)
			this.onDatetimeChange({value:Number(new Date())})
			this.sizeForm.time = Number(new Date())
		},

		methods: {
			selectButton(button) {
				this.selectedButton = button;
			},
				
			delVolume(index){
				if(this.sizeForm.volumeList.length == 1){
					this.$refs.uToast.show({
						type: 'warning',
						message: "只有一条，不可删除",
					})
					return
				}
				this.sizeForm.volumeList.splice(index, 1);
				this.selectedButton = "button0" 
			},
			addList() {
				this.sizeForm.volumeList.push({
						length: "",
						number:"",
						weight:"",
						height:"",
						width:""
					})
				this.rules.volumeList.unshift(this.sizeFormRules)
			},
			leftClick() {},
			onDatetimeChange(e) {
				const selectedTime = new Date(e.value)
				let year = selectedTime.getFullYear()
				let month = selectedTime.getMonth() + 1 + ""
				let day = selectedTime.getDate() + ""
				let hour = selectedTime.getHours() + ""
				let minute = selectedTime.getMinutes() + ""
				if (month.length < 2) {
					month = '0' + month
				}
				if (day.length < 2) {
					day = '0' + day
				}
				if (hour.length < 2) {
					hour = '0' + hour
				}
				if (minute.length < 2) {
					minute = '0' + minute
				}
				this.sizeForm.arriveTime = `${year}-${month}-${day} ${hour}:${minute}:00`
				this.show = false
			},
			submitData() {
				if(!this.sizeForm.arriveTime){
					this.$refs.uToast.show({
						type: 'warning',
						message: "请选择到仓时间",
					})
					return
				}
					const queryData = {
							  orderNo:this.form.orderNo,
					          orderId: this.form.orderId,
					          orderVolumeGroupList: [
					            {
					              arriveTime: this.sizeForm.arriveTime,
					              orderVolumeList: this.sizeForm.volumeList
					            }
					          ]
					        }
					Api.storge.orderVolumeInsert(queryData).then(res => {
						this.ruleForm.orderNos = []
						this.form.inNo = ""
						this.orderNosList = []
						uni.navigateTo({
							url: "/pages/outStock/palletizing?name=recordingVolume"
						})
					})
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	.box-container {
		.entry-info {
			width: 90%;
			margin: auto;
			margin-top: 230rpx;

			.info {
				margin-top: 30rpx;
			}

			.btn {
				border-radius: 12px;
				font-size: 28rpx;
				margin: 60rpx 0;
				background-color: #1A4F94;
			}

			.backgro {
				margin-top: 20rpx;
				width: 100%;
				height: 44rpx;
				background-color:  #FBFCFE;
			}

			.activeVolume {
				width: 120rpx;
				padding: 10rpx 0;
				margin-right: 13px;
				flex-shrink: 0;
				border-radius: 1px;
				border-bottom: 2px solid #1A4F94;
			}
				
			.noActiveVolume{
				width: 120rpx;
				padding: 10rpx 0;
				margin-right: 13px;
				box-sizing: border-box;
				flex-shrink: 0
			}

			.img {
				position: absolute;
				left: -90rpx;
				width: 50rpx;
				height: 60rpx; 
				opacity: 0.8;
			}

		}

	}
</style>