<script setup>
import {nextTick, onMounted, reactive, ref} from 'vue'
import {ElMessage, ElMessageBox} from 'element-plus'
import {Delete, Edit, Eye, Plus, Upload} from 'lucide-vue-next'
import {Quill, QuillEditor} from '@vueup/vue-quill'
import BlotFormatter from "quill-blot-formatter";

import '@vueup/vue-quill/dist/vue-quill.snow.css'
import request from "@/utils/request.js"
import {findArrayDifferences} from "@/utils/index.js";

const BASE_URL = import.meta.env.VITE_APP_BASE_URL
Quill.register("modules/blotFormatter", BlotFormatter);

// 响应式数据
const tableData = ref([])
const total = ref(0)
const loading = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('添加产品')
const isEdit = ref(false)

const detailDialogVisible = ref(false)
const detailDialogContent = ref('')

const uploadLoading = ref(false)
const coverFile = ref(null)
const fileInputRef = ref(null)

const imagePreviewVisible = ref(false)
const previewImageUrl = ref('')

const quillRef = ref(null)

// 新增：记录图片变化的列表
const insertedImages = ref([]) // 插入的图片列表
const deletedImages = ref([])  // 删除的图片列表
const originalImages = ref([]) // 原始图片列表（编辑时使用）

// 分页参数
const pagination = reactive({
  pageNum: 1,
  pageSize: 10
})

// 新增：搜索参数
const searchParams = reactive({
  productCategory: '',
  productType: '',
  productName: ''
})

// 表单数据
const formData = reactive({
  id: '',
  productCategory: '',
  productType: '',
  productName: '',
  productDetails: '',
  productUrl: '',
  isCore: 0,
  productIntroduction:'',
  productScene:''
})

const quillOptions = {
  theme: 'snow',
  modules: {
    blotFormatter: {},
    toolbar: [
      ['bold', 'italic', 'underline', 'strike'],
      ['blockquote', 'code-block'],
      [{'header': 1}, {'header': 2}],
      [{'list': 'ordered'}, {'list': 'bullet'}],
      [{'script': 'sub'}, {'script': 'super'}],
      [{'indent': '-1'}, {'indent': '+1'}],
      [{'direction': 'rtl'}],
      [{'size': ['small', false, 'large', 'huge']}],
      [{'header': [1, 2, 3, 4, 5, 6, false]}],
      [{'color': []}, {'background': []}],
      [{'font': []}],
      [{'align': []}],
      ['clean'],
      ['link', 'image', 'video']
    ]
  },
  placeholder: '请输入产品详情...',
}


// const getImagesFromContent = (content) => {
//   if (!content) return []
//
//   const delta = typeof content === 'string' ?
//       quillRef.value?.clipboard?.convert(content) :
//       content
//   const images = []
//
//   if (delta && delta.ops) {
//     delta.ops.forEach(op => {
//       if (op.insert && op.insert.image) {
//         images.push(op.insert.image)
//       }
//     })
//   }
//
//   return images
// }

// 新增：获取富文本中的所有图片
const getImagesFromContent = (content) => {
  if (!content) return []

  let delta = null
  // 分两种情况处理：HTML字符串 / Quill Delta对象
  if (typeof content === 'string') {
    // 情况1：content是HTML字符串 → 优先用DOM解析提取图片，兼容Quill未初始化的场景
    try {
      // 创建临时DOM元素解析HTML
      const tempDiv = document.createElement('div')
      tempDiv.innerHTML = content
      const imgElements = tempDiv.querySelectorAll('img')
      // 直接提取所有img标签的src属性
      return Array.from(imgElements).map(img => img.src).filter(src => src)
    } catch (e) {
      console.warn('解析HTML图片失败，降级使用Quill转换:', e)
      // 降级方案：尝试用Quill的clipboard转换
      if (quillRef.value?.clipboard) {
        delta = quillRef.value.clipboard.convert(content) || { ops: [] }
      } else {
        return [] // Quill未初始化，直接返回空
      }
    }
  } else {
    // 情况2：content是Delta对象 → 直接使用
    delta = content
  }
  // 处理Delta对象提取图片
  const images = []
  if (delta && delta.ops && Array.isArray(delta.ops)) {
    delta.ops.forEach(op => {
      // 兼容Quill的image embed格式：op.insert是对象且包含image属性
      if (op.insert && typeof op.insert === 'object' && op.insert.image) {
        images.push(op.insert.image)
      }
    })
  }

  return images
}

