<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isEdit ? '编辑文章' : '新增文章'"
    width="80%"
    :close-on-click-modal="false"
    @open="handleDialogOpen"
    v-loading="loading"
    @close="handleClose"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" class="space-y-6">
      <!-- 基本信息 -->
      <div class="bg-gray-50 p-4 rounded-lg">
        <h3 class="text-lg font-medium text-gray-900 mb-4">基本信息</h3>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="文章标题" prop="title">
              <el-input v-model="form.title" placeholder="请输入文章标题" maxlength="200" show-word-limit />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="文章分类" prop="category_id">
              <el-select v-model="form.category_id" placeholder="选择分类" clearable class="w-full">
                <el-option v-for="category in categories" :key="category.id" :label="category.name"
                  :value="category.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="文章摘要" prop="summary">
          <el-input v-model="form.summary" type="textarea" :rows="3" placeholder="请输入文章摘要" maxlength="500"
            show-word-limit />
        </el-form-item>

        <el-form-item label="封面图片" prop="cover_image">
          <el-input v-model="form.cover_image" placeholder="请输入封面图片URL" />
        </el-form-item>

        <el-form-item label="文章标签" prop="tag_ids">
          <el-select v-model="form.tag_ids" multiple placeholder="选择标签" clearable class="w-full">
            <el-option v-for="tag in tags" :key="tag.id" :label="tag.name" :value="tag.id">
              <div class="flex items-center">
                <div class="w-4 h-4 rounded mr-2" :style="{ backgroundColor: tag.color }"></div>
                {{ tag.name }}
              </div>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="推荐状态" prop="is_featured">
          <el-switch v-model="form.is_featured" active-text="推荐" inactive-text="普通" />
        </el-form-item>
      </div>

      <!-- 文章内容 -->
      <div class="bg-gray-50 p-4 rounded-lg">
        <h3 class="text-lg font-medium text-gray-900 mb-4">文章内容</h3>

        <el-form-item label="文章内容" prop="content">
          <Editor style="width: 100%;" v-model="form.content" :init="editorInit"
            tinymceScriptSrc="https://cdn.jsdelivr.net/npm/tinymce@7.9.1/tinymce.min.js" />
        </el-form-item>
      </div>
    </el-form>

    <template #footer>
      <div class="flex justify-end space-x-3">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" :loading="loading" @click="handleSubmit">
          {{ isEdit ? '更新' : '创建' }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { articleApi } from '@/api';
import Editor from '@tinymce/tinymce-vue';
import { ElMessage } from 'element-plus';
import { computed, reactive, ref, watch } from 'vue';

// Props
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  article: {
    type: Object,
    default: null
  },
  categories: {
    type: Array,
    default: () => []
  },
  tags: {
    type: Array,
    default: () => []
  }
})

// Emits
const emit = defineEmits(['update:modelValue', 'success'])

// 响应式数据
const formRef = ref(null)
const loading = ref(false)
const articleDetail = ref(null)

// 表单数据
const form = reactive({
  title: '',
  content: '',
  summary: '',
  cover_image: '',
  category_id: '',
  tag_ids: [],
  is_featured: false
})

