<template>
	<!-- 新增制梁台座 -->
	<view class="fullHeight">
		<headers :showBack="true" class="">
			<view class="headerName">
				工序详情
				<view class="headerBack" @click="returnBack">
					<u-icon name="arrow-left" color="#333333" size="40"></u-icon>
				</view>
			</view>
		</headers>
		<view class="makeBeamForm">
			<u-form :model="form" ref="uForm">
				<u-form-item label="工序名称" prop="name" label-width="200">
					<u-input :disabled="!isShowDetail" v-model="form.name" placeholder="请输入工序名称" />
				</u-form-item>
				<u-form-item label="计划开始时间" prop="time" label-width="200">
					<span class="mustInput">*</span>
					<view class="input-text" @click="openPlanTime(1)" v-if="form.planStartTime == ''">
						请选择时间
					</view>
					<view class="input-detail" @click="openPlanTime(1)" v-else>
						{{ form.planStartTime }}
					</view>
				</u-form-item>
				<u-form-item label="计划结束时间" prop="name" label-width="200">
					<span class="mustInput">*</span>
					<view class="input-text" @click="openPlanTime(2)" v-if="form.planStartTime2 == ''">
						请选择时间
					</view>
					<view class="input-detail" @click="openPlanTime(2)" v-else>
						{{ form.planStartTime2 }}
					</view>
				</u-form-item>
				<u-form-item label="实际开始时间" prop="name" label-width="200">
					<view class="input-text" @click="openPlanTime(3)" v-if="form.planStartTime3 == ''">
						请选择时间
					</view>
					<view class="input-detail" @click="openPlanTime(3)" v-else>
						{{ form.planStartTime3 }}
					</view>
				</u-form-item>
				<u-form-item label="实际结束时间" prop="name" label-width="200">
					<view class="input-text" @click="openPlanTime(4)" v-if="form.planStartTime4 == ''">
						请选择时间
					</view>
					<view class="input-detail" @click="openPlanTime(4)" v-else>
						{{ form.planStartTime4 }}
					</view>
				</u-form-item>
				<u-form-item label="制梁台座编号" prop="name" label-width="200">
					<u-input :disabled="!isShowDetail" v-model="form.name" placeholder="请输入制梁台座编号" />
				</u-form-item>
				<u-form-item label="工序负责人" prop="name" label-width="200">
					<u-input :disabled="!isShowDetail" v-model="form.name" placeholder="请输入工序负责人" />
				</u-form-item>
			</u-form>
		</view>
		
		<!-- 计划开始时间 -->
		<u-picker v-model="showPlanStart" mode="time" @confirm="confirmPlanStart" :params="timeParams"></u-picker>
		<!-- 计划结束时间 -->
		<u-picker v-model="showPlanStart2" mode="time" @confirm="confirmPlanStart2" :params="timeParams"></u-picker>
		<!-- 实际开始时间 -->
		<u-picker v-model="showPlanStart3" mode="time" @confirm="confirmPlanStart3" :params="timeParams"></u-picker>
		<!-- 实际结束时间 -->
		<u-picker v-model="showPlanStart4" mode="time" @confirm="confirmPlanStart4" :params="timeParams"></u-picker>
			
		<view class="submitMakeBeam" @click="submit" v-if="isShowDetail">
			确定
		</view>
		<view class="submitMakeBeam" @click="isShowDetail = true" v-else>
			更新进度
		</view>
		
	</view>
</template>

<script>
	import multiplePicker from "@/components/multiple-picker/multiple-picker";
	export default {
		components: {
			multiplePicker
		},
		data() {
			return {
				timeParams: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				isShowDetail: false,
				showType: false,
				showPlanStart: false,
				showPlanStart2: false,
				showPlanStart3: false,
				showPlanStart4: false,
				list: [{
						value: '1',
						label: '江'
					},
					{
						value: '2',
						label: '湖'
					}
				],
				form: {
					planStartTime: "",
					planStartTime2: "",
					planStartTime3: "",
					planStartTime4: "",
					selectValue: '', //回显输入框
					selectIndex: [], //回显下拉框
				},
				selectMultiple: {
					show: false,
					index: [],
					columns: [{
							label: '测试1',
							value: '1',
						},
						{
							label: '测试2',
							value: '2',
						},
						{
							label: '测试3',
							value: '3',
						},
						{
							label: '测试4',
							value: '4',
						},
						{
							label: '测试5',
							value: '5',
						},
						{
							label: '测试6',
							value: '6',
						},
						{
							label: '测试7',
							value: '7',
						}
					],
				},
			};
		},
		methods: {
			// 确认选中时间
			confirmPlanStart(e) {
				//此处实现选择器值的接收
				this.form.planStartTime = e.year + '-' + e.month + '-' +
					e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			confirmPlanStart2(e) {
				//此处实现选择器值的接收
				this.form.planStartTime2 = e.year + '-' + e.month + '-' +
					e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			confirmPlanStart3(e) {
				//此处实现选择器值的接收
				this.form.planStartTime3 = e.year + '-' + e.month + '-' +
					e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			confirmPlanStart4(e) {
				//此处实现选择器值的接收
				this.form.planStartTime4 = e.year + '-' + e.month + '-' +
					e.day + ' ' + e.hour + ':' + e.minute + ':' + e.second
			},
			
			
			openPlanTime(type) {
				if (!this.isShowDetail) {
					console.log("详情状态无法编辑")
					return
				}

				if (type === 1) {
					this.showPlanStart = true
				}
				if (type === 2) {
					this.showPlanStart2 = true
				}
				if (type === 3) {
					this.showPlanStart3 = true
				}
				if (type === 4) {
					this.showPlanStart4 = true
				}
			},
			returnBack() {
				console.log("返回")
				uni.navigateBack()
			},
			confirm(e) {
				console.log("下拉确认", e)
				this.form.type = e[0].label
			},
			openTypeSelect() {
				this.showType = true
			},
			handleMultiple(val) {
				console.log(val);

				this.selectMultiple.index = val || [];
				this.selectMultiple.show = true;
			},
			confirmMultiple(e) {
				console.log(e);

				let temp = [];
				e.selected.forEach(item => {
					temp.push(item.label);
				})
				this.form.selectValue = temp.toString();
				this.form.selectIndex = e.value;
				this.selectMultiple.show = false;
			},
			changeMultiple(e) {
				console.log("选择改变", e);
			},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						this.isShowDetail = false
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {}
	};
</script>

<style lang="scss" scoped>
	.headerBack {
		position: absolute;
		left: 5%;
		top: 5%;
	}

	.makeBeamForm {
		padding: 0 38rpx;

		.input-text {
			color: rgb(192, 196, 204);
		}
	}

	.mustInput {
		color: red;
		position: absolute;
		top: 26rpx;
		left: -20rpx;
	}

	.submitMakeBeam {
		position: fixed;
		bottom: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 665rpx;
		height: 69rpx;
		margin-left: 40rpx;
		color: #fff;
		background: #5181F6;
		border-radius: 142rpx;
	}

	.form {
		width: 100%;
		padding: 40rpx 30rpx;
		box-sizing: border-box;

		.item {
			width: 100%;
			padding: 20rpx 0;

			.select {
				width: 100%;
				border: 1px solid #dadbde;
				padding-top: 6px;
				padding-bottom: 6px;
				padding-left: 9px;
				padding-right: 9px;
				border-radius: 4px;
				font-size: 30rpx;
				box-sizing: border-box;
				color: #CCCCCC;
				line-height: 52rpx;

				&.selected {
					color: black;
				}
			}
		}
	}
</style>