<template>
  <div class="table_form-container">
    <!-- 搜索 -->
    <NoticeSearch
      :search-form="searchForm"
      :buttonLoading="loading"
      :search-options="searchOptions"
      @search="handleSearch"
      @reset="handleReset"
    >
      <template #button>
        <el-button type="primary" @click="handleCreate" v-auth="'notice_createNotice'"
          >新建</el-button
        >
      </template>
    </NoticeSearch>
    <!-- 表格 -->
    <NoticeTable :table-data="noticeTree" :columns="noticeTableColumnsOptions" row-key="id" :loading="loading">
      <template #status="{ row }">
        <!-- 修正状态显示：1=草稿，2=已发布 -->
        {{ row.status === 1 ? '草稿' : '已发布' }}
      </template>
      <template #action="{ row }">
        <el-button type="primary" size="small" v-if="row.status === 2" @click="handleView(row)"
          >查看</el-button
        >
        <!-- 草稿才显示编辑/删除，已发布仅查看 -->
        <template v-if="row.status === 1">
          <el-button
            type="primary"
            size="small"
            @click="handleEdit(row)"
            v-auth="'notice_editNotice'"
            >编辑</el-button
          >
          <el-button
            type="danger"
            size="small"
            @click="handleDelete(row)"
            v-auth="'notice_delNotice'"
            >删除</el-button
          >
        </template>
      </template>
    </NoticeTable>
    <!-- 分页 -->
    <NoticePagination
      v-model="currentPage"
      v-model:pageSizeValue="pageSize"
      :total="total"
      @pagination-change="handlePaginationChange"
    />
    <!-- dialog -->
    <NoticeDialog
      :visible="dialogVisible"
      :title="dialogTitle"
      :type="dialogType"
      :show-footer="dialogType !== 'view'"
      :button-loading="submitLoading"
      @confirm="handleSubmit"
      @cancel="handleCancel"
      @close="handleClose"
    >
      <NoticeForm
        :form-data="noticeForm"
        :form-rules="noticeRules"
        :form-items="noticeFormItem"
        :options-map="noticeFormOptionsMap"
        ref="noticeFormRef"
        v-if="dialogType !== 'view'"
      >
        <template #noticeContent="{ formData }">
          <div style="border: 1px solid #e6e6e6; margin: 10px 0">
            <Toolbar
              :editor="editorRef"
              :defaultConfig="toolbarConfig"
              mode="default"
              style="border-bottom: 1px solid #ccc"
            />
            <Editor
              v-model="valueHtml"
              :defaultConfig="editorConfig"
              mode="default"
              @onCreated="handleCreated"
              style="height: 300px; overflow-y: auto"
            />
          </div>
        </template>
      </NoticeForm>
      <div v-else class="view-content">
        <h2>公告名称：{{ noticeForm.noticeName }}</h2>
        <div v-html="noticeForm.noticeContent"></div>
      </div>
    </NoticeDialog>
    <!-- dialog表格 -->
  </div>
</template>

<script setup lang="ts">

defineOptions({
  name: 'Notice'
})
import { usePageLoading, useButtonLoading } from '@/composables/useLoading'
const { loading, startLoading, stopLoading } = usePageLoading()
const { buttonLoading: submitLoading, startButtonLoading: startSubmitLoading, stopButtonLoading: stopSubmitLoading } = useButtonLoading()

// 组件
import NoticeSearch from '@/components/common/Search.vue'
import NoticeTable from '@/components/common/Table.vue'
import NoticePagination from '@/components/common/Pagination.vue'
import NoticeDialog from '@/components/common/Dialog.vue'
import NoticeForm from '@/components/common/Form.vue'
// 配置以及表单验证
import { search, tableColumns, formItem } from './options'
import { rules } from './rules'

// 接口
import {
  getNoticeListApi,
  createNoticeApi,
  editNoticeApi,
  deleteNoticeApi,
} from '@/api/modules/notice'
import { uploadImageApi } from '@/api/modules/upload'

import { DomEditor } from '@wangeditor/editor'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'

// 富文本编辑器实例
const editorRef = shallowRef()
// 工具栏实例（通过 DomEditor 获取）
const toolbarRef = shallowRef()
// 富文本编辑器内容 HTML
const valueHtml = ref('')
// 工具栏配置
const toolbarConfig = {
  excludeKeys: ['group-video', 'fullScreen'],
}
// 富文本编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      customUpload: async (file: any, insertFn: any) => {
        try {
          // 调用封装后的上传API
          const res = await uploadImageApi(file)
          // 插入图片到富文本
          insertFn(res.url)
        } catch (error: any) {
          // 复用你已有的错误提示逻辑（ElNotification）
          const errMsg = error?.message || error?.data?.msg || '图片上传失败'
          alert(`图片${file.name}上传失败：${errMsg}`)
          ElNotification({
            message: errMsg || '未知的错误！',
            type: 'error',
            duration: 2000,
            customClass: 'global-notification',
          })
        }
      },
      // 保留基础配置
      fieldName: 'image',
      timeout: 30 * 1000,
      maxFileSize: 5 * 1024 * 1024,
      allowedFileTypes: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
    },
  },
}

/**
 * @description: 定义搜索数据
 */
const searchForm = ref({
  noticeName: '',
  startDateTime: '',
  endDateTime: '',
  status: 2,
})
const searchOptions = ref(search)

/**
 * @description: 定义tab数据
 */
