<template>
	<div :class="prefixCls">
		<div :class="`${prefixCls}-left`">
			<a-menu
				v-if="dataList?.length"
				theme="dark"
				:selected-keys="selectedKeys"
				:collapsed="collapsed"
				:default-open-keys="defaultOpenedKeys"
				@menu-item-click="menuItemClick"
				@sub-menu-click="subMenuClick">
				<template v-for="item in dataList">
					<template v-if="item.children && item.children.length > 0">
						<a-sub-menu
							:key="item.id"
							:title="item.title">
							<template #icon>
								<mf-icon
									v-if="item.icon"
									:value="item.icon" />
							</template>
							<a-menu-item
								v-for="child in item.children"
								:key="child.key">
								{{ child.title }}
							</a-menu-item>
						</a-sub-menu>
					</template>
					<template v-else>
						<a-menu-item :key="item.id">
							<template #icon>
								<mf-icon
									v-if="item.icon"
									:value="item.icon" />
							</template>
							<div class="menu-item">
								{{ item.title }}
							</div>
						</a-menu-item>
					</template>
				</template>
			</a-menu>
		</div>
		<div :class="`${prefixCls}-right`">
			<div
				:class="`${prefixCls}-content ql-editor`"
				v-html="content"></div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, inject, onMounted, watch } from 'vue'
import { useStore } from 'vuex'

const prefixCls = 'help'

const $datas = inject('$datas')
const $axios = inject('$axios')
const defaultOpenedKeys = ref(['1'])
const selectedKeys = ref([1])
const collapsed = ref(false)

const dataList = ref([])

const store = useStore()

onMounted(() => {
	getData()
})

watch(
	() => store.getters.lang,
	() => {
		getData()
	}
)

const getData = () => {
	$axios({
		url: 'api/help/list',
		method: 'GET',
		data: {
			pageNum: 1,
			pageSize: 1000
		}
	}).then((res) => {
		dataList.value = res.rows || []
		if (dataList.value?.length) {
			selectedKeys.value = [dataList.value[0].id]
		}
	})
}

const content = computed(() => {
	let selectedKey = selectedKeys.value[0]
	if (selectedKey) {
		let item = $datas.deepFind(dataList.value, (d) => d.id == selectedKey)
		if (item) {
			return item.content
		}
	}
	return ''
})

const menuItemClick = (key) => {
	selectedKeys.value = [key]
}

const subMenuClick = (key, _openKeys) => {}
</script>

<style lang="less" scoped>
.help {
	display: flex;
	height: 100%;
	&-left {
		height: 100%;
		width: 300px;
		overflow-y: auto;
		flex-shrink: 0;

		.arco-menu-dark {
			background-color: transparent;
			.arco-menu-item {
				margin-bottom: 12px;
				background-color: transparent;
				&:hover,
				&.arco-menu-selected {
					background-color: rgb(var(--primary-6));
					border-radius: 10px;
				}
			}
		}
	}

	&-right {
		flex-grow: 1;
	}

	&-content {
		color: #fff;
		padding: 0 40px;
		background-color: #000;

		* {
			color: #999999 !important;
			background-color: transparent !important;
		}
	}
}
@media (max-width: 576px) {
	.help {
		&-left {
			width: 100px;
			flex-shrink: 0;
			
			:deep(.arco-menu-dark) {
				.arco-menu-item {
					font-size: 12px;
					height: 30px;
					line-height: 30px;
				}
				
				.arco-menu-inner {
					padding: 8px;
				}
			}
		}
	}
}
</style>
