<template>
	<div class="checkStandardExplain">
		<headNav title="设置要求"></headNav>
		
		<!-- 检查方法说明 -->
		<div class="explain">
			<!-- <div class="headTip FontColorInfo">
				设置要求：
			</div> -->
			
			<div class="content">
				<div class="html" v-if="html" v-html="html"></div>
				<van-empty v-else description="暂无设置要求" />
			</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 } from '@/utils/http.js'
	import mask_overLay from '@/components/overLay_xy.vue'
	
	export default {
		name: 'checkStandardExplain',
		components: {
			headNav,
			'v-mask': mask_overLay
		},
		mounted() {
			this.init();
		},
		data() {
			return {
				examineNormState: '',
				html: null,
				showOverLay: false
			}
		},
		computed: {
			itemId() {
				return this.$route.params.ID
			},
			isAdd() {
				return this.$route.query.isAdd || 0
			}
		},
		methods: {
			// 初始化
			init() {
				if (this.itemId) {
					this.showOverLay = true;
					let url = `/v2/api/enforce_job_template_handbook/${this.itemId}`;
					if (this.isAdd == 1) {
						url = `/v2/api/enforce-handbook/${this.itemId}`;
					}
					get(url).then(res => {
						if (res && res.setting_expect) {
							this.html = res.setting_expect;
						}
						this.showOverLay = false;
					}).catch(e => {
						this.showOverLay = false;
					})
				}
			},

			backPage() {
				this.$router.back();
			}
		},
	}
</script>

<style lang="scss" scoped>
.content {
	height: calc(100vh - 140px);
	overflow: auto;
}
.checkStandardExplain {
	font-size: 14px;
	
	.headTip {
		margin-bottom: 10px;
		padding: 0 15px;
	}
	
	.explain {
		margin-top: 57px;
	}
	
	.backCheck {
		background-color: #fff;
		display: flex;
		justify-content: center;
		padding-top: 30px;
		padding-bottom: 20px;
	}
	
	.explain {
		
		.content {
			background-color: #fff;
			padding: 10px 15px;
			color: #555;
			width: 100vw;
			box-sizing: border-box;
		}
	}
	
}
</style>

<style lang="scss">
.html {
	img {
		width: 100% !important;
	}
}
.checkStandardExplain {
	p {
		word-wrap: break-word;
	}
	
	.van-button.van-button--info.van-button--normal {
		padding: 0px 25px;
		height: 35px;
	}
	
	.van-button__content {
		height: 35px;
	}
}
</style>
