<template>
  <!-- <div
    v-if="showInput"
    class="w-[100vw] h-[100vh] fixed top-0 border-[#000] left-0 z-100 bg-[#000]/[0.1]"
  > -->
  <div @click.stop="" class="fixed bottom-0 left-0 w-full bg-[#fff] pt-10 pb-30 z-52">
    <div :class="`flex ${commentValue.length > 13 ? 'items-end' : 'items-center'} px-15 pb-10`">
      <span
        @click="showVoice = !showVoice"
        v-if="!showVoice"
        :class="`iconfont icon-voice-one text-black-6 `"
        style="font-size: 32px"
      ></span>
      <van-icon @click="showVoice = !showVoice" v-else name="volume" size="22" />

      <div
        v-if="showVoice"
        @mousedown="startRecording"
        @mouseup="stopRecording"
        @touchstart="startRecording"
        @touchend="stopRecording"
        :class="`relative rounded-full bg-white justify-center  flex-1 ml-12 mr-12 pl-5 pr-5 pt-4 pb-4  h-40 border flex items-center `"
      >
        {{ isRecording ? '松开结束' : '按住说话' }}
      </div>
      <div
        v-else
        style="overflow-y: scroll; -webkit-scrollbar-width: 0px; -webkit-scrollbar: none"
        class="box-border rounded-full bg-[#F3F3F3] justify-between px-16 py-8 flex-1 mx-12 h-40 border flex items-center"
      >
        <textarea
          v-model="commentValue"
          ref="textareaRef"
          placeholder="请输入"
          @focus="textareaFocus"
          class="ml-8 flex-1 box-border w-full h-full bg-[#F3F3F3]"
          maxlength="5000"
          style="resize: none"
          @keydown.enter="commentValue ? addComment : () => {}"
        ></textarea>
      </div>
      <span
        @click="openEmoji"
        class="iconfont icon-slightly-smiling-face text-black-6 mr-12"
        style="font-size: 32px"
      ></span>
      <span
        @click="openOther"
        class="iconfont icon-close-one text-black-6"
        style="font-size: 32px"
      ></span>

      <!-- <div
          @click="addComment"
          class="py-6 px-16 mr-12 bg-[#FD9A00] text-[#fff] flex items-center justify-center rounded-full shrink-0"
        >
          发送
        </div> -->
    </div>

    <div v-if="showEmoji" class="w-full h-300 bg-[#fff] overflow-auto">
      <div @click="closeEmojiBox" class="flex justify-end pr-15 text-black-9 text-sm">收起表情</div>
      <div class="flex items-center flex-wrap w-full px-8">
        <div
          v-for="(item, index) in emojiJson"
          :key="index"
          class="active:bg-[#ddd] text-4xl w-[10%] aspect-[1/1] flex items-center justify-center"
        >
          <div @click="selectEmoji(index)" v-html="item.emoji"></div>
        </div>
      </div>
    </div>
    <div v-if="showOther" class="w-full h-200 bg-[#fff] overflow-auto">
      <div class="flex items-start flex-wrap w-full h-full py-15 px-8 bg-white">
        <template v-for="(item, index) in otherList" :key="index">
          <div
            @click="item.fn"
            v-if="item?.isShow"
            class="mx-10 text-4xl active:text-[#FF9300] w-[15%] aspect-[1/1] flex flex-wrap items-center justify-center"
          >
            <div
              class="w-54 h-54 active:bg-[#FF9300]/[0.1] bg-[#F3F3F3] shrink-0 rounded-full mb-5 overflow-auto flex justify-center items-center"
            >
              <img :src="item.icon" alt="" />
              <span
                :class="`iconfont ${item.icon} text-black-6 active:text-[#FF9300] `"
                style="font-size: 32px"
              ></span>
            </div>
            <p class="text-sm w-full text-center">{{ item.title }}</p>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup>
import emojiJson from './emoji.js'

const shareGroup = defineModel('shareGroup')

const textareaRef = ref(null)

// 显示输入框
// const showInput = ref(true)
// 是否展示表情
const showEmoji = ref(false)
// 是否展示其他功能
const showOther = ref(false)

// 是否展示语音
const showVoice = ref(false)

// 是否在录音
const isRecording = ref(false)
const transcript = ref('') // 存储语音识别结果
// 输入的内容
const commentValue = ref('')

const addContent = ref(true)

// 记录光标位置
const cursorIndex = ref(0)

// 创建语音识别实例
let recognition = null
// if ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window) {
//   recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)()
//   recognition.continuous = true // 连续识别
//   recognition.interimResults = true // 显示中间结果
//   recognition.lang = 'zh-CN' // 设置识别语言（中文）

//   // 监听识别结果
//   recognition.onresult = (event) => {
//     const lastResult = event.results[event.resultIndex]
//     if (lastResult.isFinal) {
//       transcript.value = lastResult[0].transcript // 获取最终结果
//     } else {
//       transcript.value = lastResult[0].transcript // 获取中间结果
//     }
//   }

//   // 错误处理
//   recognition.onerror = (event) => {
//     console.error('语音识别出错:', event.error)
//     isRecording.value = false
//   }

