<template>
	<div class="editProcess">
		<headNav :title="'检查内容'"></headNav>

		<!-- 搜索 -->
		<div class="search">
			<van-search
				v-model="searchValue"
				placeholder="请输入搜索关键词"
				input-align="center"
				@search="startSearch"
				@clear="clearSearch"
				:disabled="isStartBtnClick === '1'"
			/>
		</div>

		<div class="totalPro">
			<div class="left">
				共需检查：
				<span>{{ totaNum }}</span>
				项
			</div>
		</div>

		<!-- 项目列表 -->
		<div class="proList">
			<van-sidebar v-model="activeKey">
				<van-sidebar-item
					v-for="(item, index) in mainList"
					:class="item.colorName"
					:disabled="collapseDisabled"
					:title="item.sonProcessName"
					:key="index"
				/>
			</van-sidebar>
			<div class="proItem" v-if="mainList">
				<van-collapse v-model="activeName_item" accordion>
					<div
						class="item"
						v-for="(_item, index) in mainList[activeKey].stylecontList"
						:key="index"
					>
						<van-collapse-item :name="_item.id" :disabled="collapseDisabled">
							<template #title>
								<div class="df">
									<div class="width100">
										<van-swipe-cell
											:before-close="beforeClose"
											:name="_item.id"
										>
											<van-cell
												:border="false"
												:value="_item.examineProname"
											/>
											<template #right>
												<van-button
													size="small"
													square
													type="danger"
													text="删除"
												/>
											</template>
										</van-swipe-cell>
									</div>
								</div>

								<div>
									<div class="checkRes">
										<div class="FontColorInfo mr5">检查结果：</div>
										<van-radio-group
											style="margin-top: 3px;"
											v-model="_item.checkResult"
											direction="horizontal"
											:disabled="handleEnabled"
										>
											<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 class="checkRes" v-if="_item.examineOptions">
										<div class="FontColorInfo mr5">检查类型：</div>
										<div class="FontColorInfo df flex1">
											<span>{{ _item.examineType | getType }}</span>
										</div>
									</div>

									<div class="checkRes" v-if="_item.examineOptions">
										<div class="FontColorInfo mr5">历史隐患：</div>
										<div class="FontColorOther">无</div>
									</div>
								</div>
							</template>
							<div class="fz13">
								<van-form>
									<div class="carItem" v-if="_item.examineOptions">
										<div class="carItem_issue">是否涉及</div>
										<van-radio-group
											v-model="_item.answerOption"
											direction="horizontal"
										>
											<van-radio
												v-for="j in getRadioGroup(_item.examineOptions)"
												icon-size="0.4rem"
												:disabled="handleEnabled"
												:name="j"
												:key="j"
											>
												{{ j }}
											</van-radio>
										</van-radio-group>
									</div>

									<div v-if="_item.extraExamineTitle">
										<div v-for="(i, index_) in _item.extraExamineTitle.split(',')" :key="index_">
											<div class="carItem">
												<div>附属检查</div>
												<span class="FontColorNormal">
													{{ _item.extraExamineTitle.split(',')[index_] }}
												</span>
											</div>

											<div class="carItem">
												<div v-if="_item.extraExamineContent">
													{{
														_item.extraExamineContent.split(',')[index_]
													}}
												</div>
												<van-field
													v-model="_item.checkSite[index_]"
													:disabled="handleEnabled"
													input-align="right"
													placeholder="请输入抽查部分"
												/>
											</div>
										</div>
									</div>

									<template v-if="!hasChecked">
										<div class="mb20" v-for="(item_checkSituation, index_checkSituation) in _item.checkSituation" :key="index_checkSituation">
											<div class="mt10">
												<div class="df jfsb aic">
													<div>检查情况 ({{ index_checkSituation + 1 }})</div>
													<div>
														<span
															v-if="index_checkSituation > 0"
															@click="
																delCheckSituation(
																	_item.checkSituation,
																	index_checkSituation
																)
															"
															class="FontColorError"
														>
															删除
														</span>
													</div>
												</div>
												<div class="mt10">
													<van-field
														rows="4"
														autosize
														border
														class="textArea"
														v-model="item_checkSituation.content"
														type="textarea"
														:disabled="handleEnabled"
														placeholder="请输入情况说明"
													/>
												</div>
											</div>

											<div v-if="!hasChecked" class="mt10 imgItem">
												<van-uploader
													v-model="item_checkSituation.fileList"
													:max-count="4"
													:disabled="handleEnabled"
													multiple
													capture="camera"
												/>
											</div>
										</div>
									</template>
									<template v-else>
										<div v-if="_item.checkCaseConts">
											<div
												v-for="(item__,index__) in _item.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
															class="textArea"
															:value="item__"
															type="textarea"
															:disabled="handleEnabled"
															placeholder="请输入情况说明"
														/>
													</div>
												</div>

												<div
													class="mt10 imgItem"
													v-if="_item.checkCaseImgs"
												>
													<van-image
														v-for="(item___,
														index___) in _item.checkCaseImgs
															.split('@')
															[index__].split(',')"
														@click="showImageDetails(item___, 0)"
														:src="getImgUrl(item___, 0)"
														:key="index___"
													/>
												</div>
											</div>
										</div>
									</template>

									<div class="checkExplain">
										<div class="funExplain">
											<van-cell
												@click="funExplain(_item.id)"
												is-link
												title="检查流程及方法"
												value="查看"
											/>
										</div>
										<div class="explainContent">
											{{ _item.trueExamineFunState }}
										</div>
									</div>

									<div class="standExplain">
										<div class="funExplain">
											<van-cell
												@click="stepExplain(_item.id)"
												is-link
												title="设置要求"
												value="查看"
											/>
										</div>
										<div class="explainContent">
											{{ _item.examineNormState }}
										</div>
									</div>

									<div class="standExplain">
										<div class="funExplain">
											<van-cell
												@click="commonQes(_item.id)"
												is-link
												title="常见问题"
												value="查看"
											/>
										</div>
										<!-- 										<div class="explainContent">
											{{ '...' }}
										</div> -->
									</div>
								</van-form>
							</div>
						</van-collapse-item>
					</div>
				</van-collapse>
			</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';
