<template>
	<div class="dangerDetail">
		<headNav
		@backPage="backPage"
		:title="'隐患详情'"></headNav>
		
		<div class="checkResult">
			<div class="content">
				 <div class="item">
						<div class="label">
							检查时间
						</div>
						<div class="mr10">
							12123
						</div>
					</div>
				 <div class="item">
						<div class="label">
							检查结果
						</div>
						<div class="mr10">
							<span v-if="dataAnswer.checkResult === '1'" class="FontColorSuccess fb">正常</span>
							<span v-else class="FontColorError fb">异常</span>
						</div>
					</div>
					<div class="item">
						<div class="label">
							检查情况
						</div>
						<div class="mr10">123123	</div>
					</div>
					<div class="item">
						<div class="label">
							现场图片
						</div>
						<div class="mr10">无</div>
					</div>
			</div>
		</div>
		<!-- 检查结果 -->
		<!-- <div class="checkResult">

			<div class="content">
				<div class="deviceName fb FontColorNormal">
					{{ dataQuestion.examineProname }}
				</div>
				
				<div> -->
					<!-- <div class="item">
						<div class="label">
							检查类型
						</div>
						<div>
							<span v-if="dataQuestion.examineType === '1'">消防许可及验收备案</span>
							<span v-else-if="dataQuestion.examineType === '2'">消防安全管理</span>
							<span v-else-if="dataQuestion.examineType === '3'">建筑防火</span>
							<span v-else-if="dataQuestion.examineType === '4'">安全疏散</span>
							<span v-else-if="dataQuestion.examineType === '5'">消防控制室</span>
							<span v-else-if="dataQuestion.examineType === '6'">消防设施器材——火灾自动报警系统</span>
							<span v-else-if="dataQuestion.examineType === '7'">消防设施器材——消防给水设施</span>
							<span v-else-if="dataQuestion.examineType === '8'">消防设施器材——自动灭火系统</span>
							<span v-else-if="dataQuestion.examineType === '9'">消防设施器材——其他设施器材</span>
							<span v-else-if="dataQuestion.examineType === '10'">其它消防安全管理</span>
							<span v-else-if="dataQuestion.examineType === '11'">备注</span>
						</div>
					</div>
					<div class="item">
						<div class="label">
							检查时间
						</div>
						<div>
							{{ dataQuestion.createdTime }}
						</div>
					</div>
					<div class="item">
						<div class="label">
							是否涉及
						</div>
						<div>
							{{ dataAnswer.answerOption }}
						</div>
					</div>
					<div v-if="dataQuestion.extraExamineTitle">
						<div v-for="(item, index) in dataQuestion.extraExamineTitle.split(',')" :key="index">
							<div class="item" style="margin-top: 0;">
								<div class="label">
									附属检查
								</div>
								<div>
									{{ item }}
								</div>
							</div>
							<div class="item">
								<div class="label">
									{{ dataQuestion.extraExamineContent.split(',')[index] }}
								</div>
								<div v-if="dataAnswer.checkSite">
									{{ dataAnswer.checkSite.split(',')[index] }}
								</div>
							</div>
						</div>
					</div> -->
				<!-- </div> -->
				
				<!-- <div class="checkRes"> -->
					
					<!-- <div v-if="dataAnswer.checkCaseConts">
						<div v-for="(item__, index__) in dataAnswer.checkCaseConts.split('@')" :key="index__">
							<div class="mt10">
								<div class="df jfsb aic">
									<div>
										检查情况 ({{ index__ + 1 }})
									</div>
								</div>
								<div class="mt10">
									<van-field
									  rows="4"
									  autosize
									  border
									  :disabled="true"
									  class="textArea"
									  :value="item__"
									  type="textarea"
									  placeholder="请输入情况说明"
									/>
								</div>
							</div>
							
							<div class="mt10 imgItem" v-if="dataAnswer.checkCaseImgs">
								<van-image
								  v-for="(item___, index___) in dataAnswer.checkCaseImgs.split('@')[index__].split(',')"
								  @click="preview(item___, 0)"
								  :src="getImgSrc(item___, 0)"
								  :key="index___"
								/>
							</div>
						</div>
					</div> -->
				
				<!-- </div>
				
				<div>
					<div class="item">
						<div class="label">
							检查结果
						</div>
						<div class="mr10">
							<span v-if="dataAnswer.checkResult === '1'" class="FontColorSuccess fb">正常</span>
							<span v-else class="FontColorError fb">异常</span>
						</div>
					</div>
				</div>
				
				<div class="checkExplain">
					<div class="funExplain">
						<van-cell
						@click="funExplain(dataQuestion.id)" 
						is-link 
						title="检查方法说明" 
						value="查看"/>
					</div>
					<div class="explainContent">
						<div v-html="dataQuestion.trueExamineFunState"></div>
					</div>
				</div>
				
				<div class="standExplain">
					<div class="funExplain">
						<van-cell @click="stepExplain(dataQuestion.id)" is-link title="设置要求" value="查看"/>
					</div>
					<div class="explainContent">
						<div v-html="dataQuestion.examineNormState"></div>
					</div>
				</div>
				
				<div class="standExplain">
					<div class="funExplain">
						<van-cell @click="commonQes(dataQuestion.id)" is-link title="常见问题" value="查看"/>
					</div>
				</div>
			</div>
		</div>
		
		<div class="showReview" v-if="isReview">
			<div class="FontColorNormal fz14 pl15">
				复查情况
			</div>
			<div class="tips">
				<div class="FontColorInfo">
					复查共：
					<span>{{ reviewTotalNum }}</span>
					项
				</div>
				<div class="df">
					<div class="FontColorOther mr10">
						已完成：
						<span>{{ reviewCheckedNum }}</span>
						项
					</div>
					<div class="FontColorWarn">
						未检查：
						<span>{{ reviewTotalNum - reviewCheckedNum }}</span>
						项
					</div>
				</div>
			</div>
			<div class="reviewSituation">
				<div class="df mt10 jfsb">
					<div class="FontColorInfo fz13">
						改正复查：
					</div>
					<div class="ml10">
						<van-radio-group v-model="isCorrection" direction="horizontal">
						  <van-radio icon-size="0.4rem" name="1">已改正</van-radio>
						  <van-radio icon-size="0.4rem" name="2">未改正</van-radio>
						</van-radio-group>
					</div>
				</div>
				<div class="df mt10">
					<div class="FontColorInfo fz13 checkSay">
						检查说明：
						<div class="textArea">
							<van-field
							  rows="4"
							  autosize
							  v-model="checkSay"
							  type="textarea"
							  placeholder="请输入情况说明"
							/>
						</div>
					</div>
				</div>

				<div class="mt10">
					<van-uploader v-model="fileList" multiple :max-count="3" />
				</div>
			</div>
			
			<div class="reviewBtn">
				<van-button v-if="!lastItem" type="info" @click="nextStep">下一项</van-button>
				<van-button v-else type="info" @click="nextStep">完成检查</van-button>
			</div>
			
		</div> -->
		
		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
	</div>
