<template>
  <div class="container">

    <!-- 底部编辑区 -->
    <div class="bottom-section">
      <div class="editor-container">
        <h4>窗口文本</h4>
        <div id="toolbar"></div>
        <div id="editor"></div>
      </div>

      <div class="device-preview">
        <div class="device-frame">
          <div class="preview-content" ref="previewContent"></div>
        </div>
      </div>
    </div>

    <!-- 保存按钮 -->
    <div class="footer">
      <a-button type="primary">保存</a-button>
    </div>
  </div>
</template>

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

// 富文本编辑器逻辑
const previewContent = ref<HTMLElement | null>(null)
const toolbarOptions = [
  ['bold', 'italic', 'underline'],
  [{ 'header': [1, 2, 3, false] }],
  ['blockquote', 'code-block'],
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  ['link', 'image']
]

onMounted(() => {
  const quill = new Quill('#editor', {
    theme: 'snow',
    modules: { toolbar: toolbarOptions },
    placeholder: '请输入内容...'
  })

  quill.on('text-change', () => {
    if (previewContent.value) {
      previewContent.value.innerHTML = quill.root.innerHTML
    }
  })
})

</script>

<style scoped>
.container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.section {
  margin-bottom: 24px;
  border: 1px solid #f0f0f0;
  border-radius: 4px;
  padding: 16px;
}

.section h3 {
  margin-bottom: 16px;
  color: rgba(0, 0, 0, 0.85);
}

.form-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.bottom-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 24px;
}

.editor-container {
  border: 1px solid #f0f0f0;
  padding: 16px;
  border-radius: 4px;
}

.device-preview {
  border: 1px solid #f0f0f0;
  padding: 16px;
  border-radius: 4px;
}

.device-frame {
  width: 375px;
  height: 667px;
  border: 1px solid #ddd;
  border-radius: 16px;
  overflow: hidden;
}

.preview-content {
  padding: 16px;
  height: 100%;
  overflow-y: auto;
}

.footer {
  margin-top: 24px;
  text-align: center;
}
</style>