<template>
	<transition
		name="fade"
		enter-active-class="ant-fade-enter ant-fade-enter-active"
		leave-active-class="ant-fade-leave ant-fade-leave-active"
	>
		<div class="markdown-preview-wrapper" v-show="visible" @click.self="closeMarkdownPreview">
			<!-- 顶部工具栏 -->
			<div class="tip-wrapper" v-if="visible">
				<div class="name" :title="$file.getFileNameComplete(fileInfo)">
					{{ $file.getFileNameComplete(fileInfo) }}
					<span class="un-save" v-show="isModify">（未保存）</span>
				</div>

				<div class="editor-preview">在线预览{{ editable ? ' & 编辑' : '' }}</div>

				<div class="tool-wrapper">
					<a
						class="item download-link"
						target="_blank"
						:href="$file.getDownloadFilePath(fileInfo)"
						:download="$file.getFileNameComplete(fileInfo)"
					>
						<download-outlined title="下载" />
					</a>

					<a-tooltip placement="bottom">
						<template #title>
							1. 点击文档以外的区域可退出查看<br />
							2. 按 Esc 键可退出查看
						</template>
						<div class="item text-wrapper">
							<span class="text">操作提示</span>
							<bulb-outlined />
						</div>
					</a-tooltip>

					<close-outlined class="item" title="关闭预览" @click="closeMarkdownPreview" />
				</div>
			</div>

			<!-- Markdown编辑器 -->
			<a-spin :spinning="markdownLoading">
				<mavon-editor
					ref="mavonEditor"
					v-model:value="markdownText"
					:toolbars="toolbars"
					:editable="editable"
					:toolbarsFlag="toolbarsFlag"
					:external-link="externalLink"
					:subfield="screenWidth > 768"
					defaultOpen="preview"
					@save="handleModifyFileContent"
				/>
			</a-spin>
		</div>
	</transition>
</template>

<script setup>
	import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
	import { message } from 'ant-design-vue'
	import { DownloadOutlined, BulbOutlined, CloseOutlined } from '@ant-design/icons-vue'
	import { mavonEditor } from 'mavon-editor'
	import { useMyResourceStore } from '@/store/myResource'
	import { getFilePreview, modifyFileContent } from '@/api/myResource/file'

	import 'mavon-editor/dist/css/index.css'
	// 引入public里的样式如何写
	import '@/assets/mavonEditor/css/tomorrow-night.css'
	import '@/assets/mavonEditor/css/github-markdown.css'
	const props = defineProps({
		fileInfo: Object,
		editable: Boolean,
		callback: Function
	})

	// Store & Utils
	const store = useMyResourceStore()

	// State
	const visible = ref(false)
	// const mavonEditor = ref(null)
	const markdownText = ref('')
	const originalMarkdownText = ref('')
	const markdownLoading = ref(false)

	// Computed
	const screenWidth = computed(() => store.screenWidth)
	const isModify = computed(() => originalMarkdownText.value !== markdownText.value)
	const toolbarsFlag = computed(() => props.editable)

	// Methods
	const getMarkdownText = async () => {
		try {
			markdownLoading.value = true
			const res = await getFilePreview({
				userFileId: props.fileInfo.userFileId,
				isMin: false,
				shareBatchNum: props.fileInfo.shareBatchNum,
				extractionCode: props.fileInfo.extractionCode
			})
			originalMarkdownText.value = res
			markdownText.value = res
		} finally {
			markdownLoading.value = false
		}
	}

	const handleModifyFileContent = async () => {
		try {
			markdownLoading.value = true
			const res = await modifyFileContent({
				userFileId: props.fileInfo.userFileId,
				fileContent: markdownText.value
			})
			if (res.success) {
				message.success('已保存')
				getMarkdownText()
			} else {
				message.error(res.message)
			}
		} catch (err) {
			message.error(err.message)
		} finally {
			markdownLoading.value = false
		}
	}

	const closeMarkdownPreview = () => {
		visible.value = false
		props.callback('cancel')
	}

	// Watchers
	watch(visible, (val) => {
		if (val) {
			getMarkdownText()
			document.addEventListener('keyup', handleKeyup)
		} else {
			document.removeEventListener('keyup', handleKeyup)
		}
	})

	onUnmounted(() => {
		document.removeEventListener('keyup', handleKeyup)
	})

	defineExpose({
		visible
	})
</script>

<style lang="less" scoped>
	@import '@/style/myResource/varibles.less';

	.markdown-preview-wrapper {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		overflow: auto;
		width: 100%;
		height: 100vh;
		z-index: 2;
		text-align: center;
		display: flex;
		align-items: center;
		animation: previewAnimation 0.3s forwards;

		@keyframes previewAnimation {
			from {
				background: transparent;
			}
			to {
				background: rgba(0, 0, 0, 0.8);
			}
		}

		.tip-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
			background: rgba(0, 0, 0, 0.5);
			padding: 0 48px;
			width: 100%;
			height: 48px;
			line-height: 48px;
			color: #fff;
			font-size: 16px;
			display: flex;
			justify-content: space-between;
			.name {
				flex: 1;
				padding-right: 16px;
				text-align: left;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				.un-save {
					color: @Warning;
					font-size: 14px;
				}
			}
			.tool-wrapper {
				flex: 1;
				display: flex;
				justify-content: flex-end;
				.item {
					margin-left: 16px;
					height: 48px;
					line-height: 48px;
					cursor: pointer;
					&:hover {
						opacity: 0.7;
					}
				}
				.save-img {
					margin: 16px 0;
					width: 16px;
					height: 16px;
				}
				.download-link {
					color: inherit;
					font-size: 18px;
				}
				.text-wrapper {
					.text {
						margin-right: 8px;
					}
				}
			}
		}
		// >>> .v-note-wrapper {
		// 	box-shadow: none !important;
		// 	border: 1px solid $BorderBase;
		// 	.v-note-op {
		// 		border-bottom-color: $BorderBase;
		// 		.op-image {
		// 			.dropdown-item:nth-of-type(2) {
		// 				display: none;
		// 			}
		// 		}
		// 	}
		// 	.v-note-navigation-wrapper {
		// 		.v-note-navigation-content {
		// 			h1,
		// 			h2,
		// 			h3,
		// 			h4,
		// 			h5,
		// 			h6 {
		// 				color: $PrimaryText;
		// 				&:hover {
		// 					color: $PrimaryText;
		// 				}
		// 			}
		// 		}
		// 	}
		// }
		// >>> .v-note-wrapper:not(.fullscreen) {
		// 	margin: 56px auto 0 auto;
		// 	width: 90vw;
		// 	height: calc(100vh - 80px);
		// }
	}
</style>
