import dayjs from 'dayjs'
import { defineComponent, onMounted } from 'vue'
import E from 'wangeditor'
import './uploadAudio'
import { getUploadSign, onOnlyFileUpload } from '@/utils/oss-file-upload'

export default defineComponent({
  name: 'wangEditor',
  props: {
    html: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    bucketName: {
      type: String,
      default: 'gyt'
    },
    path: {
      type: String,
      default: ''
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    const uploadFile = async (file: any) => {
      try {
        const name = file.name
        const suffix = name.slice(name.lastIndexOf('.'))
        const months = dayjs().format('MM')
        const fileName = `${props.path}${months}/${Date.now() + suffix}`
        const obj = {
          filename: fileName,
          bucketName: props.bucketName,
          postData: {
            filename: fileName,
            acl: 'public-read',
            key: fileName,
            unknowValueField: []
          }
        }

        // const { data } = await policy(obj)
        const { data } = await getUploadSign(obj)

        console.log('🚀 ~ data', data)
        const state: any = {
          policy: data.policy,
          signature: data.signature,
          key: fileName,
          KSSAccessKeyId: data.kssAccessKeyId,
          acl: 'public-read',
          name: fileName,
          file
        }
        const ossUploadUrl = `https://${props.bucketName}.ks3-cn-beijing.ksyuncs.com/`
        const url = await onOnlyFileUpload(ossUploadUrl, state)
        return url
      } catch (err) {
        console.log(err)
      }
      return ''
    }
    onMounted(() => {
      const editor = new E('#editorWrap')
      editor.config.onchange = function (newHtml: any) {
        // console.log('change 之后最新的 html', newHtml)
        emit('change', newHtml)
      }
      editor.config.uploadImgMaxLength = 1 // 一次最多上传 1 个图片
      editor.config.customUploadImg = async function (resultFiles: any, insertImgFn: any) {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        const url = await uploadFile(resultFiles[0])
        // 上传图片，返回结果，将图片插入到编辑器中
        insertImgFn(url)
      }
      editor.config.uploadVideoAccept = ['mp4']
      editor.config.customUploadVideo = async function (resultFiles: any, insertVideoFn: any) {
        // resultFiles 是 input 中选中的文件列表
        // insertVideoFn 是获取视频 url 后，插入到编辑器的方法
        const url = await uploadFile(resultFiles[0])
        // 上传视频，返回结果，将视频地址插入到编辑器中
        insertVideoFn(url)
      }
      ;(editor.config as any).customUploadAudio = async function (resultFiles: any) {
        // resultFiles 是 input 中选中的文件列表
        // insertVideoFn 是获取视频 url 后，插入到编辑器的方法
        const url = await uploadFile(resultFiles[0])
        // 上传视频，返回结果，将视频地址插入到编辑器中
        editor.cmd.do(
          'insertHTML',
          `<audio src="${url}" controls="controls" style="max-width:100%" contenteditable="false"></audio>`
        )
      }
      editor.create()
      editor.txt.html(props.html ? `<p>${props.html}</p>` : '<p data-we-empty-p=""></p>') // 重新设置编辑器内容
      props.disabled && editor.disable()
    })
    return () => <div id="editorWrap"></div>
  }
})
