<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="save-beam-title">
			存梁台座编号: 1#-1
		</view>

		<view class="current-save-beam">
			<view class="list-title">
				当前存梁
			</view>
			<view class="list-item" v-for="item in 2">
				<view class="item-row">
					<view class="row-title">
						梁号:
					</view>
					<view class="row-text">
						1#-1
					</view>
				</view>
				<view class="item-row">
					<view class="row-title">
						所属桥段:
					</view>
					<view class="row-text">
						新市枢纽D匝道1号桥
					</view>
				</view>
				<view class="item-row">
					<view class="row-title">
						梁板类型:
					</view>
					<view class="row-text">
						箱梁
					</view>
				</view>
			</view>
		</view>
		<view class="current-save-beam">
			<view class="list-title">
				历史存梁
			</view>
			<view class="list-item" v-for="item in 2">
				<view class="item-row">
					<view class="row-title">
						梁号:
					</view>
					<view class="row-text">
						1#-1
					</view>
				</view>
				<view class="item-row">
					<view class="row-title">
						所属桥段:
					</view>
					<view class="row-text">
						新市枢纽D匝道1号桥
					</view>
				</view>
				<view class="item-row">
					<view class="row-title">
						梁板类型:
					</view>
					<view class="row-text">
						箱梁
					</view>
				</view>
			</view>
		</view>
		<view class="addMakeBeam" @click="toAddSaveBeam">
			变更存梁
		</view>

		<!-- 新增 存梁台座 输入框 -->
		<u-popup v-model="addSaveBeamShow" :closeable="true" mode="center" border-radius="14" @close="changeSaveBeamClose">
			<view class="dialog-content">
				<view class="dialog-title">
					变更存梁
				</view>
				<view class="input-form">
					<u-form :model="form">
						<u-form-item label="梁号" prop="name" label-width="100">
							<span class="mustInput">*</span>
							<view :class="['select', form.selectValue ? 'selected' : '']"
								@tap="handleMultiple(form.selectIndex)">
								{{form.selectValue || '请选择梁号'}}
							</view>
						</u-form-item>
					</u-form>
				</view>
				<view class="dialog-tool">
					<view class="cancel-btn" @click="addSaveBeamShow = false">
						取消
					</view>
					<view class="submit-btn" @click="submitSaveBeam">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<multiple-picker :selectMax="2" title="请选择" :show="selectMultiple.show" :columns="selectMultiple.columns"
			:defaultIndex="selectMultiple.index" @confirm="confirmMultiple" @cancel="selectMultiple.show = false"
			@change="changeMultiple"></multiple-picker>
	</view>
</template>

<script>
	import multiplePicker from "@/components/multiple-picker/multiple-picker";
	import headers from "@/components/headers/headers.vue"
	export default {
		components: {
			headers,
			multiplePicker
		},
		data() {
			return {
				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',
						}
					],
				},
				form: {
					selectValue: '', //回显输入框
					selectIndex: [], //回显下拉框
				},
				makeBeamList: [],
				addSaveBeamShow: false,
			};
		},
		mounted() {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			this.getMakeBeamList()
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕

		methods: {
			changeSaveBeamClose() {
				this.form = {
					selectValue: '', //回显输入框
					selectIndex: [], //回显下拉框
				}
			},
			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);
			},
			submitSaveBeam() {
				if (this.form.name == '') {
					uni.showToast({
						title: '请输入编号',
						icon: 'error',
					});
				} else {
					console.log("提交存梁台座", this.form.name)
					this.addSaveBeamShow = false
				}

			},
			toAddSaveBeam() {
				console.log("去新增存梁台座")
				this.addSaveBeamShow = true
			},
			returnBack() {
				console.log("返回")
				uni.navigateBack()
			},
			//获取制梁台座列表
			getMakeBeamList() {
				this.sendRequest({
					url: "xmgl/smartBeamFieldMakeBeamPedestal/list",
					data: {
						projectSn: this.projectDetail.projectSn
					},
					method: "get",
					success: res => {
						console.log("制梁台座列表", res)
						this.makeBeamList = res.result
					}
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.save-beam-title {
		padding: 0 40rpx;
		margin-top: 30rpx;
		font-size: 36rpx;
	}

	.current-save-beam {
		padding: 0 40rpx;
		padding-bottom: 50rpx;
		border-bottom: 2px solid #E6E6E6;

		.list-title {
			font-weight: bold;
			margin-top: 50rpx;
		}

		.list-item {
			font-size: 27rpx;

			.item-row {
				display: flex;
				margin-top: 40rpx;

				.row-title {
					width: 300rpx;
					color: #8C8C8C;
				}

				.row-text {
					color: #333333;
				}
			}
		}
	}




	.noData {
		text-align: center;
		padding: 120rpx 0;
		color: #999;
	}

	.headerBack {
		position: absolute;
		left: 5%;
		top: 5%;
	}

	.dialog-content {
		width: 680rpx;
		padding: 30rpx;
		padding-bottom: 50rpx;
		position: relative;

		.dialog-title {
			border-left: 6rpx solid #5181F6;
			padding-left: 20rpx;
		}

		.input-form {
			margin-top: 40rpx;
			margin-left: 30rpx;
			.select {
				width: 100%;
				border: 1px solid #dadbde;
				padding-top: 6px;
				padding-bottom: 6px;
				padding-left: 9px;
				padding-right: 9px;
				border-radius: 4px;
				font-size: 15px;
				box-sizing: border-box;
				color: #CCCCCC;
				line-height: 26px;
				
				&.selected {
					color: black;
				}
			}
		}

		.dialog-tool {
			display: flex;
			width: 400rpx;
			margin: 0 auto;
			margin-top: 50rpx;

			.submit-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 165rpx;
				height: 69rpx;
				margin-left: 50rpx;
				color: #FFFFFF;
				font-size: 27rpx;
				background: #5181F6;
				border-radius: 42rpx;
			}

			.cancel-btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 165rpx;
				height: 69rpx;
				font-size: 27rpx;
				border: 1px solid #8C8C8C;
				border-radius: 42rpx;
			}
		}
	}

	.mustInput {
		color: red;
		position: absolute;
		top: 26rpx;
		left: -20rpx;
	}
	.addMakeBeam {
		position: fixed;
		display: flex;
		justify-content: center;
		align-items: center;
		bottom: 20rpx;
		width: 665rpx;
		height: 69rpx;
		margin-left: 40rpx;
		color: #FFFFFF;
		font-size: 27rpx;
		background: #5181F6;
		border-radius: 142rpx;
	}
</style>