</template>

<script>
	import { ImagePreview } from 'vant'
	import headNav from '@/components/headNav.vue'
	import mask_overLay from '@/components/overLay_xy.vue'
	import { get, post, postImg, imgBaseUrl } from '@/utils/http.js'
	
	export default {
		name: 'dangerDetail',
		inject: ["reload"],
		components: {
			headNav,
			'v-mask': mask_overLay
		},
		data() {
			return {
				isInvolve: '1',
				checkResult: '2',
				isReview: false,
				isCorrection: '',
				checkSay:'',
				showOverLay: false,
				tipMsg: '加载中',
				dataQuestion: '',
				dataAnswer: '',
				isReview: false,
				fileList: [],
				reviewTotalNum: 0,
				reviewCheckedNum: 0,
				lastItem: false,
			}
		},
		mounted() {
			this.init();
		},
		watch: {
			$route(to, from) {
				if (this.$route.params.ID) {
					this.init();
				}
			},
		},
		methods: {
			// 初始化
			async init() {
				this.fileList = [];
				this.isCorrection = '';
				this.checkSay = '';
				
				this.showOverLay = true;
				await get(`/cdsupervisionStylecont/contAndAnswer/${this.$route.params.ID}`).then(res => {
					this.showOverLay = false;
					if (res.success === true) {
						this.dataQuestion = res.data.question;
						this.dataAnswer = res.data.answer;
					}
				});
				
				if (this.$route.params.isReview === 'review') {
					this.isReview = true;
					
				    this.reviewTotalNum = this.$store.state.review.totalCheckNum;
					this.reviewCheckedNum = this.$store.state.review.hasCheckedNum;
					const hasCheckedList = this.$store.state.review.hasCheckedList;
					
					if (hasCheckedList.length > 0) {
						hasCheckedList.forEach(item => {
							if (item.id === this.dataAnswer.id) {
								this.isCorrection = item.recheckStatus;
								this.checkSay = item.recheckDesc;
								const imgArr = item.recheckDescImg.split(',');
								imgArr.forEach(j => {
									this.fileList.push({url: `${imgBaseUrl}${j}`, isImage: true});
								});

							}
						});
					}
					
					const list = this.$store.state.review.checkList;
					
					if (list.length === parseInt(this.$route.params.index)) {
						this.lastItem = true;
					} else {
						this.lastItem = false;
					}
				}
				
			},
			
			backPage() {
				this.$router.go(-1);
			},
			
			// 获取图片的src
			getImgSrc(item) {
				return imgBaseUrl + item;
			},
			
			preview(item) {
				ImagePreview([imgBaseUrl + item]);
			},
			
			// 检查 方法说明
			funExplain(id) {
				let taskId = this.$store.state.taskInfo.taskInfo.taskId;
				this.$router.push(`/funExplain/${ taskId }/${ id }`);
			},
			
			// 检查 步骤说明
			stepExplain(id) {
				// let taskId = this.$store.state.taskInfo.taskInfo.taskId;
				// this.$router.push(`/checkStandardExplain/${ taskId }/${ id }`);
			},
			
			commonQes(id) {
				let taskId = this.$store.state.taskInfo.taskInfo.taskId;
				this.$router.push(`/commonQes/${ taskId }/${id}`);
			},
			
			async nextStep() {
				const subData = {
					id: this.dataAnswer.id,
					taskId: this.$route.params.taskId,
					recheckStatus: this.isCorrection,
					recheckDesc: this.checkSay,
					recheckDescImg: '',
					itemName: this.dataQuestion.examineProname
				}
				
				if (subData.recheckStatus === '') {
					this.$toast.fail('请选择是否改正');
					return
				} else if (subData.recheckDesc === '') {
					this.$toast.fail('请填写情况说明');
					return
				} else if (this.fileList.length === 0) {
					this.$toast.fail('请上传复查拍照');
					return
				} else {

					let formData = new FormData();
					this.fileList.forEach(item => {
						if (item.file) {
							formData.append('file', item.file);
						}
					});
					this.tipMsg = '上传图片中';
					this.showOverLay = true;
					let res = await postImg('/upload/moreUploadImg', formData);
					this.showOverLay = false;
					
					if (res.success === true) {
						let imgArr = res.data.split(',');
						this.fileList.forEach(item => {
							if (item.content === undefined) {
								let arr = item.url.split('//');
								imgArr.unshift('/' + arr[2]);
							}
						});
						subData.recheckDescImg = imgArr.join(',');
						this.$store.commit('review/setCheckList', subData);
						
						
						const list = this.$store.state.review.checkList;
						const index = parseInt(this.$route.params.index);
						const completeList = this.$store.state.review.hasCheckedList;
						
						if (this.lastItem) {
							if (completeList.length < list.length) {
								this.$toast.fail('还未完成全部复查项');
							} else {
								this.$router.push(`/reviewRecord/${ this.$route.params.ID }/${ this.$route.params.taskId }`);
							}
						} else {
							this.$router.push(`/dangerDetail/${ list[index].id }/${this.$route.params.taskId}/${ index + 1 }/review`);
						}
					} else {
						let imgArr = [];
						this.fileList.forEach(item => {
							if (item.content === undefined) {
								let arr = item.url.split('//');
								imgArr.unshift('/' + arr[2]);
							}
						});
						subData.recheckDescImg = imgArr.join(',');

						this.$store.commit('review/setCheckList', subData);
						
						
						const list = this.$store.state.review.checkList;
						const index = parseInt(this.$route.params.index);
						const completeList = this.$store.state.review.hasCheckedList;
						
						if (this.lastItem) {
							if (completeList.length < list.length) {
								this.$toast.fail('还未完成全部复查项');
							} else {
								this.$router.push(`/reviewRecord/${ this.$route.params.ID }/${ this.$route.params.taskId }`);
							}
						} else {
							this.$router.push(`/dangerDetail/${ list[index].id }/${this.$route.params.taskId}/${ index + 1 }/review`);
						}
					}
				}
			},	
		},
	}
