<template>
	<div class="page-show-vue">
		<el-row type="border-card" style="height: 100%">
			<el-col :span="actionTabVisible ? 18 : 24" style="padding: 20px;border-right: 1px solid #f1f1f1;height: 100%;overflow: auto;">
				<el-row>
					<el-col :span="navigationList.length > 0 ? 18 : 24">
						<div style="max-width: 1000px; margin: 0 auto; padding-left: 10px">
							<div class="wiki-title" ref="wikiTitleRef">{{ wikiPage.name }}</div>
							<div class="wiki-author">
								<el-row>
									<el-col :span="12">
										<span v-if="wikiPage.updateUserName">{{ wikiPage.updateUserName }}　于　{{wikiPage.updateTime}}　修改</span>
										<span v-else class="create-user-time">{{ wikiPage.createUserName }}　于　{{wikiPage.createTime}}　创建</span>
									</el-col>
									<el-col :span="12" style="text-align: right;">
										<el-link type="primary" :icon="ElIconChatLineRound" :underline="false" @click="showCommentWiki" style="margin-right: 15px">评论</el-link>
										<el-upload v-if="wikiPageAuth.canUploadFile === 1"
										           :on-success="uploadFileSuccess"
										           :on-error="uploadFileError"
										           :action="uploadFileUrl"
										           :data="uploadFormData"
										           :with-credentials="true" class="upload-page-file" name="files"
										           show-file-list multiple :limit="999"
										           style="display: inline; margin-right: 15px;vertical-align: middle;">
											<el-link type="primary" :underline="false" :icon="ElIconUpload">上传附件</el-link>
										</el-upload>
										<el-link v-if="wikiPageAuth.canEdit === 1" type="primary" :underline="false" :icon="ElIconEdit" @click="editWiki" style="margin-right: 15px;">编辑</el-link>
										<el-dropdown style="margin-right: 15px;vertical-align: middle;" trigger="click" @command="handleMoreCommand">
											<el-link type="primary" :underline="false">
												更多
												<el-icon class="el-icon--right"><el-icon-arrow-down/></el-icon>
											</el-link>
											<template v-slot:dropdown>
												<el-dropdown-menu>
													<el-dropdown-item command="showPageHistory" :icon="ElIconTime">查看历史版本</el-dropdown-item>
													<el-dropdown-item command="editAuth" v-if="wikiPageAuth.canConfigAuth == 1" :icon="ElIconSCheck">权限设置</el-dropdown-item>
													<el-dropdown-item command="showOpenPage" v-if="spaceInfo.openDoc == 1" :icon="ElIconShare">查看开放文档</el-dropdown-item>
													<el-dropdown-item command="showMobileView" v-if="spaceInfo.openDoc == 1" :icon="ElIconMobilePhone">手机端查看</el-dropdown-item>
													<el-dropdown-item command="exportWord" :icon="ElIconDownload">导出为Word文档</el-dropdown-item>
													<el-dropdown-item command="deletePage" v-if="wikiPageAuth.canDelete == 1" :icon="ElIconDelete">删除</el-dropdown-item>
												</el-dropdown-menu>
											</template>
										</el-dropdown>
									</el-col>
								</el-row>
							</div>
							<div class="wiki-files">
								<el-table v-show="pageFileList.length > 0" :data="pageFileList" border style="width: 100%; margin-bottom: 5px">
									<el-table-column label="文件名" show-overflow-tooltip>
										<template v-slot="scope">
											<el-link target="_blank" :href="scope.row.fileUrl" type="primary">{{scope.row.fileName }}</el-link>
										</template>
									</el-table-column>
									<el-table-column prop="createUserName" label="创建人" width="110px" show-overflow-tooltip></el-table-column>
									<el-table-column label="文件大小" width="120px">
										<template v-slot="scope">{{computeFileSize(scope.row.fileSize) }}</template>
									</el-table-column>
									<el-table-column prop="createTime" label="创建时间" width="160px"></el-table-column>
									<el-table-column prop="downloadNum" label="下载次数" width="90px">
										<template v-slot="scope">{{scope.row.downloadNum || 0}}</template>
									</el-table-column>
									<el-table-column label="操作" width="90px" v-if="wikiPageAuth.canDeleteFile == 1">
										<template v-slot="scope">
											<el-button v-on:click="deletePageFile(scope.row)">删除</el-button>
										</template>
									</el-table-column>
								</el-table>
							</div>
							<div ref="pageContentRef" class="wiki-page-content">
								<div v-html="pageShowDetail" class="markdown-body" v-if="wikiPage.editorType == 2" v-highlight></div>
								<div v-html="pageShowDetail" class="wang-editor-body" v-else></div>
							</div>
							<div style="margin-top: 40px; font-size: 14px">
				                <span style="vertical-align: top" class="is-link">
				                  <span v-show="wikiPage.selfZan == 0" v-on:click="zanPage(1)"><img src="../../assets/img/zan.png" style="vertical-align: middle"/>赞</span>
				                  <span v-show="wikiPage.selfZan == 1" v-on:click="zanPage(0)"><img src="../../assets/img/zan.png" style="vertical-align: middle; transform: rotateX(180deg)"/>踩</span>
				                </span>
								<span style="margin-left: 10px; vertical-align: top">
				                  <span v-if="wikiPage.selfZan == 0 && wikiPage.zanNum <= 0">成为第一个赞同者</span>
				                  <span v-else-if="wikiPage.selfZan == 0 && wikiPage.zanNum > 0">
				                    <span class="is-link" v-on:click="showZanPageUser">{{ wikiPage.zanNum }}人</span>赞了它
				                  </span>
				                  <span v-else-if="wikiPage.selfZan == 1 && wikiPage.zanNum <= 1">我赞了它</span>
				                  <span v-else-if="wikiPage.selfZan == 1 && wikiPage.zanNum > 1">
				                    <span class="is-link" v-on:click="showZanPageUser">我和{{ wikiPage.zanNum - 1 }}个其他人</span>赞了它
				                  </span>
				                </span>
								<span style="margin-left: 10px">
                                    <el-icon style="font-size: 16px; color: #666;vertical-align: middle;"><el-icon-view/></el-icon>{{ wikiPage.viewNum }}次阅读
								</span>
							</div>
						</div>
					</el-col>
					<el-col :span="navigationList.length > 0 ? 6 : 0" v-if="navigationList.length > 0">
						<Navigation ref="navigationRef" :heading="navigationList"></Navigation>
					</el-col>
				</el-row>
			</el-col>
			<el-col :span="6" style="height: 100%" v-show="actionTabVisible">
				<el-icon @click="closeActionTab" class="close-action-tab">
					<el-icon-close/>
				</el-icon>
				<el-tabs v-model="actionTabActiveName" @tab-click="actionTabClick">
					<el-tab-pane label="评论" name="comment">
						<Comment/>
					</el-tab-pane>
					<el-tab-pane label="修改历史" name="history">
						<div class="action-tab-box">
							<div v-if="pageHistoryList.length <= 0" class="action-box-empty">
								暂无修改历史记录
							</div>
							<el-timeline v-else>
								<el-timeline-item v-for="history in pageHistoryList">
									<el-tag :type="pageHistoryChoice.id === history.id ? history.loading === 3 ? 'danger' : 'success' : 'info'" class="history-item" @click="historyClick(history)">
										<div>{{ history.createUserName }}</div>
										<div>{{ history.createTime }}</div>
									</el-tag>
									<el-icon class="history-loading-status" v-show="history.loading===1"><el-icon-loading/></el-icon>
									<el-icon class="history-loading-status" v-show="history.loading===2"><el-icon-circle-check/></el-icon>
									<el-icon class="history-loading-status" v-show="history.loading===3"><el-icon-circle-close/></el-icon>
								</el-timeline-item>
							</el-timeline>
						</div>
					</el-tab-pane>
				</el-tabs>
			</el-col>
		</el-row>
		<!--手机扫码查看弹窗-->
		<el-dialog title="手机扫码查看" v-model="mobileScanDialogVisible" width="400px">
			<div style="text-align: center">
				<div class="mobile-qr">
					<canvas ref="qrCodeDivRef"></canvas>
				</div>
				<div>使用微信或手机浏览器扫一扫查看</div>
				<div>或 <a target="_blank" :href="qrCodeUrl">直接访问</a></div>
			</div>
		</el-dialog>
		<!--点赞人员弹窗-->
		<el-dialog title="赞了它的人" v-model="zanUserDialogVisible" width="600px">
			<el-table :data="zanUserList" border :show-header="false" style="width: 100%; margin-bottom: 5px">
				<el-table-column prop="createUserName" label="用户"></el-table-column>
				<el-table-column prop="createTime" label="时间"></el-table-column>
			</el-table>
		</el-dialog>
		<!--人员权限弹窗-->
		<el-dialog title="页面权限" v-model="pageAuthDialogVisible" width="900px">
			<el-row>
				<el-select v-model="pageAuthNewUser" filterable remote reserve-keyword autoComplete="new-password" placeholder="请输入名字、邮箱、账号搜索用户" :remote-method="getSearchUserList" :loading="pageAuthUserLoading" style="width: 750px; margin-right: 10px">
					<el-option v-for="item in searchUserList" :key="item.id" :label="item.userName" :value="item.id"></el-option>
				</el-select>
				<el-button v-on:click="addPageAuthUser">添加</el-button>
			</el-row>
			<el-table :data="pageAuthUserList" border style="width: 100%; margin: 10px 0">
				<el-table-column prop="userName" label="用户" width="150"></el-table-column>
				<el-table-column label="权限">
					<template v-slot="scope">
						<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.editPage">编辑</el-checkbox>
						<!--						<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.commentPage">评论</el-checkbox>-->
						<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.deletePage">删除</el-checkbox>
						<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.pageFileUpload">文件上传</el-checkbox>
						<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.pageFileDelete">文件删除</el-checkbox>
						<el-checkbox :true-label="1" :false-label="0" v-model="scope.row.pageAuthManage">权限管理</el-checkbox>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="80">
					<template v-slot="scope">
						<el-button size="small" type="danger" plain v-on:click="deleteUserPageAuth(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div>
				<el-button type="primary" v-on:click="saveUserPageAuth">保存配置</el-button>
			</div>
		</el-dialog>
		<div ref="imagePreviewRef">
			<el-image-viewer
					v-if="showImagePreview"
					:url-list="showImagePreviewList"
					:on-close="closeImagePreview"
					:initial-index="previewInitialIndex"
			/>
		</div>
		<form method="post" ref="downloadFormRef" :action="downloadFormParam.url" target="_blank">
			<input type="hidden" :name="key" :value="val" v-for="(val, key) in downloadFormParam.param"/>
		</form>
	</div>
