<template>
	<div class="help">
		<!-- 主体内容 -->
		<div class="content flex algin-center justify-between" :style="{height:conBoxRouterHeight+'px'}">
			<!-- 左侧列表 -->
			<div class="content-left">
				<el-collapse v-model="activeName" accordion>
					<el-collapse-item :title="item.helpClassifyName" :name="index" v-for="(item,index) in leftList"
						:key="index">
						<div style="cursor: pointer;" v-for="(ite,ind) in item.helpWordList"
							@click="selectHelpWordId(ite.helpWordId)" :key="ind">
							{{ite.helpWordTitle}}
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>
			<!-- 右侧详情 -->
			<div class="content-right">
				<div v-if="rightInfo.helpWordContent" class="content-right-con" v-html="rightInfo.helpWordContent">

				</div>
				<el-empty v-else description="暂无内容" />
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				conBoxRouterHeight: 0,
				leftList: [], //左侧列表
				rightInfo: {}, //右侧详情
				activeName: 0,
				helpWordId: '',

			}
		},
		//挂载之前设置dom的高度
		beforeMount() {
			//获取父元素的高度
			this.conBoxRouterHeight = this.$route.query.conBoxRouterHeight

		},
		mounted() {
			this.getLeftlist()
		},
		methods: {
			selectHelpWordId(helpWordId) {
				this.helpWordId = helpWordId
				this.getContent()
			},
			//右侧详情
			getContent() {
				let data = {
					helpWordId: this.helpWordId,
				}
				this.$Request.get("/app/helpWord/selectHelpWordDetails", {
					params: data
				}).then(res => {
					if (res.code == 0) {
						this.rightInfo = res.data
					}
				});
			},
			//获取左侧帮助列表
			getLeftlist() {
				this.$Request.get("/app/helpWord/selectHelpList?types=1").then(res => {
					if (res.code == 0) {
						this.leftList = res.data
						if (this.leftList.length > 0) {
							this.helpWordId = this.leftList[0].helpWordList[0].helpWordId
							this.getContent()
						}

					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
	}

	.content-left {
		width: 30%;
		height: 100%;
		overflow: hidden;
		overflow-y: scroll;
	}

	.content-right {
		width: calc(70% - 60px);
		height: 100%;
		overflow: hidden;
		overflow-y: scroll;
		border-left: 1px solid #EBEBEB;
		padding: 0 20px;
	}

	.content-right::-webkit-scrollbar {
		/* Chrome, Safari, Opera */
		width: 0px;
	}

	.content-right::-webkit-scrollbar-thumb {
		background-color: #cccccc;
		/* 滚动条颜色 */
	}

	.content-right::-webkit-scrollbar-track {
		background-color: #ffffff;
		/* 轨道颜色 */
	}
</style>