const onEditorReady = (quill) => {
  quillRef.value = quill

  // 图片上传逻辑（保留原来的）
  const toolbar = quill.getModule('toolbar')
  toolbar.addHandler('image', () => {
    const input = document.createElement('input')
    input.setAttribute('type', 'file')
    input.setAttribute('accept', 'image/*')
    input.click()

    input.onchange = async () => {
      const file = input.files[0]
      if (!file) return

      if (!file.type.startsWith('image/')) {
        ElMessage.error('请选择图片文件')
        return
      }
      if (file.size > 10 * 1024 * 1024) {
        ElMessage.error('图片大小不能超过10MB')
        return
      }

      try {
        const formData = new FormData()
        formData.append('file', file)
        formData.append('moduleName', 'product')

        const res = await request.post('/uploadFile', formData, {
          headers: {'Content-Type': 'multipart/form-data'}
        })

        if (res.code === 200) {
          const imageUrl = BASE_URL + res.data.fileUrl
          const range = quill.getSelection()
          quill.insertEmbed(range.index, 'image', imageUrl)
          ElMessage.success('图片上传成功')
        } else {
          ElMessage.error('图片上传失败')
        }
      } catch (error) {
        ElMessage.error('图片上传失败')
      }
    }
  })

  // 修改：优化富文本变化监听逻辑
  quill.on('text-change', (delta, oldDelta, source) => {
    if (source !== 'user') return // 只处理用户操作

    const newDelta = quill.getContents()
    const diff = oldDelta.diff(newDelta)

    diff.ops.forEach(op => {
      if (op.delete) {
        // 检测删除的图片
        const {onlyInSecond} = findArrayDifferences(newDelta.ops, oldDelta.ops)
        onlyInSecond.forEach(item => {
          if (item.insert?.image) {
            const imageUrl = item.insert.image
            console.log('删除图片:', imageUrl)

            // 添加到删除列表，避免重复
            if (!deletedImages.value.includes(imageUrl)) {
              deletedImages.value.push(imageUrl)
            }

            // 从插入列表中移除（如果存在）
            const insertIndex = insertedImages.value.indexOf(imageUrl)
            if (insertIndex > -1) {
              insertedImages.value.splice(insertIndex, 1)
            }
          }
        })
      }

      if (op.insert && op.insert.image) {
        // 检测插入的图片
        const imageUrl = op.insert.image
        console.log('插入图片:', imageUrl)

        // 添加到插入列表，避免重复
        if (!insertedImages.value.includes(imageUrl)) {
          insertedImages.value.push(imageUrl)
        }

        // 从删除列表中移除（如果存在）
        const deleteIndex = deletedImages.value.indexOf(imageUrl)
        if (deleteIndex > -1) {
          deletedImages.value.splice(deleteIndex, 1)
        }
      }
    })

    // console.log('当前插入图片列表:', insertedImages.value)
    // console.log('当前删除图片列表:', deletedImages.value)
  })
}

const handleImagePreview = (imageUrl) => {
  previewImageUrl.value = imageUrl.startsWith('http') ? imageUrl : BASE_URL + imageUrl
  imagePreviewVisible.value = true
}

const handleCoverUpload = (event) => {
  const file = event.target.files[0]
  if (!file) return

  // 验证文件类型
  if (!file.type.startsWith('image/')) {
    ElMessage.error('请选择图片文件')
    return
  }

  // 验证文件大小 (5MB)
  if (file.size > 10 * 1024 * 1024) {
    ElMessage.error('图片大小不能超过10MB')
    return
  }

  coverFile.value = file

  // 预览图片
  const reader = new FileReader()
  reader.onload = (e) => {
    formData.productUrl = e.target.result
  }
  reader.readAsDataURL(file)
}

const clearCover = () => {
  coverFile.value = null
  formData.productUrl = ''
  if (fileInputRef.value) {
    fileInputRef.value.value = ''
  }
}

// 获取列表数据
const getList = async () => {
  loading.value = true
  try {
    const res = await request.get("/productCenter/findByPage", {
      params: {
        pageNum: pagination.pageNum,
        pageSize: pagination.pageSize,
        productCategory: searchParams.productCategory || undefined,
        productType: searchParams.productType || undefined,
        productName: searchParams.productName || undefined
      }
    })
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    tableData.value = res.data.records
    total.value = res.data.total
  } catch (error) {
    ElMessage.error('获取数据失败')
  } finally {
    loading.value = false
  }
}

// 新增：重置搜索条件
const resetSearch = () => {
  Object.assign(searchParams, {
    productCategory: '',
    productType: '',
    productName: ''
  })
  pagination.pageNum = 1
  getList()
}

