<template>
  <div class="editor-preview-wrapper">

    <!-- 富文本编辑区 -->
    <div class="editor-container">
      <div id="toolbar"></div>
      <div id="editor"></div>
    </div>

    <!-- 移动端预览区 -->
    <div class="device-preview">
      <!-- 设备外壳装饰 -->
      <div class="device-frame iphone">
        <div class="device-status-bar">
          <span>12:30</span>
          <div class="status-icons">
            <span class="cellular-icon"></span>
            <span class="wifi-icon"></span>
            <span class="battery-icon"></span>
          </div>
        </div>
        <!-- 实际内容渲染区 -->
        <div class="preview-content" ref="previewContent"></div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import Quill from 'quill'

const previewContent = ref<HTMLElement | null>(null) // 添加类型声明

// 修复点1: 明确定义工具栏配置
const toolbarOptions = [
  ['bold', 'italic', 'underline'],
  [{ 'header': [1, 2, 3, false] }],
  ['blockquote', 'code-block'],
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  ['link', 'image']
]

onMounted(() => {
  // 修复点2: 使用完整的配置对象
  const quill = new Quill('#editor', {
    theme: 'snow',
    modules: {
      toolbar: toolbarOptions // 使用预定义的配置
    },
    placeholder: '请输入内容...'
  })

  // 监听内容变化
  quill.on('text-change', () => {
    if (previewContent.value) {
      previewContent.value.innerHTML = quill.root.innerHTML
      previewContent.value.scrollTop = previewContent.value.scrollHeight
    }
  })
})
</script>

<style>
/* 整体布局 */
.editor-preview-wrapper {
  display: flex;
  gap: 20px;
  padding: 20px;
}

.editor-container {
  flex: 1;
  max-width: 800px;
}

/* 移动设备模拟器 */
.device-preview {
  flex: 1;
  display: flex;
  justify-content: center;
  background: #f0f0f0;
  padding: 20px;
}

.device-frame {
  width: 263px;
  height: 568px;
  background: #fff;
  border-radius: 40px;
  box-shadow: 0 0 30px rgba(0,0,0,0.1);
  overflow: hidden;
  position: relative;
}

/* 设备状态栏（模拟 iOS 样式） */
.device-status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 15px;
  background: #f8f8f8;
  font-size: 12px;
  border-bottom: 1px solid #eee;
}

.status-icons {
  display: flex;
  gap: 5px;
}

/* 预览内容区 */
.preview-content {
  height: calc(100% - 30px);
  overflow-y: auto;
  padding: 15px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
  /* 新增换行相关属性 */
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: pre-wrap;
  hyphens: auto;
}

/* 移动端内容样式适配 */
.preview-content img {
  max-width: 100%;
  height: auto;
}
/* 为段落文本添加基础样式 */
.preview-content p {
  margin: 0.5em 0;
  line-height: 1.6;
}

/* 处理长URL换行 */
.preview-content a {
  word-break: break-all;
}

/* 移动端设备模拟器宽度修正 */
.device-frame {
  width: 375px; /* iPhone 14宽度 */
}

.preview-content {
  width: 100%;
  box-sizing: border-box;
}

/* 响应式布局（移动端下堆叠） */
@media (max-width: 768px) {
  .editor-preview-wrapper {
    flex-direction: column;
  }
}
</style>