<template>
	<div class="checkProcess">
		<headNav
			@rightClick="rightClick"
			:iconName="showIcon"
			title="执行任务"
		></headNav>

		<!-- 搜索 -->
		<div class="search">
			<van-search
				v-model="searchValue"
				placeholder="请输入搜索关键词"
				input-align="center"
				readonly
				@click.prevent="showSearchItems"
			/>
		</div>

		<div class="totalPro">
			<div class="left">
				共需检查：
				<span>{{ totaNum }}</span>
				项
			</div>
			<div class="right df">
				<div class="FontColorOther pr15">
					已完成：
					<span>{{ complateNum }}</span>
					项
				</div>
				<div class="FontColorWarn">
					未检查：
					<span>{{ uncheckNum }}</span>
					项
				</div>
			</div>
		</div>

		<!-- 项目列表 -->
		<div class="proList">
			<van-sidebar v-model="activeKey" @change="sidebarChange">
				<van-sidebar-item
					v-for="(item, index) in mainList"
					:title="item.node_name"
					: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].items"
						:key="index"
					> -->
					<template v-if="mainList[activeKey] && mainList[activeKey].items">
						<van-collapse-item v-for="(_item, index) in mainList[activeKey].items" :key="index" :name="_item.id">
							<template #title>
								<div class="width100">{{ _item.handBook && _item.handBook.enforce_content }}</div>
								<!-- 检查流程及方法 -->
								<!-- v-if="activeName_item != _item.id" -->
								<!-- <div> -->
									<div class="checkExplain_top">
										<div class="funExplain">
											<van-cell title="检查流程及方法"></van-cell>
										</div>
										<div class="explainContent">
											<div
												v-if="_item.handBook && _item.handBook.enforce_method"
												v-html="_item.handBook.enforce_method"
											></div>
											<div v-else>暂无</div>
										</div>
									</div>

									<!-- 常见问题 -->
									<div class="checkExplain_top">
										<div class="funExplain">
											<van-cell
												@click="commonQes(_item.handBook && _item.handBook.problems)"
												is-link
												title="常见问题"
												value="查看"
											/>
										</div>
										<div class="explainContent">
											<div
												v-if="_item.handBook && _item.handBook.problems"
												class="swiperContainer"
											>
												<template v-for="(problem, problemInd) in _item.handBook.problems">
													<van-swipe :key="problem.id" indicator-color="#3da9f0">
														<template v-if="problem.problem_images">
															<van-swipe-item
																v-for="imageId in problem.problem_images.split(',')"
																:key="imageId"
															>
																<div class="swiper_content">
																	<van-image
																		:src="handleProblemImgs(imageId)"
																	></van-image>
																</div>
															</van-swipe-item>
														</template>
													</van-swipe>
													<div :key="problemInd" class="swiper_title">
														{{ problem.problem_desc }}
													</div>
												</template>
											</div>
											<div v-else>暂无</div>
										</div>
									</div>

									<!-- 检查结果 -->
									<div class="checkRes">
										<span>检查结果：</span>
										<van-radio-group
											style="margin-top: 3px;"
											v-model="_item.checkResult"
											direction="horizontal"
											@change="changeCheckResult"
										>
											<van-radio name="1">合格</van-radio>
											<van-radio name="2">不合格</van-radio>
											<van-radio name="0">不涉及</van-radio>
										</van-radio-group>
									</div>
								<!-- </div> -->
							</template>
							<div class="fz13">
								<van-cell-group>
									<van-cell title="检查类型" :value="_item.handBook && _item.handBook.enforce_class" />
									<van-cell title="历史隐患" is-link value="[查看]" @click="showHistory(_item.id)" />
									<van-cell title="设置要求" is-link value="[查看]" @click="showSettingExpect(_item)" />
									<van-cell title="附属检查" :value="_item.item_content" />
								</van-cell-group>
								<!-- <van-form> -->
									<div class="carItem" v-if="_item.handBook && _item.handBook.result_options">
										<div class="mr5">检查选项</div>
										<div class="FontColorInfo">
											<van-radio-group v-model="_item.check_options" direction="horizontal">
												<van-radio v-for="(option, opid) in _item.handBook.result_options.split('，')" :key="opid" :name="option">{{option.replace('#', ',')}}</van-radio>
											</van-radio-group>
										</div>
									</div>
									<template v-if="_item.handBook && _item.handBook.otherItems">
										<div class="carItem" v-for="(otherItem, othInd) in _item.handBook.otherItems" :key="othInd">
											<div class="mr5">{{otherItem.k}}</div>
											<div class="FontColorInfo">
												<van-field :v-model="otherItem.v" placeholder="请输入" />
											</div>
										</div>
									</template>
									<!-- <div class="carItem">
										<div class="mr5">检查类型</div>
										<div class="FontColorInfo">
											<span>{{ _item.item_type }}</span>
										</div>
									</div>
									<div class="carItem">
										<div class="mr5">历史隐患</div>
										<div class="FontColorOther">{{_item.records && _item.records.length > 0 ? '这里是隐患说明' : '无' || '无'}}</div>
									</div>

									<div class="carItem">
										<div class="mr5">附属检查</div>
										<div class="FontColorOther">{{_item.item_content || '无'}}</div>
									</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
													class="flex1"
													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"
													:after-read="afterRead"
													:disabled="handleEnabled"
													multiple
													capture="camera"
												/>
											</div>
										</div>
									</template>
									<template v-else> -->
										<div v-if="_item.recordsList">
											<div
												v-for="(item__, index__) in _item.recordsList"
												: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__.check_desc"
															type="textarea"
															placeholder="请输入情况说明"
														/>
													</div>
												</div>

												<div
													class="mt10 imgItem"
													v-if="_item.pictures"
												>
													<van-image
														v-for="(item___,
														index___) in item__.pictures
															.split(',')"
														@click="showImageDetails(item___, 0)"
														:src="handleProblemImgs(item___, 0)"
														:key="index___"
													/>
												</div>
												<div class="df jfsb aic">
													<div>现场图片</div>
												</div>
												<van-uploader
													v-model="item__.fileList"
													:max-count="4"
													:after-read="afterRead"
													multiple
													capture="camera"
												/>
											</div>
										</div>
									<!-- </template> -->
									
									<div class="addCheckBtn">
										<van-button
											type="info"
											@click="addCheck(_item)"
										>
											添加检查情况
										</van-button>
									</div>

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

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

									<!-- <div class="standExplain">
										<div class="funExplain">
											<van-cell
												@click="commonQes(_item.id)"
												is-link
												title="常见问题"
												value="查看"
											/>
										</div>
									</div> -->
								<!-- </van-form> -->
							</div>
						</van-collapse-item>
					</template>
						<!-- <div class="btn"> -->
							<!-- 										<van-button
								v-if="_item.isStartBtnClick == '0' && !_item.isStop"
								@click="startCheck(_item)"
							>
								开始检查
							</van-button> -->

							<!-- 										<van-button
								v-if="_item.isStartBtnClick == '1' && !_item.isStop"
								@click="stopCheck(_item)"
							>
								暂停检查
							</van-button> -->

							<!-- 										<van-button
								class="stopBtn"
								v-if="_item.isStartBtnClick == '' && !_item.isStop"
								@click="turnStop"
							>
								跳转暂停项
							</van-button>

							<van-button
								class="stopBtn"
								v-if="_item.isStop"
								@click="reStart(_item)"
							>
								继续检查
							</van-button> -->


							<!-- <van-button
								type="info"
								style="flex: 1;"
								@click="submitCheck"
							>
								提交
							</van-button> -->
							<!-- <van-button
								type="info"
								v-else
								style="flex: 1;"
								@click="
									nextStep(
										mainList[activeKey].stylecontList,
										_item,
										index
									)
								"
							>
								完成本项
							</van-button> -->
						<!-- </div> -->
					<!-- </div> -->
				</van-collapse>
			</div>

			<div class="submit">
				<van-button type="info" style="width: 100%;" @click="submitCheck">提交</van-button>
			</div>
		</div>

		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay" :tipMsg="tipMsg"></v-mask>

		<van-overlay :show="showTaskCount">
			<div class="wrapper" @click.stop>
				<execute-task-tips :taskCount.sync="taskCount" @cancel="showTaskCount=false" @confirm="handleConfirmTaskInfo"></execute-task-tips>
			</div>
		</van-overlay>
	</div>
