<template>
  <div>
    <a-modal
      title="上传图片"
      :visible="visible"
      :editor="editor"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      okText="插入图片"
      cancelText="取消"
    >
      <!-- Tab栏 -->
      <button
        @click="tab = 1"
        :class="{ active: tab == 1 }"
        class="tab text-gray-800 hover:text-color-primary rounded px-2 py-1 mb-5 mr-5"
      >
        通过链接上传
      </button>
      <button
        @click="tab = 2"
        :class="{ active: tab == 2 }"
        class="tab text-gray-800 hover:text-color-primary rounded-sm px-2 py-1 mb-5"
      >
        拖动 / 选择文件上传图片
      </button>
      <!-- 上传区域 -->
      <div v-if="tab == 1">
        <a-input type="text" v-model="imageSrc" placeholder="请输入图片链接" />
      </div>
      <div v-if="tab == 2">
        <vue-dropzone
          ref="myVueDropzone"
          @vdropzone-success="vfileUploaded"
          id="dropzone"
          :options="dropzoneOptions"
        ></vue-dropzone>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import vue2Dropzone from 'vue2-dropzone'
import 'vue2-dropzone/dist/vue2Dropzone.min.css'
import FileService from '@/service/FileService/index'
import { Editor } from '@tiptap/vue-2'

export default Vue.extend({
  components: { vueDropzone: vue2Dropzone },
  props: {
    editor: {
      type: Object as PropType<Editor>,
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      imageSrc: '',
      dropzoneOptions: {
        url: '/proxyApi/api/v1/image/upload',
        thumbnailWidth: 200,
        maxFilesize: 200,
        dictDefaultMessage: '拖动/选择文件上传图片（200M以内）',
        paramName: 'uploadFile'
      },
      tab: 1,
    }
  },
  // computed: {
  //   validImage() {
  //     return (
  //       this.imageSrc.match(/unsplash/) !== null ||this.imageSrc.match(/\.(jpeg|jpg|gif|png)$/) != null
  //     );
  //   },
  // },
  methods: {
    showModal() {
      this.visible = true
    },
    vfileUploaded(file: File | Blob, res: { data: string }) {
      this.imageSrc = new FileService().getImageSrc(res.data)
      /** Here is where you get your URL/Base64 string or what ever.*/
    },
    cursorToEnd(){
      const to = this.editor.state.selection.to
      this.editor.chain().focus(to).run()
    },
    handleOk(e: Event) {
      if (this.imageSrc) {
        this.editor.chain().focus().setImage({ src: this.imageSrc }).run()
        this.cursorToEnd()
      } else if (this.$refs.myVueDropzone as any) {
        ;(this.$refs.myVueDropzone as any)
          .getAcceptedFiles()
          .forEach((file: any) => {
            this.editor.chain().focus().setImage({ src: file.dataURL }).run()
            this.cursorToEnd()
          })
      }
      this.handleCancel(e)
    },
    handleCancel(e: Event) {
      this.visible = false
      this.imageSrc = ''
      this.tab = 1
    },
  },
})
</script>

<style scoped>
.tab.active {
  background: #e6f7ff;
  color: #1890ff;
  border: none;
}
</style>
