<template>
	<div class="addCheck">
		<headNav
		@backPage="backPage"
		@addRoad="rightClick"
		:RText="'保存'"
		:title="'新增检查'"></headNav>
		
		<div class="addCheck_container">
			<div class="addCheck_search item">
				<div class="addCheck_label">
					检查内容
				</div>
				<div class="addCheck_content">
					<div>
						<van-field
						   placeholder="请输入检查内容"
						   input-align="right"
						   v-model="checkCont"
						 />
					</div>
				</div>
			</div>
			
			<div class="addCheck_result item">
				<div class="addCheck_label">
					检查结果
				</div>
				<div class="addCheck_content">
					<van-radio-group v-model="radio" direction="horizontal">
					  <van-radio name="1">合格</van-radio>
					  <van-radio name="2">不合格</van-radio>
					</van-radio-group>
				</div>
			</div>
			
			<!-- 模板项问题 -->
			<div v-if="!isRemarkItem && selectItem" class="templateItem">
				<div class="carItem" v-if="selectItem.examineOptions">
					<div class="mr5">检查类型</div>
					<div class="FontColorInfo">
						<span>{{ selectItem.examineType | getType }}</span>
					</div>
				</div>		
						
<!-- 				<div class="carItem" v-if="selectItem.examineOptions">
					<div class="mr5">历史隐患</div>
					<div class="FontColorOther">无</div>
				</div> -->
				
				<div class="carItem" v-if="selectItem.examineOptions">
					<div class="carItem_issue">是否涉及</div>
					<van-radio-group
						v-model="selectItem.answerOption"
						direction="horizontal"
					>
						<template v-if="selectItem.examineOptions">
							<van-radio
								v-for="j in getRadioGroup(selectItem.examineOptions)"
								icon-size="0.4rem"
								:disabled="handleEnabled"
								:name="j"
								:key="j"
							>
								{{ j }}
							</van-radio>
						</template>
					</van-radio-group>
				</div>
				
				<div v-if="selectItem.extraExamineTitle">
					<div
						v-for="(i, index_) in selectItem.extraExamineTitle.split(',')"
						:key="index_"
					>
						<div class="carItem">
							<div>附属检查</div>
							<span class="FontColorNormal">
								{{ selectItem.extraExamineTitle.split(',')[index_] }}
							</span>
						</div>
				
						<div class="carItem">
							<div v-if="selectItem.extraExamineContent">
								{{
									selectItem.extraExamineContent.split(',')[index_]
								}}
							</div>
							<van-field
								class="flex1"
								v-model="selectItem.checkSite[index_]"
								:disabled="handleEnabled"
								input-align="right"
								placeholder="请输入抽查部位"
							/>
						</div>
					</div>
				</div>
			</div>
			
			<div class="addCheck_situation item" v-for="(item, index) in addCheckSituationList" :key="index">
				<div class="addCheck_label">
					<span>
						检查情况 ({{ index + 1 }})
					</span>
					<div>
						<span 
						v-if="index > 0" 
						@click="delCheckSituation(item, index)"
						class="FontColorError fb fz12">删除</span>
					</div>
				</div>
				<div class="addCheck_content textareaItem">
					 <van-field
					    placeholder="请输入检查情况"
						input-align="left"
						rows="3"
						v-model="item.content"
						autosize
						type="textarea"
					  />
				</div>
				
				<div class="addCheck_img">
					<van-uploader v-model="item.fileList" multiple max-count="4" />
				</div>
			</div>
			
			<div class="addCheck_btn">
				<van-button type="info" @click="addCheckSituation">添加检查情况</van-button>
			</div>
		</div>
		
		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>
	</div>
</template>

