<template>
	<div class="sureProcess">
		<headNav
		@backPage="backPage"
		:title="'检查流程'"></headNav>
		
		<!-- 流程基本信息 -->
		<div class="basicInfo">
			<div class="headTip FontColorInfo">
				流程基本信息
			</div>
			
			<div class="basicInfo_cardInfo">
				<van-cell title="检查单位" :value="sureProcess.companyUnitName" />
				<van-cell title="任务地点" :value="sureProcess.companyUnitAddress">
					<template #right-icon>
						<van-icon name="location" color="#0055ff" @click="openMap"></van-icon>
					</template>
				</van-cell>
				<van-cell v-if="sureProcess.fireType === '1'" title="单位类型" value="火灾高危单位" />
				<van-cell v-if="sureProcess.fireType === '2'" title="单位类型" value="消防安全重点单位" />
				<van-cell v-if="sureProcess.fireType === '3'" title="单位类型" value="一般单位" />
				<van-cell v-if="sureProcess.fireType === '4'" title="单位类型" value="一般单位" />
				<van-cell v-if="sureProcess.fireType === '0'" title="单位类型" value="通用" />
				<van-cell v-if="sureProcess.siteType === '0'" title="场所类型" value="通用" />
				<van-cell v-if="sureProcess.siteType === '1'" title="场所类型" value="宾馆场所" />
				<van-cell v-if="sureProcess.siteType === '2'" title="场所类型" value="餐饮场所" />
			</div>
		</div>
		
		<!-- 相关文件 -->
		<div class="relateDoc">
			<div class="headTip FontColorInfo">
				相关文件
			</div>
			
			<div class="Doc" @click="turnToFileDetail" v-if="hasFile">
				<div class="nameOfDoc FontColorNormal OPoint FontColorOther">
					{{ fileInfo.fileName }}
				</div>
				<div class="docInfo df jfsb FontColorInfo fz12 mt10">
					<div>
						文件编号：<span>{{ fileInfo.docNum }}</span>
					</div>
					<div>
						上传时间：<span v-if="fileInfo">{{ fileInfo.createTime.split(' ')[0] }}</span>
					</div>
				</div>
			</div>
			
			<div v-else class="Doc df fb jfc FontColorOther">
				暂无相关文件
			</div>
		</div>
		
		<!-- 选择流程 -->
		<div class="process">
			<div class="headTip FontColorInfo">
				检查流程
			</div>
			
			<div class="process_container">
				<div class="process_item" v-for="(item, index) in methodList">
					<div class="process_radio" v-if="showRadio">
						<van-radio :name="item.id" v-model="radio"></van-radio>
					</div>
					<div class="process_conent" @click="turnEdit">
						<div class="process_conent_title">
							<div class="title">
								{{ item.examineName }}
							</div>
							<div class="num">
								检查项目 {{ item.taskNum }}项
							</div>
						</div>
						<div class="process_conent_detail">
							<div class="item">
								<div class="label">
									适用场所类型：
								</div>
								<div class="content">
									{{ item.siteType | getSiteType }}
								</div>
							</div>
							<div class="item">
								<div class="label">
									适用消防类型：
								</div>
								<div class="content">
									{{ item.fireType | getFireType }}
								</div>
							</div>
							<div class="item">
								<div class="label">
									适用建筑：
								</div>
								<div class="content">
									{{ item.suitBuilding | getSuitBuilding}}
								</div>
							</div>
							<div class="item">
								<div class="label">
									适用面积：
								</div>
								<div class="content">
									<span v-if="item.suitAreaType == '0'">
										通用
									</span>
									<span v-else>
										{{ item.suitAreaType }}  {{ item.suitArea }}
									</span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		<div class="chooseBtn" v-if="showRadio">
			<van-button type="info" @click="sure">确定检查项目流程</van-button>
		</div>
		
		<!-- 弹出地图展示 -->
		<van-popup 
		v-model="showMap" 
		position="bottom"
		:style="{ height: '450px' }">
			<div>
				<baiduMap :center="center" :zoom="zoom"></baiduMap>
			</div>
		</van-popup>
		
		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay"></v-mask>
	</div>
</template>

