<template>
	<view class="fullHeight">
		<headers :showBack="true">
			<view class="headerName">
				{{ pageTitle }}
			</view>
		</headers>
		<view class="formBox">
			<form @submit="formSubmit">

				<view class="uni-form-item">
					<view class="uni-form-label">
						<text class="star">*</text>
						设备名称
					</view>
					<!-- enterpriseId -->
					<view class="uni-form-input">
						<picker :disabled="devForm.uploadType == 1" @change="bindPickerChange" :value="devForm.devIndex" :range="environmentDevList"
							range-key="devName">
							<view class="uni-input uni-select cl" v-if="devForm.devIndex == null">
								请选择
								<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
							</view>
							<view class="uni-input uni-select" v-else>{{ environmentDevList[devForm.devIndex].devName }}
								<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-label">
						<text class="star">*</text>
						设备编号
					</view>
					<view class="uni-form-input disabled">
						<input disabled class="uni-input" placeholder-class="cl" name="devSn" :value="devForm.devSn"
							placeholder="请输入" />
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-label">
						<text class="star">*</text>
						采集类型
					</view>
					<!-- enterpriseId -->
					<view class="uni-form-input">
						<picker disabled @change="bindPickerChange2" :value="devForm.uploadIndex" :range="uploadTypeList"
							range-key="uploadTypeName">
							<view class="uni-input uni-select cl" v-if="devForm.uploadIndex == null">
								请选择
								<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
							</view>
							<view class="uni-input uni-select" v-else>{{ uploadTypeList[devForm.uploadIndex].uploadTypeName }}
								<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="uni-form-item" >
					<view class="uni-form-label">
						<text class="star">*</text>
						采集时间
					</view>
					<view class="uni-form-input">
						<!-- <view class="uni-input def" :class="{text:form.reserveStartTime}"
							@click="showTime=true;key='reserveStartTime'">
							{{ form.reserveStartTime || '请选择' }}
						</view> -->
						<uni-datetime-picker :disabled="devForm.uploadType == 1" class="uni-input def w-form-input" date-format="yyyy-MM-dd HH:mm:ss" :border="false" type="datetime" ref="uniDateTime"
				:clear-icon="false" v-model="devForm.receiveTime" />
				<!-- @change="confirm" -->
					</view>
				</view>
				<view class="uni-form-item">
					<view class="uni-form-label">
						<text class="star">*</text>
						监测点位数量
					</view>
					<!-- enterpriseId -->
					<view class="uni-form-input">
						<picker disabled @change="bindPickerChange3" :value="devForm.pointIndex" :range="pointList"
							range-key="lable">
							<view class="uni-input uni-select cl" v-if="devForm.pointIndex==null">
								请选择
								<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
							</view>
							<view class="uni-input uni-select" v-else>{{ pointList[devForm.pointIndex].lable }}
								<image class="icon-down" src="/static/icon-down-black.png" mode=""></image>
							</view>
						</picker>
					</view>
				</view>
				<view class="point_boxs">
					<view class="uni-form-item point_box" v-for="(item, index) in devForm.pointList" :key="index">
						<view class="uni-form-item">
							<view class="uni-form-label">
								序号
							</view>
							<view>{{ item.pointNo }}</view>
						</view>
						<view class="uni-form-item">
							<view class="uni-form-label">
								监测点名称
							</view>
							<view class="uni-form-input disabled">
								<input disabled class="uni-input" placeholder-class="cl" name="pointName" v-model="item.pointName"
									placeholder="请输入" />
							</view>
						</view>
						<view class="uni-form-item">
							<view class="uni-form-label">
								温度
							</view>
							<view class="uni-form-input" :class="{'disabled': devForm.uploadType == 1}">
								<input :disabled="devForm.uploadType == 1" class="uni-input" type="number" oninput="if(value.length>5)value=value.slice(0,5)" placeholder-class="cl" name="temperature" v-model="item.temperature"
									placeholder="请输入" />℃
							</view>
						</view>
					</view>
				</view>
				<button v-if="checkBtnPermission({key: 'add', menuPath: '/project/concreteMonitoring/devManageSecond'})" v-show="isAdd" form-type="submit" type="primary" class="btn submitBtn big">保存</button>
				<button v-if="checkBtnPermission({key: 'edit', menuPath: '/project/concreteMonitoring/devManageSecond'})&&devForm.uploadType != 1" v-show="!isAdd" form-type="submit" type="primary" class="btn submitBtn big">保存</button>
				<button v-if="checkBtnPermission({key: 'delete', menuPath: '/project/concreteMonitoring/devManageSecond'})&&devForm.uploadType != 1" class="btn deleteBtn big" v-show="!isAdd" @click="deleteFn">删除</button>
			</form>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	export default {
		data() {
			return {
				pageTitle: '新增',
				selectIndex: null,
				colorList: ['蓝色', '绿色', '黄色', '白色', '黑色'],
				carTypeList: [],
				carTypeIndex: null,
				driverNameList: [],
				driverNameIndex: null,
				form: {
					carModuleType: 1,
					carColor: "",
					carNumber: "",
					carPhotosUrl: [],
					jsz: [],
					xsz: [],
					jqx: [],
					otherProve: [],
					carType: "",
					driverName: "",
					driverTelephone: "",
					driverWorkerName: "",
					outsideDriverIdCard: "",
					isBlack: 0,
					projectSn: '',
					entryAndExitPermit: 0
				},
				personList: [],
				projectDetail: {},
				isAdd: true,
				baoList: [],
				bjIndex: null,
				showTime: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true
				},
				key: '',
				selectIndexQy: null,
				qyList: [],
				cityIdArr: [],
				isNation: false,

				environmentDevList: [],
				devForm: {
					devIndex: null,
					devName: "",
					devSn: "",
					pointNum: 8,
					pointIndex: 0,
					pointList: [],
					uploadIndex: 1,
					uploadType: 2,
                	receiveTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
				},
				uploadTypeList: [
					{
						id: 1,
						uploadTypeName: "自动采集",
					},
					{
						id: 2,
						uploadTypeName: "手动采集",
					},
				],
				pointList: [{
					lable: "8",
					value: 8,
				},{
					lable: "16",
					value: 16,
				},{
					lable: "32",
					value: 32,
				},{
					lable: "64",
					value: 64,
				},{
					lable: "128",
					value: 128,
				},{
					lable: "256",
					value: 256,
				}],
			}
		},
		onLoad(options) {
			this.projectDetail = JSON.parse(uni.getStorageSync('projectDetail'))
			this.getEnvironmentDev(options)
		},

		methods: {
			initDevice() {
				this.devForm.pointList = [];
				this.devForm = {
					devIndex: null,
					devName: "",
					devSn: "",
					pointNum: 8,
					pointIndex: 0,
					pointList: [],
					uploadIndex: 1,
					uploadType: 2,
					receiveTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss"),
				};
				//渲染点位
				for (let i = 0; i < this.devForm.pointNum; i++) {
					let obj = { pointName: "", pointNo: i + 1, temperature: "" };
					this.devForm.pointList.push(obj);
				}
			},
			//获取设备
			getEnvironmentDev(options) {
				var that = this
				this.sendRequest({
					url: "xmgl/concreteMonitorDev/selectConcreteMonitorDevList",
					data: {
						projectSn: this.projectDetail.projectSn
					},
					method: "POST",
					success(res) {
						that.environmentDevList = res.result;
						console.log(options.devInfo)
						const devInfo = JSON.parse(options.devInfo);
						if (devInfo) {
							that.isAdd = false
							that.pageTitle = '历史数据详情'
							console.log(JSON.parse(options.devInfo))
							const devIndex = that.environmentDevList.findIndex(item => item.devSn == devInfo.devSn);
							const pointIndex = that.pointList.findIndex(item => item.value == devInfo.pointNum);
							const uploadIndex = that.uploadTypeList.findIndex(item => item.id == devInfo.uploadType);
							that.devForm = {
								...devInfo,
								pointList: devInfo.dataList,
								devIndex: devIndex == -1 ? null : devIndex,
								pointIndex: pointIndex == -1 ? null : pointIndex,
								uploadIndex: uploadIndex == -1 ? null : uploadIndex,
							}
						}else {
							that.initDevice()
						}
					}
				})
			},
			deleteFn() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定删除该数据吗？',
					success(res) {
						if (res.confirm) {
							that.sendRequest({
								url: 'xmgl/concreteMonitorCurrentData/deleteByBaotou',
								data: {
									id: that.devForm.id,
									devSn: that.devForm.devSn,
                        			receiveTime: that.devForm.receiveTime,
								},
								method: "POST",
								success(res) {
									uni.showToast({
										title: '删除成功！'
									})
									uni.navigateBack()
								}
							})
						}
					}
				})
			},
			getDevDetail(id) {
				var that = this
				this.sendRequest({
					url: "xmgl/concreteMonitorDev/queryById",
					data: {
						projectSn: this.projectDetail.projectSn,
						id: id
					},
					method: "POST",
					success(res) {
						let val = res.result;
						that.devForm.devSn = val.devSn;
						const pointIndex = that.pointList.findIndex(item => item.value == val.pointNum);
						that.devForm.pointIndex = pointIndex == -1 ? null : pointIndex;
						that.devForm.pointNum = val.pointNum;
						that.devForm.pointList = val.pointList;
					}
				})
			},
			bindPickerChange: function(e) {
				this.devForm.devIndex = e.detail.value;
				this.devForm.devSn = this.environmentDevList[e.detail.value].devSn;
				this.devForm.devName = this.environmentDevList[e.detail.value].devName;
				this.getDevDetail(this.environmentDevList[e.detail.value].id);
			},
			bindPickerChange2: function(e) {
				this.devForm.uploadIndex = e.detail.value;
				this.devForm.uploadType = this.uploadTypeList[e.detail.value].id;
			},
			bindPickerChange3: function(e) {
				this.devForm.pointIndex = e.detail.value;
				this.devForm.pointNum = this.pointList[e.detail.value].value;
				this.devForm.pointList = [];
				for (let i = 0; i < this.pointList[e.detail.value].value; i++) {
					let obj = { pointName: "", pointNo: i + 1, temperature: "" };
					this.devForm.pointList.push(obj);
				}
			},
			formSubmit(e) {
				var that = this
				if (this.devForm.devIndex == null) {
					uni.showToast({
						title: '请选择设备名称',
						icon: 'none'
					})
					return false;
				}
				if (this.devForm.uploadIndex == null) {
					uni.showToast({
						title: '请选择采集类型',
						icon: 'none'
					})
					return false;
				}
				let params = JSON.parse(JSON.stringify(this.devForm));
				params.projectSn = this.projectDetail.projectSn;
				params.list = params.pointList.map((item) => {
					return {
						...item,
						receiveTime: this.devForm.receiveTime,
					};
				});
				var url = 'xmgl/concreteMonitorCurrentData/manual/edit'
				if (this.isAdd) {
					url = 'xmgl/concreteMonitorCurrentData/manual/add'
				} else {
					params.id = this.devForm.id
				}
				
				console.log(params, "params");
				this.sendRequest({
					url: url,
					data: params,
					method: "POST",
					success(res) {
						uni.showToast({
							title: '保存成功！'
						})
						uni.navigateBack()
					}

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	uni-picker[disabled],
	.disabled {
		// background-color: #F5F7FA;
		// border-color: #E4E7ED;
		// color: #A1A4B0;
		opacity: 0.4;
		border-radius: 32rpx;
	}
	:deep(.point_boxs) {
		border-top: #c1c1c1 1px solid;
		padding-top: 30rpx;
		margin-top: 10rpx;
		.point_box {
			.uni-form-item:nth-child(1) {
				margin-right: 20rpx;
				.uni-form-label {
					width: 80rpx !important;
				}
				.uni-form-input {
					width: calc(100% - 80rpx) !important;
				}
			}
			.uni-form-item:nth-child(2) {
				margin-right: 10rpx;
				.uni-form-label {
					width: 160rpx !important;
				}
				.uni-form-input {
					width: calc(100% - 160rpx) !important;
				}
			}
			.uni-form-item:last-child {
				margin-left: 10rpx;
				.uni-form-label {
					width: 100rpx !important;
				}
				.uni-form-input {
					width: calc(100% - 100rpx) !important;
				}
			}
			.uni-form-input {
				display: flex;
				align-items: center;
			}
		}
	}
	:deep(.uni-date__x-input) {
		height: initial;
		line-height: initial;
		// font-size: 28rpx;
	}
	.addImgBox {
		border: 1px solid rgba(42, 43, 91, 0.1);
		background-color: #f6f5f8;
		width: 120rpx;
		height: 120rpx;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 20rpx;
		font-size: 24rpx;

		.icon-add {
			width: 36rpx;
			height: 36rpx;
		}
	}

	.uni-input {
		&.def {
			color: #ddd;
		}

		&.text {
			color: #372D66;
		}
	}

	.imgBox {
		width: 120rpx;
		height: 120rpx;
		display: inline-flex;
		position: relative;
		margin-right: 30rpx;
		margin-bottom: 15rpx;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

		.deleteImg {
			position: absolute;
			right: -20rpx;
			top: -20rpx;
		}
	}

	.checkList {
		background-color: #fff;


		.scroll-Y {
			height: 600rpx;
		}

		.header {
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid #ddd;
			padding: 20rpx;

			.title {
				font-weight: 500;
			}

			.ok {
				color: $uni-color-primary;
			}
		}


	}

	.checkItem {
		display: flex;
		padding: 20rpx;

		.name {
			flex: 1;
			margin-right: 20rpx;
		}

		.check {}
	}
</style>