</template>

<script setup>
import {
	ArrowDown as ElIconArrowDown,
	View as ElIconView,
	Close as ElIconClose,
	Delete as ElIconDelete,
	Loading as ElIconLoading,
	CircleCheck as ElIconCircleCheck,
	CircleClose as ElIconCircleClose,
	ChatLineRound as ElIconChatLineRound,
	Upload as ElIconUpload,
	Edit as ElIconEdit,
	Timer as ElIconTime,
	Stamp as ElIconSCheck,
	Share as ElIconShare,
	Iphone as ElIconMobilePhone,
	Download as ElIconDownload,
} from '@element-plus/icons-vue'
import {toRefs, ref, reactive, onMounted, watch, defineProps, defineEmits, defineExpose, computed} from 'vue';
import {onBeforeRouteUpdate, useRoute, useRouter} from "vue-router";
import { ElMessageBox, ElMessage, ElNotification } from 'element-plus';
import QRCode from 'qrcode'
import unitUtil from '../../assets/lib/UnitUtil.js'
import htmlUtil from '../../assets/lib/HtmlUtil.js'
import pageApi from '../../assets/api/page'
import userApi from '../../assets/api/user'
import Navigation from './components/Navigation.vue'
import Comment from './show/Comment.vue'
import {mavonEditor} from 'mavon-editor'
import 'mavon-editor/dist/markdown/github-markdown.min.css'
import 'mavon-editor/dist/css/index.css'
import {useStorePageData} from "@/store/pageData";