<script>
	import headNav from '@/components/headNav.vue'
	import { get, post, postImg, imgBaseUrl } from '@/utils/http.js'
	import mask_overLay from '@/components/overLay_xy.vue'
	
	export default {
		name: 'addCheck',
		components: {
			headNav,
			'v-mask': mask_overLay
		},
		data() {
			return {
				radio: '1',
				checkCont: '',
				addCheckSituationList: [{
					content: '',
					fileList: []
				}],
				showOverLay: false,
				tipMsg: '提交中',
				isRemarkItem: false,
				selectItem: '',
				handleEnabled: false
			}
		},
		filters: {
			getType(data) {
				switch (data) {
					case '1':
						return '消防许可及验收备案';
						break;
					case '2':
						return '消防安全管理';
						break;
					case '3':
						return '建筑防火';
						break;
					case '4':
						return '安全疏散';
						break;
					case '5':
						return '消防控制室';
						break;
					case '6':
						return '消防设施器材——火灾自动报警系统';
						break;
					case '7':
						return '消防设施器材——消防给水设施';
						break;
					case '8':
						return '消防设施器材——自动灭火系统';
						break;
					case '9':
						return '消防设施器材——其他设施器材';
						break;
					case '10':
						return '其它消防安全管理';
						break;
					case '11':
						return '备注';
						break;
				}
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			// 初始化
			init() {
				
				if (this.$route.params.content) { // 检索新增
					this.checkCont = this.$route.params.content;
					this.isRemarkItem = true;
				} else if (JSON.stringify(this.$route.query) !=='{}') { // 检索新增 有模板
					this.isRemarkItem = false;
					
					this.selectItem = JSON.parse(this.$route.query.list);
					
					this.$set(this.selectItem, 'answerOption', '');
					this.$set(this.selectItem, 'checkSite', []);
					
					this.checkCont = this.selectItem.examineProname;
				} else {  // 新增
					this.isRemarkItem = true;
				}
			},
				
			backPage() {
				this.$router.go(-1);
			},
			
			addCheckSituation() {
				this.addCheckSituationList.push({
					content: '',
					fileList: []
				});
			},
			
			delCheckSituation(item, index) {
				this.addCheckSituationList.splice(index, 1);
			},
			
			// 上传图片
			async subImg(item) {
				
				this.showOverLay = true;
				var formData = new FormData();
				
				item.fileList.map((i, index) => {
					formData.append("file", i.file);
				})
				
				let res = await postImg('/upload/moreUploadImg', formData);
				
				if (res.success === true) {
					return res.data;
				} else {
					this.$toast.fail(`${ res.msg }`);
				}
			},
			
			// 保存
			async rightClick() {
				
				let answerOption = '';
				let checkSite = '';
				
				if (!this.isRemarkItem) {
					if (this.selectItem.answerOption == '') {
						this.$toast.fail('请选择是否涉及');
						return;
					} else {
						answerOption = this.selectItem.answerOption;
						
						if (this.selectItem.extraExamineTitle) {
							let flag = false;
							this.selectItem.checkSite.map(item => {
								if (!item || item.trim() == '') {
									flag = true;
								}
							});
							
							if (flag) {
								this.$toast.fail('请填写抽查部分');
								return;
							};
							
							checkSite = this.selectItem.checkSite.join('@');
						};
						
					}
				}
				
								
				let subData = {
					taskId: this.$route.params.taskId,
					sonProcessid: this.$route.params.itemId,
					examineProname: this.checkCont,
					checkResult: this.radio,
					checkCaseImgs: '',
					checkCaseConts: '',
					isTemplateItem: !this.isRemarkItem,
					answerOption: answerOption,
					checkSite: checkSite
				};
				
				let flag = true;
				
				this.addCheckSituationList.map(item => {
					if (item.content == '' || item.fileList.length == 0) {
						flag = false;
					}
				});
				
				if (this.checkCont == '' || this.checkCont.trim() == '') {
					this.$toast.fail('请输入检查内容');
					return
				} else if (!flag) {
					this.$toast.fail('请完成检查情况');
					return
				} else {
					this.showOverLay = true;
					// 检查图片
					let arr = [];
					for (var i = 0; i < this.addCheckSituationList.length; i ++) {
						
						const imgSrc = await this.subImg(this.addCheckSituationList[i]);
						
						arr.push(imgSrc);
					}
					
					subData.checkCaseImgs = arr.join('@');
					
					// 检查情况
					let arr_sit = [];
					this.addCheckSituationList.map(item => {
						arr_sit.push(item.content);
					});
					
					subData.checkCaseConts = arr_sit.join('@');
					
					await post('/applet/addCheckItem', subData).then(res => {
						if (res.success == true) {
							this.showOverLay = false;
							this.$router.go(-1);
						} else {
							this.$toast.fail('保存失败!');
						}
					})
				}
			},
			
			// 解析radio的字符串为数组
			getRadioGroup(str) {
				if (str) {
					return str.split(',');
				} else {
					return;
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.addCheck_container {
		margin-top: 57px;
		font-size: 14px;
		color: #323232;
		
		.item {
			margin: 10px 0;
			padding: 10px 15px;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			
			.addCheck_label {
				display: flex;
				justify-content: space-between;
				color: #666;
			}
		}
		
		.addCheck_btn {
			width: 100%;
			margin-top: 20px;
			margin-bottom: 10px;
			display: flex;
			justify-content: center;
			
			button {
				width: 90%;
			}
		}
	}
	
	.addCheck_situation {
		display: flex;
		flex-direction: column;
	}
	
	.carItem {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15px 0;
		
		div {
			&:first-child {
				color: #666;
			}
		}
	}
	
	.templateItem {
		background-color: #fff;
		padding: 6px 15px;
	}
</style>

<style lang="scss">
	.addCheck {
		.van-cell.van-field {
			padding: 0;
			margin-top: -2px;
		}
		
		.textareaItem {
			.van-cell.van-field {
				padding: 0px;
				margin-top: 10px;
			}
		}
		
		.van-uploader__wrapper {
			display: flex;
			flex-wrap: nowrap;
		}
		
		.van-radio {
			margin-right: 0;
			margin-left: 10px;
		}
	
	}
	
</style>
