<template>
  <div class="markdown-editor-page">
    <div class="editor-container">
      <MarkdownEditor 
        v-model:content="markdownContent"
        @content-change="handleContentChange"
        @save="handleSave"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import MarkdownEditor from './MarkdownEditor.vue'
import { Message } from '@arco-design/web-vue'

const markdownContent = ref('')

// 初始化示例内容
const initSampleContent = () => {
  markdownContent.value = `# 欢迎使用 Markdown 编辑器

这是一个功能强大的 Markdown 编辑器，支持实时预览和 PDF 导出功能。

## 功能特性

- ✅ **实时预览** - 输入内容即时显示预览效果
- ✅ **语法高亮** - 支持 GitHub 风格的 Markdown 语法
- ✅ **PDF 导出** - 一键导出为格式化的 PDF 文档
- ✅ **自动保存** - 支持 Ctrl + S 快捷键保存
- ✅ **字数统计** - 实时显示字符数和行数

## 使用说明

### 基本语法

\`\`\`markdown
# 一级标题
## 二级标题
### 三级标题

**粗体文本** 和 *斜体文本*

- 无序列表项 1
- 无序列表项 2
  - 嵌套列表项 1

1. 有序列表项 1
2. 有序列表项 2

\`\`\`

### 代码块

\`\`\`javascript
function hello() {
  console.log('Hello, World!')
}
\`\`\`

### 表格

| 列 1 | 列 2 | 列 3 |
|------|------|------|
| 数据 1 | 数据 2 | 数据 3 |
| 数据 4 | 数据 5 | 数据 6 |

### 引用

> 这是一个引用示例
> 可以包含多行内容

---

**开始创作吧！**`
}

const handleContentChange = (content) => {
  // 内容变化时的处理
}

const handleSave = (content) => {
  // 保存处理
  console.log('Content saved:', content)
  Message.success('内容已保存到本地存储')
}

onMounted(() => {
  // 从本地存储加载之前保存的内容
  const savedContent = localStorage.getItem('u-desk-markdown-content')
  if (savedContent) {
    markdownContent.value = savedContent
  } else {
    // 没有保存的内容时显示示例内容
    initSampleContent()
  }
})
</script>

<style scoped>
.markdown-editor-page {
  height: 100%;
  width: 100%;
  padding: 20px;
  background: var(--color-bg-1);
}

.editor-container {
  height: 100%;
  width: 100%;
}
</style>