let page = {
	colorArr: ['#67C23A', '#409EFF', '#E6A23C', '#F56C6C', '#909399', '#303133'],
	userHeadColor: {},
}

// 页面展示相关
let wikiPage = ref({});
let wikiPageAuth = ref({});
let pageContent = ref({});
let pageFileList = ref([]);
let selfUserId = ref(0);
let uploadFileList = ref([]);
let uploadFormData = ref({pageId: 0});
let zanUserDialogVisible = ref(false);
let zanUserList = ref([]);
let parentPath = ref({});
// 手机扫码
let qrCodeUrl = ref('');
let mobileScanDialogVisible = ref(false);
let uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + '/zyplayer-doc-wiki/page/file/upload');
// 页面权限
let pageAuthDialogVisible = ref(false);
let pageAuthUserList = ref([]);
let searchUserList = ref([]);
let pageAuthNewUser = ref('');
let pageAuthUserLoading = ref(false);
// 右侧标签页
let actionTabVisible = ref(false);
let actionTabActiveName = ref('comment');
let pageHistoryDetail = ref('');
let pageShowDetail = ref('');
let pageHistoryChoice = ref({});
let pageHistoryList = ref([]);
let pageHistoryPageNum = ref(1);
// 左侧导航菜单
let navigationList = ref([]);
// 大图预览
let previewInitialIndex = ref(0);
let showImagePreview = ref(false);
let showImagePreviewList = ref([]);
let markdownToolbars = ref({fullscreen: true, readmodel: true,});
// 下载为Word
let downloadFormParam = ref({url: 'zyplayer-doc-wiki/page/download', param: {},});