</script>

<style lang="scss" scoped>
	.dangerDetail {
		font-size: 14px;
		
		.headTip {
			margin-bottom: 10px;
			padding: 0 15px;
		}
		
		.checkResult {
			margin-top: 57px;
			
			.content {
				background-color: #fff;
				padding: 10px 15px;
				
				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 10px 0px;
					color: #696969;
					border-bottom: 1px solid #f7f7f7;
					
					&:first-child {
						margin-top: 10px;
					}
					
					.label {
						color: #666666;
					}
				}
				
				.checkRes {
					color: #696969;
				}
			}
			
			
			.checkExplain {
				border-bottom: 1px solid #ebebeb;
				font-size: 12px;
				margin-top: 20px;
				padding-bottom: 10px;
				
				.explainContent {
					color: #a3a3a3;
					font-size: 10px;
					line-height: 15px;
					letter-spacing: 2px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3; //行数
					-webkit-box-orient: vertical;
				}
			}
			
			.standExplain:first-child {
				border-bottom: 1px solid #ebebeb;
				padding-bottom: 10px;
			}
			
			.standExplain {
				font-size: 12px;
				
				&:nth-of-type(6) {
					border-bottom: 1px solid #ebebeb;
					padding-bottom: 10px;
				}
				
				.explainContent {
					color: #a3a3a3;
					font-size: 10px;
					line-height: 15px;
					letter-spacing: 2px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3; //行数
					-webkit-box-orient: vertical;
				}
			}
		}
		
		.reviewSituation {
			background-color: #fff;
			padding: 5px 15px;
			margin-top: 10px;
		}
		
		.tips {
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 12px;
			margin-top: 10px;
			padding: 10px 15px;
			border-bottom: 1px solid #e5e5e5;
		}
		
		.img {
			display: flex;
			flex-wrap: nowrap;
			
			.imgItem {
				margin-right: 10px;
			}
		}
	}