// 表单验证规则
const rules = {
  title: [
    { required: true, message: '请输入文章标题', trigger: 'blur' },
    { min: 1, max: 200, message: '标题长度在 1 到 200 个字符', trigger: 'blur' }
  ],
  content: [
    { required: true, message: '请输入文章内容', trigger: 'blur' }
  ],
  summary: [
    { max: 500, message: '摘要长度不能超过 500 个字符', trigger: 'blur' }
  ]
}
// TinyMCE 配置
const editorInit = {
  menubar: false,
  dragdrop: true, // 启用拖拽图片功能
  valid_elements: '*[*]',
  valid_elements: 'section[*],*[*]', // 允许 section 及其属性
  valid_children: '+body[section],+section[p,div,span]', // 允许 body 包含 section，section 包含段落等
  file_picker_types: 'image',
  invalid_elements: 'script',
  statusbar: false,
  placeholder: '开始编写吧', // 占位符
  theme: 'silver', // 主题 必须引入
  license_key: 'gpl', // 使用开源许可
  paste_as_text: false, // 允许 HTML 粘贴
  paste_enable_default_filters: false, // 禁用默认 HTML 过滤
  paste_webkit_styles: 'all', // 允许所有 Webkit 内联样式
  paste_retain_style_properties: 'all', // 保留所有 inline style
  extended_valid_elements: '*[*]', // 确保所有 HTML 属性都被保留
  promotion: false,  // 移除 Upgrade 按钮
  branding: false,   // 移除 TinyMCE 品牌信息
  toolbar_mode: 'wrap',
  contextmenu: 'styleControls | insertBefore insertAfter | copyElement | removeIndent | deleteElement | image link',
  content_style: `
  body::-webkit-scrollbar {
    width: 8px;
  }
  body::-webkit-scrollbar-track {
    background: #f8fafc;
  }
  body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
  }
  body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
  .element-highlight {
    outline: 1px solid #3b82f6 !important;
  }


`,
  // 设置工具栏样式
  toolbar_location: 'top',

  // 如果需要固定工具栏
  toolbar_sticky: true,
  toolbar: [
    'undo redo bold italic underline forecolor backcolor alignleft aligncenter alignright  image insertBeforeSection insertSection  styleControls  mySaveBtn help_article'

  ]
  ,
  plugins: [
    'anchor', 'autolink', 'charmap', 'codesample', 'emoticons', 'image', 'link',
    'lists', 'media', 'searchreplace', 'table', 'visualblocks', 'wordcount'
  ],
  setup: function (editor) {
    editor.on('paste', function (e) {
      e.preventDefault(); // 阻止默认粘贴行为
      const clipboardData = e.clipboardData || window.clipboardData;
      if (clipboardData && clipboardData.types.indexOf('text/html') > -1) {
        // 获取原始HTML内容
        const htmlContent = clipboardData.getData('text/html');
        // 直接插入原始HTML，避免修改
        editor.insertContent(htmlContent);
      } else {
        // 如果没有HTML，回退到纯文本
        const text = clipboardData.getData('text/plain');
        editor.insertContent(text);
      }
    });
  }
}

// 计算属性
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

const isEdit = computed(() => !!props.article)

// 获取文章详情
const fetchArticleDetail = async (articleId) => {
  if (!articleId) return

  loading.value = true
  try {
    const response = await articleApi.getArticleDetail(articleId)
    articleDetail.value = response.data
    // 使用详情数据填充表单
    fillFormWithDetail(articleDetail.value)
  } catch (error) {
    ElMessage.error('获取文章详情失败')
    console.error('获取文章详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 使用详情数据填充表单
const fillFormWithDetail = (detail) => {
  if (!detail) return

  Object.assign(form, {
    title: detail.title || '',
    content: detail.content || '',
    summary: detail.summary || '',
    cover_image: detail.cover_image || '',
    category_id: detail.category_id || '',
    tag_ids: detail.tags ? detail.tags.map(tag => tag.id) : [],
    is_featured: detail.is_featured || false
  })
}

// 对话框打开时获取详情
const handleDialogOpen = () => {
  if (props.article?.id && isEdit.value) {
    fetchArticleDetail(props.article.id)
  }
}

// 监听文章数据变化，初始化表单
watch(() => props.article, (newArticle) => {
  if (newArticle && isEdit.value) {
    // 编辑模式，如果有详情数据则使用详情数据，否则使用props数据
    if (articleDetail.value) {
      fillFormWithDetail(articleDetail.value)
    } else {
      // 使用props数据作为临时填充
      Object.assign(form, {
        title: newArticle.title || '',
        content: newArticle.content || '',
        summary: newArticle.summary || '',
        cover_image: newArticle.cover_image || '',
        category_id: newArticle.category_id || '',
        tag_ids: newArticle.tag_ids || [],
        is_featured: newArticle.is_featured || false
      })
    }
  } else {
    // 新增模式，重置表单
    resetForm()
  }
}, { immediate: true })

// 重置表单（使用函数声明，避免提升前调用报错）
function resetForm() {
  Object.assign(form, {
    title: '',
    content: '',
    summary: '',
    cover_image: '',
    category_id: '',
    tag_ids: [],
    is_featured: false
  })

  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false
  resetForm()
}

// 提交表单
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()

    loading.value = true

    if (isEdit.value) {
      // 编辑模式
      await articleApi.updateArticle(props.article.id, form)
      ElMessage.success('文章更新成功')
    } else {
      // 新增模式
      await articleApi.createArticle(form)
      ElMessage.success('文章创建成功')
    }

    emit('success')
    handleClose()
  } catch (error) {
    if (error.message) {
      ElMessage.error(error.message)
    } else {
      ElMessage.error(isEdit.value ? '更新文章失败' : '创建文章失败')
    }
    console.error('提交表单失败:', error)
  } finally {
    loading.value = false
  }
}
</script>