import { ImagePreview } from 'vant';

export default {
	name: 'editProcess',
	components: {
		headNav,
		'v-mask': mask_overLay
	},
	inject: ['reload'],
	data() {
		return {
			btnText: '继续检查',
			finishNum: 0,
			totaNum: 0,
			searchValue: '',
			activeKey: 0,
			activeName_item: [],
			isInvolve: '',
			isCorrect: '',
			fileList1: [],
			fileList2: [],
			fileList3: [],
			mainList: '',
			storageList: '',
			deepList: '',
			isStartBtnClick: '0',
			radio_examineOptions: [],
			handleEnabled: true,
			nowEditItem: [],
			collapseDisabled: false,
			submitList: [],
			showOverLay: false,
			tipMsg: '图片上传中',
			hasChecked: false,
			showIcon: 'plus',
			isOnSearch: 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() {
			this.getMainListApi();
		},

		// 获取主列表Api
		getMainListApi() {
			let taskId = this.$store.state.taskInfo.taskInfo.taskId;
			this.showOverLay = true;
			this.tipMsg = '加载中';
			get(`/cdsupervisionStylestep/allCheck/${taskId}`).then(res => {
				if (res.success == true) {
					if (res.data.length === 0) {
						this.showOverLay = false;
					} else {
						this.showOverLay = false;

						let num = 0;
						let _num = 0;
						res.data.forEach(item => {
							item.colorName = 'colorNor';

							item.stylecontList.forEach(j => {
								j.finishAll = false;
								j.checkSite = [];
								j.checkSituation = [
									{
										content: '',
										fileList: []
									}
								];
								num++;
							});
						});

						res.data.forEach((item, index) => {
							item.stylecontList.forEach(j => {
								_num++;
								if (_num === num) {
									j.finishAll = true;
								}
							});
						});

						this.mainList = res.data;
						this.storageList = res.data;
						this.deepList = JSON.parse(JSON.stringify(res.data));

						this.getTotalItem();
					}
				}
			});
		},

		// 返回上一页
		backPage() {
			this.$router.go(-1);
		},

		// 获取总共检查项数
		getTotalItem() {
			let num = 0;

			if (this.storageList) {
				this.storageList.forEach(i => {
					i.stylecontList.forEach(j => {
						num++;
					});
				});
			}

			this.totaNum = num;
			this.complateNum = this.submitList.length;
			this.uncheckNum = num - this.submitList.length;
		},

		beforeClose({ position, instance }) {
			switch (position) {
				case 'left':
				case 'cell':
				case 'outside':
					instance.close();
					break;
				case 'right':
					this.$dialog
						.confirm({
							title: '删除本项',
							message: '确定删除吗？'
						})
						.then(() => {
							get('/cdsupervisionStylecont/delCont/' + instance.name).then(res => {
								if (res.success === true) {
									this.getMainListApi();
								}
							});
						})
						.catch(() => {});
					break;
			}
		},

		// 检查 方法说明
		funExplain(id) {
			if (this.handleEnabled == true) {
				return;
			}
			this.$router.push(`/funExplain/${this.$route.params.ID}/${id}`);
		},

		// 解析radio的字符串为数组
		getRadioGroup(str) {
			return str.split(',');
		},

		// 检查 标准说明
		stepExplain(id) {
			if (this.handleEnabled == true) {
				return;
			}
			// this.$router.push(`/checkStandardExplain/${this.$route.params.ID}/${id}`);
		},

		// 常见问题
		commonQes(id) {
			if (this.handleEnabled == true) {
				return;
			}
			this.$router.push(`/commonQes/${this.$route.params.ID}/${id}`);
		},

		// 开始检索
		startSearch(value) {
			this.mainList = [];
			this.activeKey = 0;

			this.deepList.map((i, index_i) => {
				// 合并子项
				i.stylecontList.map((j, index_j) => {
					if (this.storageList[index_i].stylecontList[index_j]) {
						if (
							this.storageList[index_i].stylecontList[index_j].contSort != j.contSort
						) {
							this.storageList[index_i].stylecontList.splice(j.contSort - 1, 0, j);
						}
					} else {
						this.storageList[index_i].stylecontList.push(j);
					}
				});
			});

			this.storageList.map((i, index) => {
				let flag = true;

				i.stylecontList.map(j => {
					if (j.examineProname.indexOf(value) != -1) {
						// 是否存在搜索项

						if (flag) {
							this.mainList.push(i); // 展示的列表项与子项
							this.mainList[this.mainList.length - 1].stylecontList = [];
							this.mainList[this.mainList.length - 1].stylecontList.push(j);
							flag = false;
						} else {
							this.mainList[this.mainList.length - 1].stylecontList.push(j);
						}
					}
				});
			});

			if (this.mainList.length === 0) {
				this.mainList = this.storageList;
				this.$toast.fail('暂无此数据');
			} else {
				this.isOnSearch = true;
			}
		},

		// 清空检索
		clearSearch() {
			this.mainList = [];

			this.deepList.map((i, index_i) => {
				i.stylecontList.map((j, index_j) => {
					if (this.storageList[index_i].stylecontList[index_j]) {
						if (
							this.storageList[index_i].stylecontList[index_j].contSort != j.contSort
						) {
							this.storageList[index_i].stylecontList.splice(j.contSort - 1, 0, j);
						}
					} else {
						this.storageList[index_i].stylecontList.push(j);
					}
				});
			});

			this.storageList.map((i, index) => {
				let flag = true;
				i.stylecontList.map(j => {
					if (j.examineProname.indexOf('') != -1) {
						if (flag) {
							this.mainList.push(i);
							this.mainList[index].stylecontList = [];
							this.mainList[index].stylecontList.push(j);
							flag = false;
						} else {
							this.mainList[index].stylecontList.push(j);
						}
					}
				});
			});

			this.isOnSearch = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.editProcess {
	font-size: 14px;

	.colorComplate {
		color: #02a7f0;
	}

	.colorNow {
		color: #03a012;
	}

	.colorNor {
		color: #a5a5a5;
	}

	.width100 {
		width: 232px;
		overflow: hidden;
	}

	.titleContent {
	}

	.mt5 {
		margin-top: 5px;
	}

	.search {
		margin-top: 57px;
	}

	.totalPro {
		color: #7f7f7f;
		font-size: 12px;
		display: flex;
		justify-content: space-between;
		padding: 10px 15px;
	}

	.proList {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		min-height: calc(100vh - 155px);

		.proItem {
			flex: 1;
			width: 1px;

			.itemContent {
				height: 42px;
				overflow: hidden;
				margin: 0 15px;
				border-bottom: 1px solid #ddd;
				padding-bottom: 5px;
			}

			.checkRes {
				margin: 5px 0;
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				width: 107%;
			}

			.btn {
				margin-top: 10px;
				display: flex;
				justify-content: space-between;

				button {
					font-size: 12px;
					width: 110px;
				}
			}

			.checkExplain {
				font-size: 11px;
				margin-top: 20px;
				padding: 10px 15px;
				border: 1px solid #f1f1f1;
				padding-top: 5px;

				.explainContent {
					color: #a3a3a3;
					font-size: 10px;
				}
			}

			.standExplain {
				font-size: 11px;
				padding: 10px 15px;
				border: 1px solid #f1f1f1;
				margin-top: 10px;
				padding-top: 5px;

				.explainContent {
					color: #a3a3a3;
					font-size: 10px;
					line-height: 16px;
					max-height: 46px;
					overflow: hidden;
				}
			}

			.carItem {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin: 15px 0;
			}

			.addCheckBtn {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 15px 0;
				margin-top: 40px;

				button {
					width: 100%;
				}
			}
		}

		.carItem_issue {
			width: 100px;
			display: flex;
		}
	}

	.rightPadding {
	}
}
</style>

<style lang="scss">
.editProcess {
	.van-sidebar-item.van-sidebar-item--select {
		&::before {
			height: 100%;
			background-color: #0066ff;
		}
	}

	.van-sidebar-item {
		background-color: #f5f5f5;
		margin-bottom: 1px;
		padding: 8px 10px;
		// overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
		font-size: 12px;
		width: 90px;
		text-align: center;
	}

	.van-sidebar-item.van-sidebar-item--select {
		background-color: #fff;
	}

	.van-sidebar {
		width: 100px;
	}

	.van-cell__title {
		font-size: 13px;
	}

	.van-collapse-item__wrapper {
		width: 95%;
		border: 1px solid #f7f7f7;
		// margin: 8px 15px;
		box-shadow: 0 5px 5px rgba($color: #6a6a6a, $alpha: 0.2);
		// border-radius: 5px;
		margin-bottom: 10px;
	}

	.van-collapse-item__content {
		padding: 10px 10px;
	}

	.checkExplain,
	.standExplain {
		.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;
		}
	}

	.proItem {
		.van-field {
			width: 60%;
		}

		.van-cell.van-field {
			padding: 0;
		}

		.van-field__control {
		}

		.van-cell__title.van-field__label {
			width: auto;
			font-size: 12px;
		}
	}

	.van-button.van-button--default.van-button--normal {
		background-color: #9a9a9a;
		color: #fff;
		height: 36px;
	}

	.van-button.van-button--info.van-button--normal {
		height: 36px;
	}

	.van-cell.van-cell--clickable.van-collapse-item__title.van-collapse-item__title--expanded {
		&::after {
			border: none;
		}
	}

	.stopBtn.van-button.van-button--default.van-button--normal {
		background-color: #cc8800;
	}

	.van-cell__value {
		text-align: left;
	}

	.van-radio.van-radio--disabled.van-radio--horizontal {
		&:last-child {
			margin-right: 0;
		}
	}

	.van-radio.van-radio--horizontal {
		&:last-child {
			margin-right: 0;
		}
	}

	.textArea.van-field {
		background-color: #f4f4f4;
		width: 100%;

		.van-field__control {
			padding: 5px 10px;
		}
	}

	.van-icon.van-icon-photograph.van-uploader__upload-icon {
		color: #b6b6b6;
	}

	.van-uploader__upload {
		border: 1px solid #e2e2e3;
		width: 65px;
		height: 65px;
		margin: 0;
	}

	.van-uploader__preview {
		margin: 0;
	}

	.van-image.van-uploader__preview-image {
		width: 65px;
		height: 65px;
	}

	.checkExplain,
	.standExplain {
		.van-cell__value {
			text-align: right;
		}
	}

	.van-sidebar-item {
		display: flex;
		align-items: center;
	}

	.van-sidebar-item__text {
		width: 100%;
		text-align: left;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.van-sidebar-item.van-sidebar-item--select {
		.van-sidebar-item__text {
			overflow: auto;
			white-space: normal;
			text-overflow: inherit;
		}
	}

	.van-collapse-item {
		border-bottom: 1px solid #f5f5f5;
	}

	.van-collapse-item__title {
		padding-left: 5px;
	}

	.van-collapse-item--border::after {
		border-top: none;
	}

	.van-hairline--top-bottom::after {
		border: none;
	}

	.imgItem {
		display: flex;
		justify-content: space-between;

		.van-image {
			width: 110px;
			height: 100px;
			margin-bottom: 20px;
		}

		.van-uploader {
			width: 100%;
		}

		.van-uploader__wrapper {
			width: 100%;
			display: flex;
			justify-content: space-between;
		}

		.van-uploader__preview {
			margin: 0;
			width: 110px;
			height: 100px;
			// margin-right: 20px;
			margin-bottom: 20px;

			.van-image {
				height: 100%;
				width: 100%;
			}
		}
	}

	.van-uploader__upload {
		width: 110px;
		height: 100px;
	}

	.btn_del {
		padding: 0 10px;
		height: 20px;
		line-height: 20px;
	}

	.width100 {
		.van-cell.van-cell--borderless {
			padding: 0;
			background-color: transparent;
		}

		.van-swipe-cell {
			width: 233px;
		}
	}

	.van-swipe-cell__right {
		display: flex;
		align-items: center;
		height: 24px;
	}

	// .van-button.van-button--danger.van-button--normal.van-button--square {
	// }
}
</style>