</style>

<style lang="scss">
	.dangerDetail {
		
		p {
			margin: 2px 0 !important;
			word-wrap:break-word;
		}
		
		.van-radio__label.van-radio__label--disabled {
			color: #58585a;
		}
		
		.van-cell.van-cell--clickable {
			padding: 3px 0;
			font-size: 12px;
			color: #7f7f7f;
		}
		
		.van-cell__value {
			font-size: 12px;
			color: #02A7F0;
		}
		
		.van-icon.van-icon-arrow.van-cell__right-icon {
			color: #02A7F0;
			font-size: 12px;
		}
		
		.van-cell__title {
			color: #6a6a6a;
		}
		
		.reviewBtn {
			display: flex;
			width: 100%;
			justify-content: center;
			background-color: #fff;
			padding: 10px 0;
	
			
			button {
				flex: 1;
				height: 35px;
				margin: 0 15px;
			}
		}
		
		.showReview {
			margin-top: 10px;
			margin-bottom: 10px;
			
			.checkSay {
				width: 100%;
			}
			
		}
		
		.van-radio__label {
			color: #7f7f7f;
		}
		
		.contentDetail {
			margin-top: 10px;
			
			.van-cell.van-field.van-field--min-height {
				padding: 5px 10px;
				background-color: #F7F7F7;
				border-radius: 5px;
			}
		}
		
		.imgItem {
			display: flex;
			justify-content: flex-start;
			
			.van-image {
				width: 100px;
				height: 100px;
				margin-right: 10px;
				margin-bottom: 10px;
			}
		}
		
		.van-field__body {
			background-color: #f5f5f5;
		}
		
		.textArea {
			width: 100%;
			margin-top: 10px;
			padding: 5px;
			
			.van-cell.van-field {
				background-color: #f5f5f5;
				width: 100%;
				height: 100px;
				padding: 5px 10px;
			}
		}
		
		.checkRes {
			.van-field__control {
				padding: 5px;
			}
		}
	}
</style>