<script>
	import headNav from '@/components/headNav.vue'
	import { get, post, put } from '@/utils/http.js'
	import mask_overLay from '@/components/overLay_xy.vue'
	import baiduMap from '@/components/baiduMap.vue'
	
	export default {
		name: 'sureProcess',
		components: {
			headNav,
			'v-mask': mask_overLay,
			baiduMap
		},
		data() {
			return {
				sureProcess: '',
				showOverLay: false,
				fileInfo: '',
				hasFile: false,
				showMap: false,
				zoom: 10,
				center: '重庆市',
				methodList: [],
				radio: '',
				showRadio: true,
				hasCheck: false,
			}
		},
		filters: {
			getSiteType(data) {
				if (data == '0') {
					return '通用'
				} else if (data == '1') {
					return '宾馆场所'
				} else if (data == '2') {
					return '餐饮场所'
				}
			},
			
			getFireType(data) {
				switch (data) {
					case '0': return '通用'; break;
					case '1': return '高危火灾单位'; break;
					case '2': return '消防安全重点单位'; break;
					case '3': return '一般单位'; break;
					case '4': return '其他单位'; break;
				}
			},
			
			getSuitBuilding(data) {
				switch (data) {
					case '0': return '通用'; break;
					case '1': return '建筑内'; break;
					case '2': return '独栋'; break;
					case '3': return '综合建筑'; break;
				}
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			// 初始化
			async init() {
				this.showOverLay = true;
				await this.getsureProcessApi();
				await this.getFileInfoApi();
				await this.getIsEditApi();
				await this.getCheckProcessApi();
				this.showOverLay = false;
			},
			
			// 获取单位信息
			async getsureProcessApi() {
				let companyId = this.$store.state.taskInfo.taskInfo.companyId;
				
				await get(`/cdSuperObjE/get/${ companyId }`).then(res => {
					if (res.success == true) {
						this.sureProcess = res.data;
					} else {
						this.$toast.fail(`${ res.msg }`);
					}
				});
			},
			
			async getFileInfoApi() {
				await get('/cdenforceobjI/listByCondition', {
					id: this.$route.params.ID
				}).then(res => {
					if (res.success === true) {
						if (res.data.length > 0) {
							this.fileInfo = res.data[0];
							this.hasFile = true;
						} else {
							this.hasFile = false;
						}
					} else {
						this.$toast.fail(`${ res.msg }`);
						this.hasFile = false;
					}
				});
			},
			
			async getIsEditApi() {
				let taskId = this.$store.state.taskInfo.taskInfo.taskId;
				get('/applet/isTaskEdit/' + taskId).then(res => {
					if (res.success === true) {
						if (res.data) {
							this.showRadio = true
						} else {
							this.showRadio = false;
							this.hasCheck = true;
							this.sure();
						}
					}
				});
			},
			
			async getCheckProcessApi() {
				let taskId = this.$store.state.taskInfo.taskInfo.taskId;
				let examineId = this.$store.state.taskInfo.taskInfo.examineId;
				if (examineId === undefined) {
					examineId = this.$store.state.taskInfo.taskInfo.dataList.examineId;
				}
				
				get('/supervision/matchProcess/' + taskId).then(res => {
					if (res.success === true) {
						if (res.data) {
							this.methodList = res.data;
							this.methodList.map(item => {
								if (item.id === examineId) {
									this.radio = item.id;
								}
							});
						}
					}
				});
			},
			
			backPage() {
				this.$router.go(-1);
			},
			
			openMap() {
				this.center = this.sureProcess.companyUnitAddress;
				this.showMap = true;
			},
			
			// 文件详情页
			turnToFileDetail() {
				this.$router.push(`/fileDetail/${ this.$route.params.ID }`);
			},
			
			// 确定检查流程
			sure() {
				let id = this.$store.state.taskInfo.taskInfo.id;
				this.showOverLay = true;
				
				put('/cdsupervisionTask/updateProcess', {
					id,
					examineId: this.radio
				}).then(res => {
					if (res.success == true) {
						
						localStorage.removeItem('SUBLIST');
						localStorage.removeItem('TASKID');

						
						if (res.data) {
							this.$store.commit('taskInfo/setExamineId', {
								examineId: res.data
							});
						}
						
						let arr = [];
						
						this.methodList.map(item => {
							if (item.id === this.radio) {
								arr.push(item);
							}
						});
						
						this.methodList = arr;
						
						this.showRadio = false;
						this.showOverLay = false;
					} else {
						let arr = [];
						this.methodList.map(item => {
							if (item.id === this.radio) {
								arr.push(item);
							}
						});
						this.methodList = arr;
					    this.showRadio = false;
						this.showOverLay = false;
					}
				});
			},
			
			// 跳转编辑
			turnEdit() {
				if (this.showRadio || this.hasCheck) {
					return
				} else {
					this.$router.push('/editProcess');
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.sureProcess {
		font-size: 14px;
		
		.headTip {
			margin-bottom: 10px;
			padding: 0 15px;
		}
		
		.basicInfo {
			margin-top: 57px;
		}
		
		.relateDoc {
			margin-top: 10px;
			
			.Doc {
				background-color: #fff;
				padding: 20px 15px;
				
				.nameOfDoc {
					width: 100%;
				}
			}
			
			.nearError, .farMonitor, .maintainRecord {
				margin-top: 20px;
			}
		}
		
		.process {
			margin-top: 10px;
			
			.process_container {
				margin-bottom: 45px;
				
				.process_item {
					display: flex;
					margin-bottom: 10px;
					background-color: #fff;
					padding: 10px 15px;
					
					.process_radio {
						margin-right: 20px;
						display: flex;
						align-items: center;
					}
					
					.process_conent {
						width: 100%;
						
						.process_conent_title {
							display: flex;
							justify-content: space-between;
							color: #323233;
							font-size: 12px;
							border-bottom:1px solid #f5f5f5;
							padding-bottom: 10px;
							
							.title {
								font-weight: bold;
							}
							
							.num {
								color: #43cbcb;
							}
						}
						
						.process_conent_detail {
							display: flex;
							justify-content: space-between;
							flex-wrap: wrap;
							font-size: 12px;
							color: #777;
							margin-top: 10px;
							
							.item {
								margin-bottom: 8px;
								display: flex;
								width: 50%;

								.label {
									
								}
							}
						}
					}
				}
			}
		}
		
		.chooseBtn {
			width: 100%;
			display: flex;
			justify-content: center;
			position: relative;
			bottom: 20px;
			
			button {
				width: 80%;
			}
		}
	}
</style>

<style lang="scss">
	.sureProcess {
		
		.van-cell {
			font-size: 13px;
			
			.van-cell__title {
				color: #4f4f4f;
				flex: 2;
			}
			
			.van-cell__value {
				flex: 3;
			}
			
			&::after {
				// border-bottom: 1px solid #c1c1c1;
			}
		}
		
		.van-icon.van-icon-location {
			display: flex;
			align-items: center;
			margin-left: 5px;
		}
	}
</style>