</template>

<script>
import headNav from '@/components/headNav.vue';
import executeTaskTips from '@/components/executeTaskTips.vue';
import { get, post, postImg, imgBaseUrl } from '@/utils/http.js';
import mask_overLay from '@/components/overLay_xy.vue';
import { ImagePreview, Notify } from 'vant';
import { isEmpty,notEmpty } from '@/utils/tool';
import { handleProblemImgs } from '@/utils/index';

export default {
	name: 'checkProcess',
	components: {
		headNav,
		executeTaskTips,
		'v-mask': mask_overLay
	},
	inject: ['reload'],
	data() {
		return {
			formData: null,
			totaNum: 0,
			complateNum: 0,
			uncheckNum: 0,
			taskCount: {
				time: ' ',
				total: 0,
				uncheck:0,
				pass: 0,
				refuse: 0,
				uninvolved: 0,
			},
			showTaskCount: false,
			searchValue: '',
			activeKey: 0,
			activeName_item: [],
			isInvolve: '',
			isCorrect: '',
			mainList: [],
			storageList: '',
			deepList: '',
			isStartBtnClick: '0',
			radio_examineOptions: [],
			handleEnabled: true,
			nowEditItem: [],
			collapseDisabled: false,
			submitList: [],
			showOverLay: false,
			tipMsg: '加载中...',
			hasChecked: false,
			showIcon: 'plus',
			isOnSearch: false,
			checkStatus: '',
			pointEvents: '',
			localStorageData: ''
		};
	},
	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;
			}
		}
	},
	computed: {
		dailyId() {
			return this.$route.params.ID
		},
		enforceId() {
			return this.$route.params.objId
		}
	},
	mounted() {
		this.init();
	},
	methods: {
		backPage() {
			this.$router.back()
		},
		init() {
			this.showOverLay = true
			const vm = this
			this.$http.get(`/v2/api/enforce-job/${this.dailyId}`).then(res => {
                if (res && res.data) {
					this.formData = res.data;
					const nodes = this.formData.check_nodes || [];
					this.totaNum = nodes.length;
					this.activeKey = 0;
					if (nodes.length > 0) {
						nodes.map(node => {
							if (node.items) {
								node.items.map(item => {
									item.checkResult = item.check_result + '';
									item.handBook = {
										request: true
									};
									item.recordsList = [{
										fileList: [],
										check_desc: '',
										pictures: '',
										item_id: item.item_id
									}]
								})
							}
						})
						const first = nodes[0]
						if (first.items && first.items.length > 0) {
							first.items.forEach(item => {
								vm.getHandbook(item.item_id, true)
							})
						}
					}
					else {
						this.showOverLay = false;
					}
					this.mainList = nodes;
					this.upateCheckNum();
                }
            })
		},
		rightClick() {
			this.$router.push(`/executeTask/add/${this.dailyId}/${this.enforceId}`);
		},
		showSearchItems() {
			// let arr = [];
			// for (let i = 0; i < this.mainList.length; i++) {
			// 	const node = this.mainList[i];
			// 	if (node.items && node.items.length > 0) {
			// 		for (let j = 0; j < node.items.length; j++) {
			// 			const item = node.items[j];
						
			// 		}
			// 	}
			// }
			this.$router.push(`/dailyItemSearch/${this.dailyId}/${this.enforceId}`);
		},
		clearSearch() {},
		commonQes(list) {
			this.$router.push({
				name: 'dailyPicTxt',
				params: {
					list
				}
			})
		},
		getHandbook(itemId, isForce) {
			let have = isForce
			if (!have) {
				const items = this.mainList[this.activeKey] && this.mainList[this.activeKey].items;
				for (let index = 0; index < items.length; index++) {
					const item = items[index]
					if (itemId === item.item_id) {
						have = item.handBook && item.handBook.request
						break
					}
				}
			}
			if (!have) {
				return
			}

			this.showOverLay = true
			this.$http.get(`/v2/api/enforce-handbook/${itemId}`).then(res => {
				if (res.data) {
					const items = this.mainList[this.activeKey] && this.mainList[this.activeKey].items
					for (let index = 0; index < items.length; index++) {
						const item = items[index]
						if (itemId === item.item_id) {
							if (res.data.other_enforce_item) {
								const otherItems = res.data.other_enforce_item.split(',');
								const list = [];
								otherItems.map(other => {
									const otherOption = other.replace('/', '');
									if (otherOption && otherOption.length > 0) {
										list.push({
											k: otherOption,
											v: ''
										});
									}
								});
								res.data.otherItems = list;
							}
							item.handBook.request = false
							item.handBook = Object.assign(item.handBook, res.data)
							break
						}
					}
				}
				this.showOverLay = false
			})
		},
		sidebarChange(index) {
			console.log(this.activeKey, index)
		},
		handleProblemImgs,
		showImageDetails(item, index) {
			ImagePreview([this.handleProblemImgs(item)]);
		},
        showHistory(itemId) {
            this.$router.push(`/history/${this.enforceId}`);
        },
        showSettingExpect(data) {
            if (data && data.setting_expect) {
                this.$router.push({
                    name: 'checkStandardExplain',
                    params: {
                        html: data.setting_expect
                    }
                })
            }
            else {
                Notify('暂无设置要求');
            }
        },
		addCheck(data) {
			const len = data.recordsList.length - 1;
			const obj = {
				check_desc: '',
				pictures: '',
				item_id: data.item_id
			};
			data.recordsList.splice(len, 0, obj);
			// data.recordsList.push(obj);
		},
		afterRead(file) {
			// console.log(file, 'file23333');
			if (file.file && file.file.size > 2000000) {
				// 创建Canvas对象(画布)
				let canvas = document.createElement('canvas');
				// 获取对应的CanvasRenderingContext2D对象(画笔)
				let context = canvas.getContext('2d');
				// 创建新的图片对象
				let img = new Image();
				// 指定图片的DataURL(图片的base64编码数据)
				img.src = file.content;

				img.onload = () => {
					// 监听浏览器加载图片完成，然后进行进行绘制

					// 指定canvas画布大小，该大小为最后生成图片的大小
					canvas.width = img.width;
					canvas.height = img.height;
					/* drawImage画布绘制的方法。(0,0)表示以Canvas画布左上角为起点，400，300是将图片按给定的像素进行缩小。
					        如果不指定缩小的像素图片将以图片原始大小进行绘制，图片像素如果大于画布将会从左上角开始按画布大小部分绘制图片，最后的图片就是张局部图。*/
					context.drawImage(img, 0, 0, img.width, img.height);
					// 将绘制完成的图片重新转化为base64编码，file.file.type为图片类型，0.92为默认压缩质量
					let base_img = canvas.toDataURL(file.file.type, 0.75);
					const blodBin = atob(base_img.split(',')[1]);
					let data = [];
					for (let i = 0; i < blodBin.length; i++) {
						data.push(blodBin.charCodeAt(i));
					}
					let blob1 = new Blob([new Uint8Array(data)], { type: 'image/png' });
					let file1 = new File([blob1], new Date().getTime() + '.png');

					console.warn(file1);

					file.file = file1;
				};
			}
		},
        uploadFile(data) {
			this.tipMsg = '上传图片中...';
            const form = new FormData();
            form.append('fileName', data.file.name);
            form.append('fileBinary', data.file);
            this.$http.post('/v2/api/file', form).then(res => {
                if (res && res.data && res.data.id) {
                    data.fileID = res.data.id;
                    this.checkFile();
                }
            })
        },
        checkFile() {
            const have = this.checkNodesFile();
            if (!have) {
                this.commitNode();
            }
        },
        checkNodesFile() {
            let have = false;
            if (this.mainList && this.mainList.length > 0) {
                for (let index = 0; index < this.mainList.length; index++) {
                    const node = this.mainList[index];
                    if (node.items && node.items.length > 0) {
                        for (let j = 0; j < node.items.length; j++) {
                            const item = node.items[j].handBook;
							if (item.recordsList && item.recordsList.length > 0) {
								for (let z = 0; z < item.recordsList.length; z++) {
									const record = item.recordsList[z];
									if (record.fileList && record.fileList.length > 0) {
										for (let m = 0; m < record.fileList.length; m++) {
											const file = record.fileList[m];
											if (!file.fileID) {
												have = true;
												this.uploadFile(file);
												break;
											}
										}
									}
									if (have) {
										break;
									}
								}
							}
							if (have) {
								break;
							}
                        }
                    }
                    if (have) {
                        break;
                    }
                }
            }
            return have;
        },
		changeCheckResult() {
			this.upateCheckNum();
		},
		upateCheckNum() {
			let check = 0, uncheck = 0, total = 0;
			let pass = 0, refuse = 0, uninvolved = 0;
			for (let i = 0; i < this.mainList.length; i++) {
				const node = this.mainList[i];
				if (node.items && node.items.length > 0) {
					total += node.items.length;
					for (let j = 0; j < node.items.length; j++) {
						const item = node.items[j];
						if (isEmpty(item.checkResult)) {
							uncheck++;
						}
						else {
							check++;
							// 0-不涉及,1-合格,2-不合格
							if (item.checkResult == 0) {
								uninvolved++;
							}
							if (item.checkResult == 1) {
								pass++;
							}
							if (item.checkResult == 2) {
								refuse++;
							}
						}
					}
				}
			}
			this.uncheckNum = uncheck;
			this.complateNum = check;
			this.totaNum = total;
			this.taskCount.total = total;
			this.taskCount.uncheck = uncheck;
			this.taskCount.pass = pass;
			this.taskCount.refuse = refuse;
			this.taskCount.uninvolved = uninvolved;
		},
		submitCheck() {
			let check = true;
			for (let i = 0; i < this.mainList.length; i++) {
				const node = this.mainList[i];
				if (node.items && node.items.length > 0) {
					for (let j = 0; j < node.items.length; j++) {
						const item = node.items[j];
						if (isEmpty(item.checkResult)) {
							check = false;
							Notify({ type: 'warning', message: `请选择 ${node.node_name} - ${item.item_name} 的检查结果` });
							break;
						}
						else {
							item.check_result = parseInt(item.checkResult);
						}
					}
				}
				if (!check) {
					break;
				}
			}
			if (check) {
				this.upateCheckNum();
				if (this.formData.start_time) {
					let dis = new Date() - new Date(this.formData.start_time);
					console.log('dis: ', dis)
					let str = '';
					const hour = Math.floor(dis / (1000 * 3600));
					if (hour < 10) {
						str = `0${hour}:`;
					}
					else {
						str = `${hour}:`
					}
					dis = dis % (1000 * 3600);
					const minute = Math.floor(dis / (1000 * 60));
					if (minute < 10) {
						str += `0${minute}:`
					}
					else {
						str += `${minute}:`
					}
					dis = dis % (1000 * 60);
					dis = Math.ceil(dis / 1000);
					if (dis < 10) {
						str += `0${dis}`
					}
					else {
						str += `${dis}`
					}
					this.taskCount.time = str;
				}
				this.showTaskCount = true;
			}
		},
		handleConfirmTaskInfo() {
			this.showTaskCount = false;
			this.showOverLay = true;
			let items = [];
			for (let i = 0; i < this.mainList.length; i++) {
				const node = this.mainList[i];
				if (node.items && node.items.length > 0) {
					items = items.concat(node.items);
				}
				items.map(item => {
					if (item.handBook.otherItems) {
						let arr = [];
						item.handBook.otherItems.map(other => {
							let v = other.v;
							if (notEmpty(v)) {
								v = '';
							}
							arr.push(v);
						});
						item.enforce_job_node_item = arr.join(',');
					}
				})
			}
			if (this.checkNodesFile() === false) {
				this.tipMsg = '保存数据中...';
				this.$http.put(`/v2/api/enforce-job/item`, items).then(res => {
					this.showOverLay = false;
					this.$toast.success({ type: 'success', message: '提交成功' })
					this.turnToRecord()
				})
			}
		},
		// 跳转消防监督检查记录
        turnToRecord() {
            this.$router.replace(`/checkRecord/${this.dailyId}`);
        },
        // 跳转复查监督检查记录
        turnToRecheckRecord() {
            this.$router.push(
                `/reviewRecord/${this.dailyId}/${this.dataList.taskId}`
            );
        },
        // 跳转检查结果
        turnToResult() {
            if (!this.hasJudge) {
                this.$router.push(`/checkResult/${this.dataList.taskId}/${this.dailyId}/normal`)
            } 
            else {
                this.$router.push(`/checkResultDetail/${this.dataList.taskId}/${this.dailyId}`)
            }
        },
	},
};
</script>