// 新增：重置图片变化记录
const resetImageTracking = () => {
  insertedImages.value = []
  deletedImages.value = []
  originalImages.value = []
}

// 添加新闻
const handleAdd = () => {
  dialogTitle.value = '添加产品'
  isEdit.value = false
  resetForm()
  resetImageTracking() // 重置图片跟踪
  dialogVisible.value = true
}

// 编辑产品
const handleEdit = async (row) => {
  dialogTitle.value = '编辑产品'
  isEdit.value = true

  const res = await request.get("/productCenter/getById/" + row.id)
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return
  }

  console.log(1111,res.data.isCore)

  if (res.data.isCore === '0') {
    res.data.isCore = 0
  } else {
    res.data.isCore = 1
  }
  Object.assign(formData, res.data)
  coverFile.value = null

  // 新增：记录原始图片列表
  resetImageTracking()
  await nextTick() // 等待DOM更新

  // 等待编辑器内容加载完成后获取原始图片
  setTimeout(() => {
    if (quillRef.value) {
      originalImages.value = getImagesFromContent(quillRef.value.getContents())
      // console.log('原始图片列表:', originalImages.value)
    }
  }, 100)

  dialogVisible.value = true
}

// 查看详情
const handleView = async (row) => {
  const res = await request.get("/productCenter/getById/" + row.id)
  if (res.code !== 200) {
    ElMessage.error(res.msg)
    return
  }
  detailDialogContent.value = res.data.productDetails
  detailDialogVisible.value = true
}

// 删除产品
const handleDelete = (row) => {
  ElMessageBox.confirm('确定要删除这条产品吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const res = await request.post("/productCenter/deleteBatch", [row.id])
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    ElMessage.success(res.msg)
    getList()
  })
}

