<template>
  <div class="test-page flex flex-col" oncontextmenu="return false;">
    <div class="flex flex-col">
      <template v-for="(message, i) in messageList" :key="i">
        <ChatMessage :message="message"></ChatMessage>
      </template>
    </div>

    <div class="flex mt-auto py-20 flex-col bg-[#999]">
      <van-uploader
          :preview-image="false"
          :after-read="upLoadImg"
          accept="image/*"
          :multiple="false"
          :max-count="1"
      ><img src="~/assets/img/scan/pic.png" height="32" width="32" alt=""/>
      </van-uploader>
<!--      <template v-if="inRecording">
        <div class="flex flex-row px-20 justify-around">
          <van-button @click="cancelRecording">取消</van-button>
          <van-button @click="handleStopRecording" type="warning">完成并发送</van-button>
        </div>
        <div class="flex flex-row p-20 justify-center text-white text-base">
          <van-loading class="mr-5"/>
          正在说话
        </div>
      </template>
      <template v-else>
        <van-button type="primary" @click="handleTouchstart">点击说话</van-button>
      </template>-->
    </div>
  </div>
</template>
<script setup>
import ChatMessage from '../chat/chat-message'
import {useRecording} from "~/pages/test/useRecording";
// import VConsole from 'vconsole';
// new VConsole({ theme: 'dark' });

let messageList = ref([
  {
    type: 'link',
    messageContent: '大概更.baidu.com',
    viewType: 0
  },
  {
    type: 'link',
    messageContent: '大概更多如果更多人的人人待https://fanyi.baidu.com',
    viewType: 0
  },
  {
    type: 'link',
    messageContent: 'rdrdgdrwrhttps://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
    viewType: 1
  },
  {
    type: 'text',
    messageContent: '发送文字消息发送文字消息发送文字消息发送文字消息发送文字消息发送文字消息发送文字消息',
    viewType: 0
  },
  {
    type: 'text',
    messageContent: '发送文字消息发送文字消息发送文字消息发送文字消息发送文字消息发送文字消息发送文字消息',
    viewType: 1
  },
  {
    type: 'image',
    messageContent: 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg',
    viewType: 0
  },
  {
    type: 'image',
    messageContent: null,
    viewType: 1
  },
  {
    type: 'image',
    messageContent: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
    viewType: 1
  }
])

const {inRecording, startRecording, stopRecording, cancelRecording} = useRecording()
const handleTouchstart = async () => {
  try {
    await startRecording()
  } catch (e) {

  } finally {

  }
}

const handleStopRecording = async () => {
  try {
    const {success, errorMessage, audio} = await stopRecording()
    if (!success) {
      showToast(errorMessage);
      return
    }
    console.log(audio, '---audio---')
    const formData = new FormData()
    formData.append('uploadFile', audio.blob)
    formData.append('asImage', false)
    formData.append('fieldName', 'messageContent')
    const res = await request(`/website/tourMessage/upload`, {
      method: 'post',
      body: formData
    })
    console.log(res, 'resresres')

  } catch (e) {
    console.log(e, 'handleStopRecording')
  } finally {

  }
}

const upLoadImg = async (e, b) => {
  try {
    console.log(e.file)
    messageList.value.push({
      type: 'image',
      messageContent: e.file,
      viewType: 0
    })
  } catch (e) {

  }
}
onMounted(() => {
  /*  document.addEventListener('contextmenu', function(e) {
      e.preventDefault();
    });*/
})
</script>
<style scoped lang="scss">
* {
  user-select: none;
}

.test-page {
  height: calc(100vh - 50px);
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
}
</style>