//   // 结束时重置状态
//   recognition.onend = () => {
//     isRecording.value = false
//   }
// }

// 启动录音
const startRecording = () => {
  if (recognition) {
    // recognition?.start()
    isRecording.value = true
  }
}

// 停止录音
const stopRecording = () => {
  if (recognition) {
    // recognition?.stop()
    isRecording.value = false
  }
}

const { open, onChange } = useFileDialog({
  accept: '.png,.png,.jpeg,.JPG,Png '
})

// 上传相册
const uploadPictures = () => {
  open()
}

onChange(async (files) => {
  if (!files.length) return

  const formData = new FormData()
  formData.append('uploadFile', files[0])
  formData.append('asImage', true)
  formData.append('fieldName', 'image')
  const maxSize = 10 * 1024 * 1024 // 10 MB

  if (files[0].size > maxSize) {
    showToast('上传图片过大，请重新上传')
    return
  } else {
    try {
      showLoadingToast({
        message: '图片上传中...',
        duration: 1000000
      })

      const { data } = await request('/website/tourMessage/upload', {
        method: 'post',
        body: formData
      })
      // form.image.push(data.fileUrl)
      closeToast()
      showToast('图片上传成功')
    } catch (error) {
      // form.image.push({
      //   url: files[0].name,
      //   status: 'failed',
      //   isImage: true,
      //   message: '上传失败',
      //   imageFit: 'contain'
      // })
      closeToast()
      showToast('图片上传失败')

      console.log('图片上传失败')
    }
  }
})

// 分享群聊
const shareGroupChat = () => {
  console.log('分享群聊')
}

// 按住说话 松开结束
const changeShowVoiceing = () => {}

const otherList = reactive([
  {
    title: '相册',
    icon: 'icon-pic',
    isShow: true,
    fn: uploadPictures
  },
  {
    title: '分享群聊',
    icon: 'icon-peoples-two',
    isShow: shareGroup.value,
    fn: shareGroupChat
  }
])

// 转换评论中的一些非字符emoji
// function coveredContent(val) {
//   if (!val) return ''
//   return val.replace(/\[.*?]/g, function (str) {
//     const baseApi = import.meta.env.VITE_APP_EMOJI_API
//     const emojiName = emojiJson[str]
//     console.log(emojiName, 'emojiName')

//     if (!emojiName) return str

//     return `<img src=${baseApi}${emojiJson[str]} style="width: 20px; height: 20px;display: inline-block; vertical-align: middle"/>`
//   })
// }

async function addComment() {
  console.log(commentValue.value, '111')

  //   if (!addContent.value) return
  //   if (!token.value) {
  //     showConfirmDialog({
  //       showConfirmDialog: true,
  //       title: '提示',
  //       message: '登录后可以发布评论',
  //       theme: 'round-button'
  //     }).then(async () => {
  //       navigateTo({ path: '/login' })
  //     })
  //     return
  //   }
  if (!commentValue.value.trim()) {
    showToast('输入内容不能为空！')
    return
  }
  //   canAddComment.value = false
  //   const body = { travelNoteId: replyComment.value.travelNoteId, commentContent: commentValue.value }
  //   if (replyComment.value.id) {
  //     body.replyCommentId = replyComment.value.id
  //     body.replyUserId = replyComment.value.createUserId
  //     body.parentId = replyComment.value.parentId
  //   }
  //   request('website/comment/tourTravelNotesComment/add', { method: 'post', body })
  //     .then(() => {
  //       commentValue.value = ''
  //       showToast('评论成功')
  //       // getMyCommentList()
  //       showInput.value = false
  //       showEmoji.value = false
  //     })
  //     .finally(() => (canAddComment.value = true), (replyComment.value = {}), (cursorIndex.value = 0))
}

// 获取焦点
function textareaFocus() {
  showEmoji.value = false
  // showInput.value = true
  textareaRef.value?.focus()
}

// 文本域失焦
function handleBlur() {
  showEmoji.value = false
  textareaRef.value?.blur()
  // showInput.value = false
  replyComment.value = {}
}

// 打开表情
function openEmoji() {
  showOther.value = false
  nextTick(() => {
    textareaRef.value.selectionStart && (cursorIndex.value = textareaRef.value.selectionStart)
    showEmoji.value = true
  })
}

// 打开上传图片或者其他的
function openOther() {
  showEmoji.value = false
  showOther.value = true
}

// 收起表情
function closeEmojiBox() {
  showEmoji.value = false
  nextTick(() => {
    textareaRef.value.focus()
  })
}

// 选择表情
function selectEmoji(emojiStr = '') {
  const length = emojiStr.length
  commentValue.value =
    commentValue.value.slice(0, cursorIndex.value) +
    emojiJson[emojiStr].emoji +
    commentValue.value.slice(cursorIndex.value)

  nextTick(() => {
    cursorIndex.value += length
    textareaRef.value.setSelectionRange(cursorIndex.value, cursorIndex.value)
  })
}
</script>

<style lang="scss" scoped>
.no-scrollbar::-webkit-scrollbar {
  width: 0;
}
</style>
