<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="安装设备" borderBottom>
						<u--input v-model="equipmentName" placeholder="安装设备" border="none" disabled
							disabledColor="#fff">
						</u--input>
					</u-form-item>
					<u-form-item label="模具名称" prop="modulId" borderBottom>
						<inputSearch emptyTips="无匹配选项" :isJSON="true" :keyName="keyName" placeholder="请选择模具"
							:candidates="mouldActions" @getValue="mouldSelect" @clearInputValue="clearInputValue"></inputSearch>
					</u-form-item>
					<u-form-item label="产品名称" prop="productionId" borderBottom>
						<uni-data-select v-model="info.productionId" :localdata="productionActions" placeholder="请选择产品">
						</uni-data-select>
					</u-form-item>
					<u-form-item label="每模产品数" prop="productionMultiple" borderBottom>
						<u-number-box v-model="info.productionMultiple"></u-number-box>
						</u--input>
					</u-form-item>
					<u-form-item label="安装时间" prop="startTime" @click="showTimePicker = true">
						<u--input v-model="info.startTime" placeholder="请选择安装时间" border="none" disabled
							disabledColor="#ffffff"></u--input>
					</u-form-item>
				</view>
			</u--form>
			<u-datetime-picker :show="showTimePicker" v-model="defaultTime" mode="datetime"
				@cancel="showTimePicker=false" @confirm="timePickerConfirm($event)"></u-datetime-picker>
		</view>
		<view class="submit">
			<u-button @click="onSubmit" type="primary">提交</u-button>
		</view>
	</view>
</template>

<script>
	import inputSearch from "@/components/inputSearch.vue";
	export default {
		components: {
			inputSearch
		},
		data() {
			return {
				showTimePicker: false,
				defaultTime: Number(new Date()),
				equipmentName: '',
				mouldActions: [],
				keyName: 'mouldName',
				productionActions: [],
				info: {
					id: '',
					modulId: '',
					productionId: '',
					productionMultiple: 1,
					startTime: ''
				},
				rules: {
					modulId: {
						type: 'number',
						required: true,
						message: '请选择模具',
						trigger: ['blur', 'change']
					},
					productionId: {
						type: 'number',
						required: true,
						message: '请选择产品',
						trigger: ['blur', 'change']
					},
					productionMultiple: {
						type: 'number',
						required: true,
						message: '请填写每模产品数',
						trigger: ['blur', 'change']
					},
					startTime: {
						type: 'string',
						required: true,
						message: '请选择安装时间',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(option) {
			this.info.id = option.id
			this.equipmentName = option.equipmentName
		},
		onShow() {
			this.getMouldList()
		},
		methods: {
			onSubmit() {
				this.$refs.form.validate().then(res => {
					this.$api.changeModule(this.info).then(res => {
						uni.showToast({
							title: '修改成功！',
							duration: 2000
						});
						setTimeout(function() {
							uni.navigateBack();
						}, 2000);
					}).catch(err => {})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			timePickerConfirm(e) {
				this.info.startTime = this.dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
				this.showTimePicker = false
			},
			getMouldList() {
				let params = {
					pageSize: '9999',
					life: 'false',
				}
				this.$api.mesMouldList(params).then(res => {
					this.mouldActions = res.rows
					for (var i = 0; i < this.mouldActions.length; i++) {
						this.mouldActions[i].mouldName = this.mouldActions[i].mouldName + '(' + this.mouldActions[
								i]
							.mouldCode + ')';
					}
				}).catch(err => {})
			},
			mouldSelect(e) {
				this.info.modulId = e
				this.info.productionId = ''
				this.getProductionList(e)
			},
			clearInputValue() {
				this.info.productionId = ''
				this.productionActions = []
			},
			getProductionList(id) {
				this.$api.getModulProduction(id).then(res => {
					this.productionActions = res.data
					for (var i = 0; i < this.productionActions.length; i++) {
						this.productionActions[i].value = this.productionActions[i].id;
						this.productionActions[i].text = this.productionActions[i].materielName + '(' + this
							.productionActions[i].materielCode + ')';
					}
				}).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;
			}
		}

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