<script setup>
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
import tinymce from 'tinymce'
import { REQUEST } from '~/utils/request'

const props = defineProps({
  id: {
    type: String,
    default: `tiny-${Date.now()}-${~~(Math.random() * 10000)}`,
  },
  htmlClass: { default: '', type: String },
  modelValue: String,
  o: {
    default() {
      return {}
    },
    type: Object,
  },
})

const emits = defineEmits(['update:modelValue', 'click:audio', 'click:video', 'click:submit'])

const content = ref('')

watch(
  () => content.value,
  (v) => {
    emits('update:modelValue', v)
  },
)


function handleClickAudioCall() {
  emits('click:audio')
}

function handleClickVideoCall() {
  emits('click:video')
}


const handleAfterRead = (fileProxy) => {
  // const file = blobInfo.blob()
  const { file } = fileProxy
  console.log('file : ', file)
  return REQUEST.upload({
    url: '/upload/main/file',
    data: {
      filedata: file,
    },
    // onUploadProgress(progressEvent) {
    //   progress(~~(progressEvent.loaded / progressEvent.total * 100 | 0))
    // },
  }).then((res) => {
    if (res.code === '1') {   // return window.GLOBAL_CONFIG.oss + (res.data.url)
      // editor?.selection.setContent(`<img src="${window.GLOBAL_CONFIG.oss + (res.data.url)}" width="150" />`)
      // emits('update:modelValue', editor?.getContent())
      emits('click:submit', `<img src="${window.GLOBAL_CONFIG.oss + (res.data.url)}" width="150" />`)
    }
    else {
      fileProxy.status = 'failed'
      fileProxy.message = '上传失败'
    }
  })
}

defineExpose({
  clear(v = '') {
    content.value = v
  },
})


</script>

<template>
  <div class="relative">

    <div class=" left-14 top-0 flex z-1000 text-hex-222f3e space-x-1px">

      <div class="cursor-pointer flex_center box-content tbtn">
        <van-uploader :after-read="handleAfterRead" class=" w-6 h-6">
          <i:uil:image-upload class=" w-6 h-6" />
        </van-uploader>
      </div>

      <div @click="handleClickAudioCall" class="cursor-pointer flex_center box-content tbtn ">
        <i:material-symbols:call class="w-6 h-6" />
      </div>
      <div @click="handleClickVideoCall" class="cursor-pointer flex_center box-content tbtn ">
        <i:material-symbols:video-call-outline class=" w-6 h-6" />
      </div>
    </div>

    <!-- <textarea :id="id" class="tinyarea w-full min-h-42px" v-model="content"></textarea> -->
    <van-field v-model="content" label-align="top" rows="1" autosize type="textarea"  />
  </div>
</template>

<style lang="scss">
.tinyarea+.tox-tinymce {
  border: none;
  border-radius: 0;
  // height: 42px !important;

  // .tox-editor-header{
  //   display: none;
  // }

  &.tox:not(.tox-tinymce-inline) .tox-editor-header {
    box-shadow: none;
    padding: 0 0;

    .tox-toolbar-overlord .tox-toolbar {
      background: #e4e6eb;
    }
  }

  .tox-tbtn {
    margin-top: 0;
    margin-bottom: 0;
    cursor: pointer;
    width: 40px;
    height: 40px;
    // background: #f3f4f6;
    box-shadow: inset 0 0 0 1px #e4e6eb;
    border-radius: 2px;
  }


}

.tbtn {
  width: 40px;
  height: 40px;
  // background: #f3f4f6;
  box-shadow: inset 0 0 0 1px #e4e6eb;
  border-radius: 2px;
}
</style>
