<template>
	<view class="edit-page">
		<navigation title="新增锯断数据"></navigation>
		<view class="form-box">
			<u--form labelPosition="left" labelWidth="160rpx" :model="info" :rules="rules" ref="form">
				<view class="form">
					<u-form-item label="订单" prop="orderId" borderBottom>
						<uni-data-select v-model="info.orderId" :localdata="orderActions" placeholder="请选择订单" @change="changeOrder">
						</uni-data-select>
					</u-form-item>
					<u-form-item label="订单数量" prop="allLength" borderBottom>
						<u--input disabled disabledColor="#ffffff" border="none" v-model="orderCount"></u--input>
					</u-form-item>
					<u-form-item label="下料" prop="allLength" borderBottom>
						<u-number-box v-model="info.allLength" :step="0.1" :min="0.1" @change="allLengthChange"></u-number-box>
					</u-form-item>
					<u-form-item label="切割" prop="cuttingLength" borderBottom>
						<u-number-box v-model="info.cuttingLength" :step="0.1" :min="0.1" @change="cuttingLengthChange"></u-number-box>
					</u-form-item>
					<u-form-item label="数量">
						<u--input v-model="number" disabled disabledColor="#ffffff" placeholder="数量"
							border="none"></u--input>
					</u-form-item>
				</view>
			</u--form>
		</view>
		<view class="submit">
			<u-button @click="onSubmit" type="primary">提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderActions: [],
				number: 1,
				orderCount: '',
				info: {
					id: '',
					orderId: '',
					allLength: 1,
					cuttingLength: 1
				},
				rules: {
					orderId: {
						type: 'number',
						required: true,
						message: '请选择订单',
						trigger: ['blur', 'change']
					},
					allLength: {
						type: 'number',
						required: true,
						message: '请填写下料长度',
						trigger: ['blur', 'change']
					},
					cuttingLength: {
						type: 'number',
						required: true,
						message: '请填写切割长度',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(option) {
			if (option.id) {
				this.info.id = option.id
				this.detailInfo()
			}
		},
		onShow() {
			this.getOrderList()
		},
		methods: {
			changeOrder(e){
				console.log(e)
				for(let i = 0;i<this.orderActions.length;i++){
					if(this.orderActions[i].id == e){
						this.orderCount = this.orderActions[i].productionNum
						break
					}
				}
			},
			// 数量向下取整
			allLengthChange(e) {
				this.number = Math.floor(e.value/this.info.cuttingLength)
			},
			cuttingLengthChange(e) {
				this.number = Math.floor(this.info.allLength/e.value)
			},
			onSubmit() {
				this.$refs.form.validate().then(res => {
					if (this.info.id) {
						this.$api.updateMesCutting(this.info).then(res => {
							uni.showToast({
								title: '修改成功！',
								duration: 2000
							});
							setTimeout(function() {
								uni.navigateBack();
							}, 2000);
						}).catch(err => {})
					} else {
						this.$api.addMesCutting(this.info).then(res => {
							uni.showToast({
								title: '新增成功！',
								duration: 2000
							});
							setTimeout(function() {
								uni.navigateBack();
							}, 2000);
						}).catch(err => {})
					}
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			getOrderList() {
				let params = {
					pageSize: '9999',
					orderStatus: '1'
				}
				this.$api.productOrderList(params).then(res => {
					this.orderActions = res.rows
					for (var i = 0; i < this.orderActions.length; i++) {
						this.orderActions[i].value = this.orderActions[i].id;
						// this.orderActions[i].count = this.orderActions[i].productionNum;
						this.orderActions[i].text = this.orderActions[i].orderNum + '(' + this
							.orderActions[i].productionName + ')';
					}
				}).catch(err => {})
			},
			detailInfo() {
				this.$api.getMesCutting(this.info.id).then(res => {
					this.info = res.data
					this.number = Math.floor(this.info.allLength/this.info.cuttingLength)
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.edit-page {
		padding-bottom: 20rpx;

		.add-bg {
			width: 100%;
			height: 330rpx;
		}

		.form-box {
			.form {
				background-color: #fff;
				margin: 0 24rpx;
				padding: 10rpx 24rpx;
				border-radius: 12rpx;
			}

			/deep/.uni-select {
				border: none;
				padding: 0;
			}

			/deep/.u-number-box__input {
				width: 200rpx !important;
			}
		}

		.submit {
			margin: 34rpx;
		}
	}
</style>