<template>
	<view>
		<view class="fixedheader">
			<headers :showBack="true">
				<view class="headerName">
					{{pageTitle}}
				</view>
			</headers>
		</view>
		<view class="content" :style="{paddingTop: mobileTopHeight + 50 + 'px'}">
			<div class="card">
				<view class="type flex">
					<view class="name">巡检点名称：</view>
					<view class="value">{{dataInfo.checkingPointName}}</view>
				</view>
				<view class="type flex">
					<view class="name">巡检点位置：</view>
					<view class="value">{{dataInfo.position}}</view>
				</view>
				<view class="type flex">
					<view class="name large">最低巡检时长：</view>
					<view class="value">{{dataInfo.minInspectTime}}分钟</view>
				</view>
				<view class="type flex">
					<view class="name">巡检人：</view>
					<view class="value">{{dataInfo.checkingPointUserName || '-'}}</view>
				</view>
				<view class="type flex">
					<view class="name">巡检通知人：</view>
					<view class="value">{{dataInfo.noticeUserNames || '-'}}</view>
				</view>
				<view class="i_result">巡检结果</view>
			</div>
			<div class="card" style="padding-bottom: 16rpx;">
				<view class="type flex">
					<view class="name">巡检点状态：</view>
					<view class="value">
						<uni-tag :inverted="true" :text="statusStr[dataInfo.status]" :type="statusStyle[dataInfo.status]" />
					</view>
				</view>
				<view class="type flex">
					<view class="name large">巡检时间：</view>
					<view class="value">{{dataInfo.createDate}}</view>
				</view>
				<view class="type flex">
					<view class="name">异常详情：</view>
				</view>
				<view class="text_area">{{dataInfo.alarmDetails || '-'}}</view>
				<view class="type flex">
					<view class="name">异常巡检图片：</view>
				</view>
				<view class="img_area">
					<img v-for="item in imgList" :src="item" alt="">
					<text v-if="!imgList.length">-</text>
				</view>
				<view v-for="(item, index) in templateList" :key="index">
					<view class="type flex">
						<view class="name">{{ item.title }}</view>
					</view>
					<view class="text_area">{{item.value || '-'}}</view>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				standOptions: [30, 50, 100, 200, 300],
				mobileTopHeight: 0,
				projectSn: '',
				userInfo: {},
				pageTitle: "查看详情",
				dataInfo: {},
				statusStr: ['', '正常', '异常', '未巡检'],
				statusStyle: ['', 'success', 'error', 'primary']
			}
		},
		onLoad(option) {
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			console.info(option, 'opetion')
			// 编辑
			if(option.detail) {
				this.dataInfo = JSON.parse(option.detail);
				console.info(this.dataInfo, 'dataInfo')
			}
		},
		mounted() {
			var that = this
			uni.getSystemInfo({
				success(res) {
					that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
					uni.setStorageSync('systemInfo',res)
					console.log(res)
				}
			})
			console.log('this.mobileTopHeight',this.mobileTopHeight)
		},
		computed: {
			imgList() {
				const list = JSON.parse(this.dataInfo.alarmImage) || []
				const arr = []
				list.forEach(item => {
					arr.push(this.url_config+'image/'+item.url)
				})
				return arr
			},
			templateList() {
				console.info(JSON.parse(this.dataInfo.template) || [], '--------')
				return JSON.parse(this.dataInfo.template) || []
			}
		},
		methods: {
		}
	}
</script>

<style lang="less">
	.fixedheader{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
		.headerName{
			z-index: 1;
		}
		/deep/ .headerBox {
			background-color: #5181F6;
			color: white;
			.uni-icons{
				color: white !important;
			}
		}
	}
	.flex {
		display: flex;
		align-items: center;
	}
	
	.flex2 {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.flex3 {
		display: flex;
	}
	
	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 20px 30rpx;
	}
	
	.type {
		font-size: 30rpx;
		line-height: 80rpx;
		margin-bottom: 8px;
		/* border-bottom: 1px solid rgba(194, 194, 194, 0.2); */
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.type .name {
		margin-right: 6px;
		width: 185rpx;
		text-align: left;
		white-space: nowrap;
		color: rgba(16, 16, 16, 0.58);
		&.large {
			width: 300rpx;
		}
		&.large-2 {
			width: 240rpx;
		}
	}
	.type .value {
		text-align: right;
		color: #000;
		flex: 1;
	}
	.uni-input {
		line-height: 32px;
	}
	
	.textarea {
		width: calc(79% - 32px);
		border-radius: 5px;
		border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 8px 15px;
		box-sizing: border-box;
		height: 50px;
	}
	
	.inpuStyle {
		width: calc(80% - 35px);
		border-radius: 5px;
		// border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 8px 15px;
		box-sizing: border-box;
		height: 35px;
		color: #000;
	}
	.areaStyle {
		// width: calc(80% - 35px);
		flex: 1;
		color: #000;
		line-height: 35rpx;
		height: 35px;
		display: flex;
		align-items: center;
		text-align: right;
	}
	.dy_form {
		display: flex;
		flex-direction: column;
		width: 100%;
		.dy_head {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 32rpx;
			.head_left {
				display: flex;
				align-items: center;
				.ic {
					width: 48rpx;
					height: 48rpx;
					margin-right: 8rpx;
				}
				.title {
					color: rgba(16, 16, 16, 1);
					font-size: 28rpx;
					font-weight: 600;
				}
			}
			.add_btn {
				margin: 0;
			}
		}
		.dy_content {
			display: flex;
			flex-direction: column;
			margin-bottom: 40rpx;
			.c_colum {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: solid 1px rgba(187, 187, 187, 0.14);
				padding: 0 0 16rpx 16rpx;
				.text {
					color: rgba(16, 16, 16, 1);
					font-size: 32rpx;
				}
				.del_btn {
					margin: 0;
				}
			}
			.c_body {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 32rpx;
				.c_input {
					flex: 1;
					border: 2rpx solid rgba(220, 224, 231, 0.4);
					border-radius: 6rpx;
					height: 72rpx;
					padding: 0 12rpx;
					margin-right: 52rpx;
				}
			}
		}
	}
	.save-btn {
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	.card {
		width: 100%;
		padding: 16rpx 24rpx 0;
		box-sizing: border-box;
		box-shadow: 0 0 10px rgba(194, 194, 194, 0.5);
		border-radius: 4px;
		margin-bottom: 15px;
		color: rgba(51, 51, 51, 1);
		font-size: 32rpx;
	}
	.i_result {
		color: rgba(81, 129, 246, 1);
		font-size: 32rpx;
		padding: 16rpx;
		border-bottom: 4rpx solid rgba(81, 129, 246, 1);
		display: inline-block;
		position: relative;
		transform: translate(-50%, 0);
		left: 50%;
	}
	.text_area {
		width: 100%;
		min-height: 200rpx;
		line-height: 20px;
		border-radius: 3px;
		background-color: rgba(46, 50, 56, 0.05);
		color: rgba(16, 16, 16, 1);
		font-size: 28rpx;
		border: 1px solid rgba(81, 129, 246, 0.31);
		padding: 20rpx;
	}
	.img_area {
		width: 100%;
		display: grid;
		gap: 28rpx;
		grid-template-columns: repeat(2, 1fr);
		img {
			height: 216rpx;
		}
	}
</style>