let route = useRoute();
let router = useRouter();

let storePage = useStorePageData();

const props = defineProps({
	spaceInfo: Object,
});
let emit = defineEmits(['switchSpace', 'changeExpandedKeys', 'loadPageList']);
onBeforeRouteUpdate((to) => {
	initQueryParam(to);
});
onMounted(() => {
	initQueryParam(route);
});

const editWiki = () => {
	let param = {pageId: parentPath.value.pageId}
	pageApi.pageLock(param).then(() => {
		router.push({
			path: '/page/edit',
			query: {pageId: parentPath.value.pageId}
		})
	})
}
const getSearchUserList = (query) => {
	if (query == '') return
	pageAuthUserLoading.value = true
	userApi.getUserBaseInfo({search: query}).then((json) => {
		searchUserList.value = json.data || []
		pageAuthUserLoading.value = false
	})
}
const handleMoreCommand = (val) => {
	if (val == 'editAuth') {
		editWikiAuth()
	} else if (val == 'deletePage') {
		deleteWikiPage()
	} else if (val == 'showPageHistory') {
		showPageHistory()
	} else if (val == 'showOpenPage') {
		showOpenPage()
	} else if (val == 'showMobileView') {
		showMobileView()
	} else if (val == 'exportWord') {
		exportWord()
	}
}
let downloadFormRef = ref();
const exportWord = () => {
	downloadFormParam.value.param = {
		pageId: wikiPage.value.id,
	}
	setTimeout(() => downloadFormRef.value.submit(), 0)
}
const showOpenPage = () => {
	if (props.spaceInfo.openDoc !== 1) {
		ElMessage.warning('该空间未开放，无法查看开放文档地址')
	} else {
		let routeUrl = router.resolve({
			path: '/page/share/view',
			query: {pageId: wikiPage.value.id, space: props.spaceInfo.uuid}
		})
		window.open(routeUrl.href, '_blank')
	}
}
let qrCodeDivRef = ref();
const showMobileView = () => {
	if (props.spaceInfo.openDoc !== 1) {
		ElMessage.warning('该空间未开放，无法查看开放文档地址')
	} else {
		let routeUrl = router.resolve({
			path: '/page/share/mobile/view',
			query: {pageId: wikiPage.value.id, space: props.spaceInfo.uuid}
		})
		mobileScanDialogVisible.value = true
		let hostPath = window.location.href.split('#')[0]
		setTimeout(() => {
			qrCodeUrl.value = hostPath + routeUrl.href
			QRCode.toCanvas(qrCodeDivRef.value, qrCodeUrl.value, {
					scale: 5, height: 250, wight: 250,
				}, (error) => {
					if (error) console.error(error)
				}
			)
		}, 0)
	}
}
const addPageAuthUser = () => {
	if (pageAuthNewUser.value.length <= 0) {
		ElMessage.warning('请先选择用户')
		return
	}
	if (
		!!searchUserList.value.find(
			(item) => item.userId == pageAuthNewUser.value
		)
	) {
		pageAuthNewUser.value = ''
		return
	}
	let userName = ''
	for (let i = 0; i < searchUserList.value.length; i++) {
		if (pageAuthNewUser.value == searchUserList.value[i].id) {
			userName = searchUserList.value[i].userName
			break
		}
	}
	pageAuthUserList.value.push({
		userName: userName,
		userId: pageAuthNewUser.value,
		editPage: 0,
		commentPage: 0,
		deletePage: 0,
		pageFileUpload: 0,
		pageFileDelete: 0,
		pageAuthManage: 0,
	})
	pageAuthNewUser.value = ''
}
const editWikiAuth = () => {
	pageAuthNewUser.value = []
	pageAuthUserList.value = []
	let param = {pageId: wikiPage.value.id}
	pageApi.getPageUserAuthList(param).then((json) => {
		pageAuthUserList.value = json.data || []
		pageAuthDialogVisible.value = true
	})
}
const saveUserPageAuth = () => {
	let param = {
		pageId: wikiPage.value.id,
		authList: JSON.stringify(pageAuthUserList.value),
	}
	pageApi.assignPageUserAuth(param).then(() => {
		ElMessage.success('保存成功！')
	})
}
const notOpen = () => {
	ElMessage.warning('暂未开放')
}
const deleteUserPageAuth = (row) => {
	let pageAuthUserList = []
	for (let i = 0; i < pageAuthUserList.value.length; i++) {
		let item = pageAuthUserList.value[i]
		if (item.userId != row.userId) {
			pageAuthUserList.push(pageAuthUserList.value[i])
		}
	}
	pageAuthUserList.value = pageAuthUserList
}
const deleteWikiPage = () => {
	ElMessageBox.confirm('确定要删除此页面及其所有子页面吗？', '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(() => {
			let param = {pageId: wikiPage.value.id}
			pageApi.pageDelete(param).then(() => {
				// 重新加载左侧列表，跳转到展示页面
				emit('loadPageList');
				router.push({
					path: '/home',
					query: {spaceId: wikiPage.value.spaceId}
				})
			})
		})
		.catch(() => {
		})
}
const actionTabClick = (tab) => {
	if (tab.name === 'comment') {
		showCommentWiki()
	} else if (tab.name === 'history') {
		showPageHistory()
	}
}
const closeActionTab = () => {
	actionTabVisible.value = false
	clearHistory()
	computeNavigationWidth()
}
const showCommentWiki = () => {
	actionTabVisible.value = true
	actionTabActiveName.value = 'comment'
	computeNavigationWidth()
}
const showPageHistory = () => {
	actionTabVisible.value = true
	actionTabActiveName.value = 'history'
	clearHistory()
	computeNavigationWidth()
}
let navigationRef = ref();
const computeNavigationWidth = () => {
	setTimeout(() => {
		if (navigationRef.value) {
			navigationRef.value.computeNavigationWidth()
		}
	}, 100)
}
const getPageHistoryByScroll = () => {
	if (pageHistoryPageNum.value <= 0) {
		return
	}
	pageHistoryPageNum.value++
	getPageHistory(wikiPage.value.id, pageHistoryPageNum.value)
}
const getPageHistory = (pageId, pageNum) => {
	if (pageNum == 1) {
		pageHistoryList.value = []
		pageHistoryPageNum.value = 1
	}
	let param = {pageId: pageId, pageNum: pageNum}
	pageApi.pageHistoryList(param).then((json) => {
		let historyList = json.data || []
		if (historyList.length <= 0) {
			pageHistoryPageNum.value = 0
		} else {
			historyList.forEach((item) => (item.loading = 0))
			pageHistoryList.value = pageHistoryList.value.concat(historyList)
		}
	})
}
const historyClick = (history) => {
	if (pageHistoryChoice.value.id === history.id && !!pageHistoryDetail.value) {
		return
	}
	pageHistoryChoice.value.loading = 0
	pageHistoryChoice.value = history
	// 缓存一下，但如果历史页面多了而且很大就占内存，也可以每次去拉取，先这样吧
	if (history.content) {
		history.loading = 2
		pageHistoryDetail.value = history.content
		pageShowDetail.value = history.content
		setTimeout(() => {
			previewPageImage()
			createNavigationHeading()
		}, 500)
	} else {
		history.loading = 1
		pageApi
			.pageHistoryDetail({id: history.id})
			.then((json) => {
				history.loading = 2
				history.content = json.data || '--'
				if (wikiPage.value.editorType === 2) {
					history.content = mavonEditor.getMarkdownIt().render(history.content)
				}
				pageHistoryDetail.value = history.content
				pageShowDetail.value = history.content
				setTimeout(() => {
					previewPageImage()
					createNavigationHeading()
				}, 500)
			})
			.catch(() => {
				history.loading = 3
			})
	}
}
const clearHistory = () => {
	pageHistoryChoice.value.loading = 0
	pageHistoryDetail.value = ''
	pageHistoryChoice.value = {}
	pageHistoryList.value.forEach((item) => (item.loading = 0))
	pageShowDetail.value = pageContent.value.content
}
const computeFileSize = (fileSize) => {
	return unitUtil.computeFileSize(fileSize)
}
const loadPageDetail = (pageId) => {
	clearHistory()
	pageApi.pageDetail({id: pageId}).then((json) => {
		let result = json.data || {}
		let wikiPageRes = result.wikiPage || {}
		wikiPageRes.selfZan = result.selfZan || 0
		wikiPage.value = wikiPageRes
		pageContent.value = result.pageContent || {}
		pageFileList.value = result.fileList || []
		selfUserId.value = result.selfUserId || 0
		uploadFormData.value = {pageId: wikiPage.value.id}
		wikiPageAuth.value = {
			canEdit: result.canEdit,
			canDelete: result.canDelete,
			canUploadFile: result.canUploadFile,
			canDeleteFile: result.canDeleteFile,
			canConfigAuth: result.canConfigAuth,
		}
		if (wikiPage.value.editorType === 2) {
			pageContent.value.content = mavonEditor.getMarkdownIt().render(pageContent.value.content)
		}
		pageShowDetail.value = pageContent.value.content
		// 修改标题
		document.title = wikiPageRes.name || 'WIKI-内容展示'
		// 修改最后点击的项，保证刷新后点击编辑能展示编辑的项
		// if (!lastClickNode.value.id) {
		// 	lastClickNode.value = {id: wikiPage.id, nodePath: wikiPage.name};
		// }
		// 调用父方法切换选择的空间
		emit('switchSpace', wikiPage.value.spaceId);
		// 调用父方法展开目录树
		emit('changeExpandedKeys', pageId);
		setTimeout(() => {
			previewPageImage()
			createNavigationHeading()
		}, 500);
		storePage.pageInfo = wikiPageRes;
	})
	getPageHistory(pageId, 1)
}
let wikiTitleRef = ref();
const createNavigationHeading = () => {
	let navigationListVal = htmlUtil.createNavigationHeading()
	// 标题加到导航里面去
	if (navigationListVal.length > 0) {
		let wikiTile = wikiPage.value.name || 'WIKI-内容展示'
		navigationListVal.unshift({
			level: 1,
			node: wikiTitleRef.value,
			text: wikiTile,
		})
	}
	navigationList.value = navigationListVal;
}
const closeImagePreview = () => {
	showImagePreview.value = false
}
let pageContentRef = ref();
const previewPageImage = () => {
	const imgArr = []
	const imgSelector = pageContentRef.value.querySelectorAll('img')
	imgSelector.forEach((item, index) => {
		imgArr.push(item.src)
		item.onclick = () => {
			previewInitialIndex.value = index
			showImagePreviewList.value = imgArr
			showImagePreview.value = true
			setTimeout(() => initImageViewerMask(), 0)
		}
	})
}
let imagePreviewRef = ref();
const initImageViewerMask = () => {
	// 图片预览遮罩点击隐藏预览框
	let imageViewerMask = imagePreviewRef.value.querySelectorAll(
		'.el-image-viewer__mask'
	)
	imageViewerMask.forEach((item) => {
		item.onclick = () => {
			showImagePreview.value = false
		}
	})
}
const zanPage = (yn) => {
	let param = {yn: yn, pageId: wikiPage.value.id}
	pageApi.updatePageZan(param).then(() => {
		wikiPage.value.selfZan = yn
		wikiPage.value.zanNum = wikiPage.value.zanNum + (yn == 1 ? 1 : -1)
	})
}
const showZanPageUser = () => {
	zanUserDialogVisible.value = true
	zanUserList.value = []
	let param = {pageId: wikiPage.value.id}
	pageApi.pageZanList(param).then((json) => {
		zanUserList.value = json.data
	})
}
const uploadFileError = (err) => {
	ElMessage.error('上传失败，' + err)
}
const uploadFileSuccess = (response) => {
	if (response.errCode == 200) {
		pageFileList.value.push(response.data)
		ElMessage.success('上传成功！')
	} else {
		ElMessage('上传失败：' + (response.errMsg || '未知错误'))
	}
}
const deletePageFile = (row) => {
	ElMessageBox.confirm('确定要删除此文件吗？', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	}).then(() => {
		let param = {id: row.id}
		pageApi.deletePageFile(param).then(() => {
			let pageFileList = []
			for (let i = 0; i < pageFileList.value.length; i++) {
				if (pageFileList.value[i].id != row.id) {
					pageFileList.push(pageFileList.value[i])
				}
			}
			pageFileList.value = pageFileList
		})
	})
}
const getUserHeadBgColor = (userId) => {
	let color = page.userHeadColor[userId]
	if (!color) {
		color =
			page.colorArr[Math.ceil(Math.random() * page.colorArr.length) - 1]
		page.userHeadColor[userId] = color
	}
	return color
}
const initQueryParam = (to) => {
	parentPath.value = {pageId: to.query.pageId}
	if (!!parentPath.value.pageId) {
		loadPageDetail(parentPath.value.pageId)
	}
}
</script>