// 批量删除
const selectedRows = ref([])
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的数据')
    return
  }

  ElMessageBox.confirm(`确定要删除选中的 ${selectedRows.value.length} 条产品吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const ids = selectedRows.value.map(row => row.id)
    const res = await request.post("/productCenter/deleteBatch", ids)
    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }
    ElMessage.success(res.msg)
    getList()
  })
}

// 修改：保存逻辑，添加图片变化处理
const handleSave = async () => {
  if (!formData.productName.trim()) {
    ElMessage.warning('请输入产品名称')
    return
  }
  if (!formData.productType.trim()) {
    ElMessage.warning('请输入产品类型')
    return
  }
  if (!formData.productCategory.trim()) {
    ElMessage.warning('请输入产品分类')
    return
  }

  if (!formData.productDetails.trim()) {
    ElMessage.warning('请输入产品详情')
    return
  }

  try {
    uploadLoading.value = true

    // 创建FormData
    const submitData = new FormData()
    submitData.append('productName', formData.productName)
    submitData.append('productType', formData.productType)
    submitData.append('productCategory', formData.productCategory)
    submitData.append('productDetails', formData.productDetails)
    submitData.append('productModel', formData.productModel)
    submitData.append('isCore', formData.isCore)
    submitData.append('productIntroduction', formData.productIntroduction)
    submitData.append('productScene', formData.productScene)

    // 如果有新的封面文件，添加到FormData
    if (coverFile.value) {
      submitData.append('productMultipartFile', coverFile.value)
    } else if (formData.productUrl && !formData.productUrl.startsWith('data:')) {
      // 如果是编辑且没有新文件，保持原有URL
      submitData.append('productUrl', formData.productUrl)
    }

    // 新增：添加图片变化信息
    if (isEdit.value) {
      // 编辑模式：计算实际的图片变化
      const currentImages = getImagesFromContent(quillRef.value.getContents())

      // 计算真正删除的图片（原始有，现在没有的）
      const actualDeletedImages = originalImages.value.filter(img => !currentImages.includes(img))

      // 计算真正新增的图片（现在有，原始没有的）
      const actualInsertedImages = currentImages.filter(img => !originalImages.value.includes(img))

      // console.log('实际删除的图片:', actualDeletedImages)
      console.log('实际新增的图片:', actualInsertedImages)

      // 发送图片变化信息给后端
      if (actualDeletedImages.length > 0) {
        submitData.append('deletedImages', JSON.stringify(actualDeletedImages))
      }
      if (actualInsertedImages.length > 0) {
        submitData.append('insertedImages', JSON.stringify(actualInsertedImages))
      }
    } else {
      // 新增模式：所有图片都是新增的
      const currentImages = getImagesFromContent(quillRef.value.getContents());
      if (currentImages.length > 0) {
        submitData.append('insertedImages', JSON.stringify(currentImages))
      }
    }

    let res
    if (isEdit.value) {
      submitData.append('id', formData.id)
      res = await request.post("/productCenter/update", submitData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
    } else {
      res = await request.post("/productCenter/save", submitData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
    }

    if (res.code !== 200) {
      ElMessage.error(res.msg)
      return
    }

    ElMessage.success(res.msg)
    dialogVisible.value = false
    getList()
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    uploadLoading.value = false
  }
}

const resetForm = () => {
  Object.assign(formData, {
    id: '',
    productName: '',
    productType: '',
    productCategory: '',
    productDetails: '',
    productUrl: '',
    productModel: '',
    isCore:0,
    productIntroduction:'',
    productScene:''
  })
  coverFile.value = null
  if (fileInputRef.value) {
    fileInputRef.value.value = ''
  }
}

// 分页改变
const handlePageChange = (page) => {
  pagination.pageNum = page
  getList()
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
  pagination.pageNum = 1
  getList()
}

const previewOptions = {
  theme: 'snow',
  modules: {
    toolbar: false, // 预览模式不需要工具栏
  },
  readOnly: true, // 只读模式
};

onMounted(() => {
  getList()
})

// 修改：对话框关闭时重置图片跟踪
const handleDialogClose = () => {
  resetForm()
  resetImageTracking() // 重置图片跟踪
}
</script>

<template>
  <div class="news-management p-6">
    <!-- 页面标题 -->
    <div class="mb-6">
      <h1 class="text-2xl font-bold text-gray-800">产品中心管理</h1>
    </div>

    <!-- 搜索栏 -->
    <div class="mb-4 bg-white p-4 rounded shadow">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-select
              v-model="searchParams.productCategory"
              placeholder="请选择产品分类"
              clearable
              @keyup.enter="getList"
          >
            <el-option label="软件产品" value="软件产品"/>
            <el-option label="硬件产品" value="硬件产品"/>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-input
              v-model="searchParams.productType"
              placeholder="请输入产品类型"
              clearable
              @keyup.enter="getList"
          />
        </el-col>
        <el-col :span="6">
          <el-input
              v-model="searchParams.productName"
              placeholder="请输入产品名称"
              clearable
              @keyup.enter="getList"
          />
        </el-col>
        <el-col :span="6">
          <div class="flex gap-2">
            <el-button type="primary" @click="getList">搜索</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 操作栏 -->
    <div class="mb-4 flex justify-between items-center">
      <div class="flex gap-2">
        <el-button type="primary" @click="handleAdd">
          <Plus class="w-4 h-4 mr-1"/>
          添加产品
        </el-button>
        <el-button type="danger" @click="handleBatchDelete">
          <Delete class="w-4 h-4 mr-1"/>
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 数据表格 -->
    <el-table
        :data="tableData"
        v-loading="loading"
        @selection-change="handleSelectionChange"
        class="w-full"
    >
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="productCategory" label="产品分类"/>
      <el-table-column prop="productType" label="产品类型"/>
      <el-table-column prop="productModel" label="产品型号" width="220"/>
      <el-table-column prop="productName" label="产品名称" width="320"/>
      <el-table-column prop="isSpecial" label="核心产品" width="100">
        <template #default="{ row }">
          <el-tag :type="row.isCore === '1' ? 'danger' : 'info'">
            {{ row.isCore === '1' ? '是' : '否' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="productUrl" label="产品封面">
        <template #default="{ row }">
          <!-- 修改图片预览方式，使用自定义点击事件 -->
          <div v-if="row.productUrl" class="cursor-pointer" @click="handleImagePreview(row.productUrl)">
            <img
                :src="row.productUrl.startsWith('http') ? row.productUrl : BASE_URL + row.productUrl"
                class="w-16 h-12 object-cover rounded border hover:opacity-80 transition-opacity"
                alt="产品图片"
            />
          </div>
          <span v-else class="text-gray-400">无图片</span>
        </template>
      </el-table-column>
      <el-table-column prop="createBy" label="创建人"/>
      <el-table-column prop="createTime" label="创建时间">
        <template #default="{ row }">
          {{ row.createTime ? new Date(row.createTime).toLocaleString() : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" fixed="right">
        <template #default="{ row }">
          <el-button size="small" @click="handleView(row)">
            <Eye class="w-4 h-4 mr-1"/>
            查看
          </el-button>
          <el-button size="small" type="primary" @click="handleEdit(row)">
            <Edit class="w-4 h-4 mr-1"/>
            编辑
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">
            <Delete class="w-4 h-4 mr-1"/>
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="mt-4 flex justify-end">
      <el-pagination
          v-model:current-page="pagination.pageNum"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />
    </div>

    <!-- 添加/编辑对话框 -->
    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        destroy-on-close
        width="900px"
        @close="handleDialogClose"
        :close-on-click-modal="false"
    >
      <el-form :model="formData" label-width="100px">
        <el-form-item label="产品分类" required>
          <el-select v-model="formData.productCategory" placeholder="请选择产品分类">
            <el-option label="硬件产品" value="硬件产品"/>
            <el-option label="软件产品" value="软件产品"/>
          </el-select>
        </el-form-item>
        <el-form-item label="产品类型" required>
          <el-input v-model="formData.productType" placeholder="请输入产品类型"/>
        </el-form-item>
        <el-form-item label="产品名称" required>
          <el-input v-model="formData.productName" placeholder="请输入产品名称"/>
        </el-form-item>
        <el-form-item label="产品描述" required>
          <label for="name" class="text-white-100 text-sm font-medium text-gray-700">描述存在多条时请用“ · ”符号隔开</label>
          <el-input v-model="formData.productIntroduction" placeholder="请输入产品描述"/>
        </el-form-item>
        <el-form-item label="使用场景" required>
          <el-input v-model="formData.productScene" placeholder="请输入使用场景"/>
        </el-form-item>
        <el-form-item label="产品型号" required>
          <el-input v-model="formData.productModel" placeholder="请输入产品型号"/>
        </el-form-item>
        <el-form-item label="核心产品">
          <el-switch
              v-model="formData.isCore"
              :active-value="1"
              :inactive-value="0"
              active-text="是"
              inactive-text="否"
          />
        </el-form-item>

        <!-- 修改新闻封面上传组件 -->
        <el-form-item label="产品封面">
          <div class="w-full">
            <div class="flex items-center gap-4">
              <input
                  ref="fileInputRef"
                  type="file"
                  accept="image/*"
                  @change="handleCoverUpload"
                  style="display: none"
              />
              <el-button @click="fileInputRef?.click()">
                <Upload class="w-4 h-4 mr-1"/>
                选择图片
              </el-button>
              <el-button v-if="formData.productUrl" type="danger" @click="clearCover">
                清除图片
              </el-button>
            </div>
            <div v-if="formData.productUrl" class="mt-2">
              <el-image
                  :src=" formData.productUrl.startsWith('http')||formData.productUrl.startsWith('data:image') ? formData.productUrl : BASE_URL + formData.productUrl"
                  class="w-32 h-24 object-cover rounded border"
                  fit="cover"
              />
            </div>
          </div>
        </el-form-item>

        <el-form-item label="产品详情" required>
          <div class="w-full">
            <!-- 添加编辑器就绪事件 -->
            <QuillEditor
                ref="quillRef"
                v-model:content="formData.productDetails"
                :options="quillOptions"
                content-type="html"
                style="height: 400px;"
                @ready="onEditorReady"
            />
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="flex justify-end gap-2 mt-12">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSave" :loading="uploadLoading">
            {{ uploadLoading ? '保存中...' : '保存' }}
          </el-button>
        </div>
      </template>
    </el-dialog>

      <!-- 添加图片预览对话框 -->
    <el-dialog
        v-model="imagePreviewVisible"
        title="图片预览"
        width="60%"
        :close-on-click-modal="true"
    >
      <div class="flex justify-center">
        <img
            :src="previewImageUrl"
            class="max-w-full max-h-96 object-contain"
            alt="预览图片"
        />
      </div>
    </el-dialog>

    <el-dialog
        v-model="detailDialogVisible"
        title="产品详情"
        width="70%"
        destroy-on-close
        :close-on-click-modal="true"
    >
      <QuillEditor
          v-model:content="detailDialogContent"
          :options="previewOptions"
          content-type="html"
          readonly
      />
      <template #footer>
        <div class="flex justify-end">
          <el-button type="primary" @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.news-management {
  background: #f5f5f5;
  min-height: 100vh;
}

:deep(.el-table) {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

:deep(.el-dialog) {
  border-radius: 8px;
}

:deep(.ql-editor) {
  min-height: 300px;
  font-size: 14px;
  line-height: 1.6;
}

:deep(.ql-toolbar) {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

:deep(.ql-container) {
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
</style>