<template>
	<div class="funExplain">
		<headNav :title="'检查流程及方法'"></headNav>

		<!-- 检查方法说明 -->
		<div class="explain">
			<div class="headTip FontColorInfo">检查方法说明：</div>

			<div class="content"><div v-html="trueExamineFunState"></div></div>
		</div>

		<!-- 检查步骤说明 -->
		<div class="step">
			<div class="headTip FontColorInfo">检查步骤说明：</div>

			<div class="stepCard"><div v-html="examineFunState"></div></div>
		</div>

		<div class="backCheck"><van-button type="info" @click="backPage">返回检查</van-button></div>

		<!-- 遮罩层 -->
		<v-mask :showOverLay="showOverLay"></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: 'funExplain',
	components: {
		headNav,
		'v-mask': mask_overLay
	},
	data() {
		return {
			showOverLay: false,
			examineFunState: '',
			trueExamineFunState: ''
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {
			this.getMainListApi();
		},

		// 获取主列表Api
		getMainListApi() {
			this.showOverLay = true;
			get(`/cdsupervisionStylestep/allCheck/${this.$route.params.ID}`).then(res => {
				if (res.success == true) {
					this.showOverLay = false;
					res.data.map(i => {
						i.stylecontList.map(j => {
							if (j.id === this.$route.params.itemID) {
								this.examineFunState = j.examineFunState;
								this.trueExamineFunState = j.trueExamineFunState;
							}
						});
					});
				}
			});
		},

		backPage() {
			this.$router.go(-1);
		}
	}
};
</script>

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

	.headTip {
		margin-bottom: 10px;
		padding: 0 15px;
	}

	.explain {
		margin-top: 57px;
	}

	.step {
		margin-top: 10px;
	}

	.backCheck {
		background-color: #fff;
		display: flex;
		justify-content: center;
		padding-top: 30px;
		padding-bottom: 20px;
	}

	.explain,
	.step {
		.content {
			background-color: #fff;
			padding: 10px 15px;
			color: #555;
		}

		.stepCard {
			background-color: #fff;
			padding: 10px 15px;
			color: #555;
		}
	}
}
</style>

<style lang="scss">
.funExplain {
	.van-button.van-button--info.van-button--normal {
		padding: 0px 25px;
		height: 35px;
	}

	.van-button__content {
		height: 35px;
	}
	
	p {
		word-wrap: break-word;
	}
	
	img {
		width: 100%;
		height: 100%;
	}
}
</style>