const activeTab = ref(2)

/**
 * @description: 定义表格数据
 */
const noticeTree = ref([])
const noticeTableColumnsOptions = ref(tableColumns)

/**
 * @description: 定义分页数据
 */
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)
/**
 * @description: 定义弹窗数据
 */
const dialogVisible = ref(false)
const dialogTitle = ref('')
const dialogType = ref('')

/**
 * @description: 定义弹窗表格数据
 */
const noticeForm = ref({
  noticeName: '',
  noticeContent: '',
  status: 1,
  id: 0,
})
const noticeFormRef = ref()
const noticeRules = ref(rules())
const noticeFormItem = ref(formItem)
const noticeFormOptionsMap = ref({
  status: [
    { label: '草稿', value: 1 },
    { label: '发布', value: 2 },
  ],
})

/**
 * @description: 定义请求数据方法
 */
//获取公告列表
const getNoticeList = async () => {
  startLoading()
  const params = {
    page: currentPage.value,
    page_size: pageSize.value,
    name: searchForm.value.noticeName,
    status: searchForm.value.status,
    publish_start_time: searchForm.value.startDateTime,
    publish_end_time: searchForm.value.endDateTime,
  }
  try {
    const data: any = await getNoticeListApi(params)
    // 表格数据
    noticeTree.value = data.data.map((item: any) => ({
      id: item.id,
      noticeName: item.name,
      noticeContent: item.content,
      publishTime: item.publish_time,
      status: item.status,
    }))
    // 分页数据
    total.value = data.total
    currentPage.value = data.current_page
    pageSize.value = Number(data.per_page)
  } finally {
    stopLoading()
  }
}

/**
 * @description: 页面加载完成需要请求的数据
 */
onMounted(() => {
  getNoticeList()
})

/**
 * @description: 定义搜索方法
 */
const handleSearch = () => {
  getNoticeList()
}
const handleReset = () => {
  searchForm.value = {
    noticeName: '',
    startDateTime: '',
    endDateTime: '',
    status: 2,
  }
  activeTab.value = 2
  getNoticeList()
}
const handleCreate = () => {
  dialogVisible.value = true
  dialogTitle.value = '新建公告'
  dialogType.value = 'create'
  noticeForm.value = {
    noticeName: '',
    noticeContent: '',
    status: 1,
    id: 0,
  } as any
}

/**
 * @description: 定义tab方法
 */
const handleTabChange = (tab: number) => {
  activeTab.value = tab
  searchForm.value.status = tab
  currentPage.value = 1
  getNoticeList()
}

/**
 * @description: 定义表格方法
 */
const handleView = (row: any) => {
  console.log(row)
  dialogVisible.value = true
  dialogTitle.value = '查看公告'
  dialogType.value = 'view'
  noticeForm.value = {
    noticeName: row.noticeName,
    noticeContent: row.noticeContent,
  } as any
}

const handleEdit = (row: any) => {
  dialogVisible.value = true
  dialogTitle.value = '编辑公告'
  dialogType.value = 'edit'
  noticeForm.value = {
    noticeName: row.noticeName,
    status: row.status,
    id: row.id,
  } as any
  valueHtml.value = row.noticeContent
}
// 删除公告
const handleDelete = async (row: any) => {
  const params = {
    id: row.id,
  }
  await deleteNoticeApi(params)
  getNoticeList()
}

/**
 * @description: 定义分页方法
 */
const handlePaginationChange = async (page: { currentPage: number; pageSize: number }) => {
  currentPage.value = page.currentPage
  pageSize.value = page.pageSize
  await getNoticeList()
}
/**
 * @description: 定义弹窗方法
 */
const handleSubmit = async () => {
  startSubmitLoading()
  try {
    await noticeFormRef.value.validate()
    if (dialogType.value === 'create') {
      noticeForm.value.noticeContent = valueHtml.value
      const params = {
        name: noticeForm.value.noticeName,
        content: noticeForm.value.noticeContent,
        status: noticeForm.value.status,
      }
      await createNoticeApi(params)
      dialogVisible.value = false
      getNoticeList()
    } else {
      noticeForm.value.noticeContent = valueHtml.value
      const params = {
        id: noticeForm.value.id,
        name: noticeForm.value.noticeName,
        content: noticeForm.value.noticeContent,
        status: noticeForm.value.status,
      }
      await editNoticeApi(params)
      dialogVisible.value = false
      getNoticeList()
    }
  } finally {
    stopSubmitLoading()
  }
}

const handleCancel = () => {
  dialogVisible.value = false
}
const handleClose = () => {
  dialogVisible.value = false
}

/**
 * @description: 定义富文本编辑器方法
 */
// 组件销毁时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})

// 富文本编辑器创建完成后回调
const handleCreated = (editor: any) => {
  editorRef.value = editor

  // 在这里获取工具栏实例（必须等编辑器和工具栏都挂载后）
  nextTick(() => {
    const toolbar = DomEditor.getToolbar(editor)
    if (toolbar) {
      const curToolbarConfig = toolbar.getConfig()
      console.log('curToolbarConfig.toolbarKeys', curToolbarConfig.toolbarKeys)
      toolbarRef.value = toolbar
      console.log('toolbarRef.value', valueHtml.value)
    }
  })
}
</script>

<style scoped>
.tab {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;

  .el-button {
    margin-left: 0px;
  }
}

.view-content {
  h2 {
    margin-bottom: 10px;
  }
}
</style>