<style lang="scss" scoped>
.page-show-vue {
  .wiki-page-content {
    margin-top: 20px;
  }
}
</style>

<style>
@import '../../assets/lib/wangEditor.css';

.page-show-vue {
	height: 100%;
	overflow: hidden;
}

.page-show-vue .icon-collapse {
	float: left;
	font-size: 25px;
	color: #aaa;
	margin-top: 8px;
	cursor: pointer;
}

.page-show-vue .icon-collapse:hover {
	color: #eee;
}

.page-show-vue .wiki-title {
	font-size: 20px;
	text-align: center;
	font-weight: bold;
}

.page-show-vue .create-user-time {
	margin-right: 20px;
}

.page-show-vue .wiki-author {
	font-size: 14px;
	color: #888;
	padding: 20px 0;
	height: 40px;
	line-height: 40px;
}

.page-show-vue .wiki-page-content img {
	cursor: pointer;
	max-width: 100%;
}

.page-show-vue .wiki-page-content img:hover {
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
}

.page-show-vue .upload-page-file .el-upload-list {
	display: none;
}

.page-show-vue .is-link {
	color: #1e88e5;
	cursor: pointer;
}

.page-show-vue #newPageContentDiv .w-e-text-container {
	height: 600px !important;
}

.page-show-vue .head {
	float: left;
	background-color: #ccc;
	border-radius: 50%;
	margin-right: 10px;
	width: 45px;
	height: 45px;
	line-height: 45px;
	text-align: center;
	color: #fff;
}

.page-show-vue .el-tabs__header {
	margin: 0;
}

.page-show-vue .el-tabs__nav-wrap {
	padding: 0 20px;
}

.page-show-vue .close-action-tab {
	position: absolute;
	right: 15px;
	top: 12px;
	cursor: pointer;
	z-index: 1;
}

.page-show-vue .action-tab-box {
	height: calc(100vh - 120px);
	overflow: auto;
	padding: 20px 10px;
}

.page-show-vue .action-box-empty {
	text-align: center;
	padding-top: 30px;
	color: #888;
	font-size: 14px;
}

.page-show-vue .history-item {
	height: 55px;
	line-height: 25px;
	cursor: pointer;
	vertical-align: middle;
}

.page-show-vue .history-loading-status {
	margin-left: 5px;
	color: #67c23a;
}

.page-show-vue .history-loading-status.el-icon-circle-close {
	color: #f56c6c;
}

.page-show-vue .el-timeline {
	padding-inline-start: 0;
}

.mobile-qr {
	width: 250px;
	height: 250px;
	border: 1px solid #ccc;
	display: inline-block;
	border-radius: 4px;
	margin-bottom: 10px;
	padding: 5px;
}
</style>
