<template>
    <KlNavTab></KlNavTab>
    <div class="mx-auto w-[1440px]">
      <!-- 使用 el-form 重构表单区域 -->
      <el-form ref="formRef" inline :model="formData" label-width="110px" class="custom-form mb-[20px] mt-[20px] border rounded p-[20px]!">
        <el-form-item label="标题：" prop="postsTitle" :rules="{ required: true, message: '请输入标题', trigger: 'blur' }">
          <el-input v-model="formData.postsTitle" placeholder="请输入标题" class="w-[300px]!" minlength="4" maxlength="40"></el-input>
        </el-form-item>
        <el-form-item label="分类：" class="mb-[10px]" prop="projectDicId" :rules="{ required: true, message: '请选择分类', trigger: ['blur', 'change'] }">
          <el-select v-model="formData.projectDicId" placeholder="请选择分类" class="w-[300px]!">
            <el-option v-for="item in projectTypeList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
  
        <el-form-item label="标签：" class="mb-[10px]" prop="postsTags" :rules="{ required: true, message: '请输入标签', trigger: ['blur', 'change'] }">
          <el-select
            v-model="formData.postsTags"
            :remote-method="remoteMethod"
            :loading="loading"
            filterable
            remote
            multiple
            placeholder="请输入搜索标签"
            class="w-[300px]!"
          >
            <el-option v-for="(item, index) in labelsList" :key="index" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="频道列表：" class="mb-[10px]" prop="channelId" :rules="{ required: true, message: '请选择频道', trigger: ['blur', 'change'] }">
          <el-select v-model="formData.channelId" placeholder="请选择频道" class="w-[300px]!">
            <el-option v-for="item in channelIdList" :key="item.channelId" :label="item.channelTitle" :value="item.channelId" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="上传封面：" prop="postsCover" :rules="{ required: true, message: '请上传封面', trigger: ['blur', 'change'] }">
          <KlUploader v-model:file-list="formData.postsCover" :limit="1" :size="1" tips="上传图片支持jpg/gif/png格式"> </KlUploader>
        </el-form-item> -->
      </el-form>
  
      <Editor :id="tinymceId" v-model="myValue" :init="init" :disabled="disabled" :placeholder="placeholder" />
      <!-- 按钮区域 -->
      <div class="mt-[20px] flex justify-end">
        <el-button :loading="post_loading" class="mr-[10px]" @click="previewContent">预览</el-button>
        <el-button :loading="post_loading" type="primary" @click="saveContent">发表</el-button>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
    import { keywords } from '~/api/upnew/index'
    import { reactive, ref, onMounted } from 'vue'
    import { useRouter, useRoute } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { create, list } from '~/api/channel/index'
    import { parent,parentV2 } from '~/api/upnew/index'
    import { upload } from '~/api/common/index' // 自定义上传方法
    import Editor from '@tinymce/tinymce-vue'
    import tinymce from 'tinymce/tinymce'
    import 'tinymce/themes/silver'
    import 'tinymce/themes/silver/theme'
    import 'tinymce/models/dom'
    import 'tinymce/icons/default'
    import 'tinymce/icons/default/icons'
    // 引入编辑器插件
    import 'tinymce/plugins/code' //编辑源码
    import 'tinymce/plugins/image' //插入编辑图片
    import 'tinymce/plugins/media' //插入视频
    import 'tinymce/plugins/link' //超链接
    import 'tinymce/plugins/preview' //预览
    // import 'tinymce/plugins/template' //模板
    import 'tinymce/plugins/table' //表格
    import 'tinymce/plugins/pagebreak' //分页
    import 'tinymce/plugins/lists' //列
    import 'tinymce/plugins/advlist' //列
    import 'tinymce/plugins/quickbars' //快速工具条
    import 'tinymce/plugins/wordcount' // 字数统计插件
    // import '~/assets/tinymce/langs/zh-Hans.js' //下载后的语言包
    // import 'tinymce/skins/content/default/content.css'
    // 获取从其他地方传过来的参数
    const channelId = route.query.channelId as string
  
    const props = defineProps({
      value: {
        type: String,
        default: '',
      },
      placeholder: {
        type: String,
        default: '请输入帖子内容',
      },
      height: {
        type: Number,
        default: 500,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      plugins: {
        type: [String, Array],
        default: 'code image link preview table quickbars pagebreak lists advlist',
      },
      toolbar: {
        type: [String, Array],
        default:
          'undo redo codesample bold italic underline strikethrough link alignleft aligncenter alignright alignjustify \
        bullist numlist outdent indent removeformat forecolor backcolor |formatselect fontselect fontsizeselect | \
        blocks fontfamily fontsize pagebreak lists image customvideoupload table preview | code selectall',
      },
      templates: {
        type: Array,
        default: () => [],
      },
      options: {
        type: Object,
        default: () => ({}),
      },
    })
    //用于接收外部传递进来的富文本
    const myValue = ref(props.value)
    const tinymceId = ref('vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + ''))
    const init = reactive({
      selector: '#' + tinymceId.value, //富文本编辑器的id,
      language_url: '~/staic/tinymce/langs/zh_CN.js', // 语言包的路径，具体路径看自己的项目，文档后面附上中文js文件
      language: 'zh-Hans', //语言
      skin_url: '~/staic/tinymce/skins/ui/oxide', // skin路径，具体路径看自己的项目
      content_css: '~/staic/tinymce/skins/content/default/content.css',
      menubar: true, //顶部菜单栏显示
      statusbar: true, // 底部的状态栏
      plugins: props.plugins,
      toolbar: props.toolbar,
      toolbar_mode: 'sliding',
      font_formats: 'Arial=arial,helvetica,sans-serif; 宋体=SimSun; 微软雅黑=Microsoft Yahei; Impact=impact,chicago;', //字体
      paste_convert_word_fake_lists: false, // 插入word文档需要该属性
      font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px', //文字大小
      height: props.height, //编辑器高度
      placeholder: props.placeholder,
      branding: false, //是否禁用"Powered by TinyMCE"
      promotion: false, //禁用升级按钮
      image_dimensions: false, //去除宽高属性
      paste_webkit_styles: 'all',
      paste_merge_formats: true,
      nonbreaking_force_tab: false,
      paste_auto_cleanup_on_paste: false,
      file_picker_types: 'file',
      resize: true,
      elementpath: true,
      content_style: `img {max-width:100%;} body{background-color: #fff;}`, // 直接自定义可编辑区域的css样式
      templates: props.templates,
      quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
      quickbars_image_toolbar: 'alignleft aligncenter alignright',
      quickbars_insert_toolbar: false,
      image_caption: true,
      image_advtab: true,
      convert_urls: false,
      images_upload_url: import.meta.env.VITE_BASE_API,
      images_upload_handler: function (blobInfo: any, progress: any) {
        console.log(blobInfo, progress)
        return new Promise((resolve, reject) => {
          const data = new FormData()
          data.append('file', blobInfo.blob())
          data.append('fieldName', blobInfo.filename())
          upload('/prod-api/app-api/infra/file/upload', data)
            .then((res) => {
              resolve(res.data)
            })
            .catch(() => {
              reject('Image upload failed')
            })
        })
      },
  
      // 添加自定义按钮
      setup: function (editor: any) {
        if (process.client) {
            // 注册一个新的视频上传按钮
            editor.ui.registry.addButton('customvideoupload', {
              icon: 'embed', // 使用嵌入媒体图标
              tooltip: '上传视频',
              onAction: function () {
                // 创建文件输入元素
                const input = document.createElement('input')
                input.setAttribute('type', 'file')
                input.setAttribute('accept', 'video/*')
      
                // 处理文件选择事件
                input.onchange = function () {
                  if (input.files && input.files[0]) {
                    const file = input.files[0]
                    const data = new FormData()
                    data.append('file', file)
                    data.append('fieldName', file.name)
      
                    // 可以在这里添加上传进度显示
      
                    upload('/prod-api/app-api/infra/file/upload', data)
                      .then((res) => {
                        // 插入视频到编辑器
                        editor.insertContent(`
                        <video controls width="400">
                          <source src="${res.data}" type="video/${file.name.split('.').pop()}">
                          您的浏览器不支持视频标签
                        </video>
                      `)
                      })
                      .catch((error) => {
                        console.error('视频上传失败:', error)
                        // 可以添加错误提示
                      })
                  }
                }
      
                // 触发文件选择
                input.click()
              },
            })

        }
      },
  
      preview_styles: true,
      ...props.options,
    })
  
    // 表单数据
    const formData = ref({
      projectDicId: undefined,
      postsTags: [],
      postsCover: [] as any,
      postsTitle: '',
      channelId: channelId || undefined,
    })
  
    const formRef = ref()
    const post_loading = ref(false)
    const saveContent = () => {
      formRef.value.validate().then(() => {
        if (!myValue.value) {
          ElMessage.error('请输入帖子内容')
          return
        }
        post_loading.value = true
        create({
          postsTitle: formData.value.postsTitle,
          // postsCover: formData.value.postsCover[0].url,
          postsTags: formData.value.postsTags.join(','),
          postsContent: myValue.value,
          projectDicId: formData.value.projectDicId,
          channelId: formData.value.channelId,
        })
          .then((res) => {
            console.log(res)
            if (res.code === 0) {
              ElMessage.success('发表成功')
              router.push('/communication/channel')
            }
          })
          .catch((err) => {
            console.log(err)
          })
          .finally(() => {
            post_loading.value = false
          })
      })
    }
    const previewContent = () => {
      // 获取编辑器实例
      const editor = tinymce.get(tinymceId.value)
      // 调用编辑器的预览命令
      if (editor) {
        editor.execCommand('mcePreview')
      }
    }
    //在onMounted中初始化编辑器
    onMounted(() => {
        if (process.client) {
            getParent()
            getChannelIdList()
            tinymce.init({})
        }
    })
  
    /** 获取频道列表 */
    const channelIdList = ref<any>([])
    const getChannelIdList = () => {
      list().then((res) => {
        channelIdList.value = res.data
      })
    }
  
  
    const projectTypeList = ref<any>([])
    /** 获取分类下拉框 */
    const getParent = () => {
        parentV2({
        type: 1,
        parentId: 0,
      }).then((res) => {
        projectTypeList.value = res.data
      })
    }
  
  
    const loading = ref(false)
    /** 获取标签 */
    const labelsList = ref<any>([])
    const remoteMethod = (query: string) => {
      if (query) {
        loading.value = true
        keywords({
          type: 1,
          keywords: query,
        })
          .then((res) => {
            labelsList.value = res.data
          })
          .finally(() => {
            loading.value = false
          })
      } else {
        labelsList.value = []
      }
    }
  </script>
  
  <style scoped>
    .custom-form {
      border: 2px solid #eeeeee;
      border-radius: 4px;
    }
  
    .upload-container {
      display: flex;
      flex-direction: column;
    }
  
    .cover-uploader {
      :deep(.el-upload) {
        width: fit-content;
      }
    }
  
    .image-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #909399;
      height: 100%;
    }
  
    .image-actions {
      display: flex;
      justify-content: center;
    }
  
    :deep(.el-form-item__label) {
      font-weight: normal;
    }
  
    :deep(.el-button--primary.is-link) {
      padding: 0;
      height: auto;
      font-size: 14px;
    }
  
    .text-gray-500 {
      color: #999;
    }
  
    .text-12px {
      font-size: 12px;
    }
  </style>
  