<template>
	<div class="commonQes">
		<headNav :title="'常见问题'"></headNav>

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

			<div class="content">
				<div
					v-for="(item, index) in examineNormState"
					class="mb10"
					style="padding: 15px; background-color: #fff;"
				>
					<div class="fb">{{ item }}</div>
					<div class="mt10">
						<van-image :src="getImgUrl(examineNormImgs[index])"></van-image>
					</div>
				</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: 'commonQes',
	components: {
		headNav,
		'v-mask': mask_overLay
	},
	mounted() {
		this.init();
	},
	data() {
		return {
			examineNormState: '',
			examineNormImgs: '',
			showOverLay: false
		};
	},
	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.examineNormState = j.commonProblemConts.split('@');
								this.examineNormImgs = j.commonProblemImgs.split('@');
							}
						});
					});
				}
			});
		},

		getImgUrl(item, index) {
			return imgBaseUrl + item;
		},

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

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

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

	.explain {
		margin-top: 57px;
	}

	.content {
		width: 100vw;
		box-sizing: border-box;
	}

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

	.explain {
		.content {
			color: #555;
		}
	}
}
</style>

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

	.van-button__content {
		height: 35px;
	}

	p {
		word-wrap: break-word;
	}

	.van-image {
		width: 100%;
	}
}
</style>
