<template>
  <div class="markdown-test">
    <h2>Markdown渲染测试</h2>
    
    <div class="test-section">
      <h3>输入Markdown内容</h3>
      <textarea 
        v-model="markdownInput" 
        placeholder="输入markdown内容..."
        rows="10"
        class="markdown-input"
      ></textarea>
    </div>
    
    <div class="test-section">
      <h3>渲染结果</h3>
      <div class="rendered-content" v-html="renderedHTML"></div>
    </div>
    
    <div class="test-section">
      <h3>测试用例</h3>
      <button @click="loadTestCases" class="test-btn">加载测试用例</button>
      <div class="test-cases">
        <button 
          v-for="(testCase, index) in testCases" 
          :key="index"
          @click="loadTestCase(testCase)"
          class="test-case-btn"
        >
          {{ testCase.name }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { renderMarkdownToHTML, hasMarkdownSyntax } from '../utils/markdownRenderer.js';

// 响应式数据
const markdownInput = ref(`# 测试标题

这是一个**粗体**和*斜体*的测试。

## 表格测试

| 产品 | 价格 | 库存 |
|------|------|------|
| 苹果 | 4元 | 100个 |
| 香蕉 | 2元 | 50个 |

## 代码测试

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

行内代码：\`const name = 'test'\`

## 列表测试

- 项目1
- 项目2
  - 子项目2.1
  - 子项目2.2
- 项目3

## 链接测试

- [GitHub](https://github.com)
- [Vue.js](https://vuejs.org)`);

// 测试用例
const testCases = ref([
  {
    name: '基础表格',
    content: `# 产品价格表

| 产品 | 价格 |
|------|------|
| 苹果 | 4元 |
| 香蕉 | 2元 |`
  },
  {
    name: '复杂表格',
    content: `# 技术栈对比

| 技术 | 前端 | 后端 | 数据库 |
|------|------|------|--------|
| Vue.js | ✅ | ❌ | ❌ |
| Django | ❌ | ✅ | ❌ |
| PostgreSQL | ❌ | ❌ | ✅ |`
  },
  {
    name: '代码块',
    content: `# 代码示例

\`\`\`javascript
function markdownToJSON(markdown) {
  const lines = markdown.split('\\n');
  // 处理逻辑...
  return result;
}
\`\`\``
  },
  {
    name: '混合内容',
    content: `# 混合内容测试

这是一个包含**粗体**、*斜体*和\`行内代码\`的段落。

## 表格

| 功能 | 状态 | 说明 |
|------|------|------|
| 表格渲染 | ✅ | 支持markdown表格 |
| 代码高亮 | ✅ | 支持代码块 |

## 代码

\`\`\`python
def hello_world():
    print("Hello, World!")
\`\`\``
  }
]);

// 计算属性：渲染后的HTML
const renderedHTML = computed(() => {
  if (!markdownInput.value) return '';
  
  try {
    return renderMarkdownToHTML(markdownInput.value);
  } catch (error) {
    return `<div class="error">渲染失败: ${error.message}</div>`;
  }
});

// 方法
const loadTestCases = () => {
  // 测试用例已经定义在响应式数据中
};

const loadTestCase = (testCase) => {
  markdownInput.value = testCase.content;
};
</script>

<style scoped>
.markdown-test {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.test-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #f9f9f9;
}

.markdown-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.rendered-content {
  background: white;
  padding: 20px;
  border-radius: 4px;
  border: 1px solid #ddd;
  min-height: 200px;
}

.test-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.test-btn,
.test-case-btn {
  padding: 8px 16px;
  border: 1px solid #007bff;
  background: white;
  color: #007bff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.test-btn:hover,
.test-case-btn:hover {
  background: #007bff;
  color: white;
}

h2, h3 {
  color: #333;
  margin-bottom: 15px;
}

h2 {
  border-bottom: 2px solid #007bff;
  padding-bottom: 10px;
}

.error {
  color: #dc3545;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  padding: 10px;
  border-radius: 4px;
}
</style>