<style lang="scss" scoped>
.submit {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #FFFFFF;
	box-shadow: 0px 2px -2px #000000;
}
.checkProcess {
	font-size: 14px;

	.colorComplate {
		color: #02a7f0;
	}

	.colorNow {
		color: #03a012;
	}

	.colorNor {
		color: #a5a5a5;
	}

	.width100 {
		width: 230px;
	}

	.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;
		height: calc(100vh - 185px);
		overflow-y: auto;

		.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;
				margin-top: 20px;
				display: flex;
				justify-content: space-between;
				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;
				border-radius: 5px;
				margin-top: 20px;
				padding: 10px 15px;
				border: 1px solid #dfdfdf;
				border-bottom: 1px solid #c2c2c2;
				padding-top: 5px;

				.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 {
				font-size: 11px;
				padding: 10px 15px;
				border: 1px solid #dfdfdf;
				border-bottom: 1px solid #c2c2c2;
				border-radius: 5px;
				margin-top: 10px;
				padding-top: 5px;

				.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;
				}
			}

			.carItem {
				display: flex;
				justify-content: space-between;
				align-items: center;
				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;
		}
	}
}
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
	width: 100%;
}
</style>

<style lang="scss">
.checkProcess {
	p {
		margin: 2px 0 !important;
		word-wrap: break-word;
	}

	.checkExplain_top {
		border: 1px solid #eaeaea;
		border-bottom: 1px solid #cfcfcf;
		padding: 10px;
		box-sizing: border-box;
		// border-radius: 5px;
		margin-top: 10px;

		p {
			width: 220px;
		}
	}

	.stopClick {
		pointer-events: none;
	}

	.carItem {
		.van-cell.van-field {
			margin-left: 10px;
			width: 120px;
		}

		.van-field__body {
			input {
				padding: 0px 10px;
				background-color: #f2f2f2;
			}
		}
	}

	.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-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 #dedede;
		margin-bottom: 10px;
	}

	.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;
	}

	.checkExplain_top {
		background-color: transparent;
		// margin-top: 10px;
		width: 105.4%;
		font-size: 11px;

		.explainContent {
			color: #a3a3a3;
			font-size: 10px;
			line-height: 15px;
			letter-spacing: 2px;

			.van-swipe-item {
				height: 140px;
			}

			.swiperContainer {
				width: 220px;
				// height: 140px;
				margin: 0 auto;

				.swiper_content {
					padding-top: 5px;
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.swiper_content_item {
						flex: 1;
					}

					.swiper_img {
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 5px;

						img {
							height: 75px;
							max-width: 140px;
						}
					}

					.swiper_title {
						margin-top: 10px;
						height: 30px;
						text-align: center;
						color: #323232;
						font-size: 10px;
						line-height: 15px;
						letter-spacing: 2px;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2; //行数
						-webkit-box-orient: vertical;
					}
				}
			}
		}

		.van-cell.van-cell--clickable {
			padding: 3px 0;
			font-size: 12px;
			color: #7f7f7f;
		}

		.van-cell__title {
			color: #888;
		}

		.van-cell {
			background-color: transparent;

			.van-cell__value {
				span {
					&:last-child {
						text-decoration: underline;
					}
				}
			}
		}

		.van-cell__value {
			font-size: 12px;
			color: #02a7f0;
			text-align: right;
		}

		.van-icon.van-icon-arrow.van-cell__right-icon {
			color: #02a7f0;
			font-size: 12px;
		}

		.van-cell__right-icon {
			&::before {
				transform: rotate(0deg);
			}
		}
	}

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

	.checkRes {
		.van-radio-group.van-radio-group--horizontal {
			padding-right: 5px;
		}
	}

	.van-icon.van-icon-arrow.van-cell__right-icon {
		transform: rotate(90deg);
		padding-top: 5px;
	}

	.van-collapse-item__title--expanded .van-cell__right-icon::before {
		transform: rotate(0);
	}

	.funExplain {
		.van-icon.van-icon-arrow.van-cell__right-icon {
			transform: rotate(0deg);
			padding-top: 0px;
		}
	}
}

.van-dialog {
	border-radius: 0;
}

.van-dialog__header {
	background-color: #f0f0f0;
	padding: 10px 0;
	border-bottom: 1px solid #c9cacc;
	color: #323233;
	margin-bottom: 20px;
}

.van-dialog__message.van-dialog__message--has-title {
	color: #bf0309;
	font-weight: bold;
}
</style>
