<template>
  <view class="TUI-message-input-container">
    <view class="TUI-message-input flexA">
      <!-- #ifdef H5 -->
      <!-- <image class="TUI-icon" @tap="handleEmoji" src="../../../../assets/icon/emoji.svg" v-if="[10, '10', 21, '21'].includes(detailData.consultationWay)"></image> -->
      <!-- #endif -->
      <!-- #ifndef H5 -->
      <!-- 语音暂不开放 -->
      <!-- <image class="TUI-icon" @tap="handleSwitchAudio" src="../../../../assets/icon/audio.svg" v-if="[10, '10', 21, '21'].includes(detailData.consultationWay)"></image> -->
      <!-- #endif -->
      <view v-if="!isAudio" class="TUI-message-input-main">
        <input
          v-if="[10, '10', 21, '21'].includes(detailData.consultationWay)"
          class="TUI-message-input-area"
          :adjust-position="true"
          cursor-spacing="20"
          v-model="inputText"
          confirm-type="send"
          confirm-hold="true"
          @confirm="handleSendTextMessage"
          maxlength="140"
          type="text"
          placeholder-class="input-placeholder"
          placeholder="说点什么呢~"
        />
        <view v-else style="font-size: 18rpx">{{ proxy.$h.optObjectValue('consultationWay', detailData.consultationWay) + '暂不支持发送消息' }}</view>
      </view>
      <view v-else class="TUI-message-input-main">
        <AudioMessage></AudioMessage>
      </view>
      <!-- <up-button
        v-if="[10, '10', 21, '21'].includes(detailData.consultationWay)"
        color="#05B8D2"
        shape="circle"
        text="发送"
        throttleTime="1500"
        @click="handleSendTextMessage"
        :customStyle="{ width: '122rpx', height: '74rpx', marginRight: '16rpx' }"
      ></up-button> -->

      <view class="TUI-message-input-functions" hover-class="none">
        <image class="TUI-icon" @tap="handleEmoji" src="../../../../assets/icon/emoji.svg"></image>
        <view @tap="handleExtensions">
          <image class="TUI-icon" src="../../../../assets/icon/more.svg"></image>
        </view>
      </view>
    </view>
    <view v-if="displayFlag === 'emoji'" class="TUI-Emoji-area">
      <Face :show="displayFlag === 'emoji'" @send="handleSend" @handleSendEmoji="handleSendTextMessage"></Face>
    </view>
    <view v-if="displayFlag === 'extension'" class="TUI-Extensions">
      <!-- TODO: 这里功能还没实现
				<!       <camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>-->
      <view class="TUI-Extension-slot" @tap="handleSendImageMessage('camera')" v-if="[10, '10', 21, '21'].includes(detailData.consultationWay)">
        <image class="TUI-Extension-icon" src="../../../../assets/icon/take-photo.svg"></image>
        <view class="TUI-Extension-slot-name">拍照</view>
      </view>
      <view class="TUI-Extension-slot" @tap="handleSendImageMessage('album')" v-if="[10, '10', 21, '21'].includes(detailData.consultationWay)">
        <image class="TUI-Extension-icon" src="../../../../assets/icon/send-img.svg"></image>
        <view class="TUI-Extension-slot-name">图片</view>
      </view>
      <view class="TUI-Extension-slot" @tap="handleSendVideoMessage('album')" v-if="[10, '10', 21, '21'].includes(detailData.consultationWay)">
        <image class="TUI-Extension-icon" src="../../../../assets/icon/take-video.svg"></image>
        <view class="TUI-Extension-slot-name">视频</view>
      </view>
      <view class="TUI-Extension-slot" @tap="handleSendVideoMessage('camera')" v-if="false">
        <image class="TUI-Extension-icon" src="../../../../assets/icon/take-photo.svg"></image>
        <view class="TUI-Extension-slot-name">录像</view>
      </view>
      <!-- #ifndef H5 -->
      <view class="TUI-Extension-slot" @tap="handleCalling(1)" v-if="[23, '23'].includes(detailData.consultationWay)">
        <image class="TUI-Extension-icon" src="../../../../assets/icon/audio-calling.svg"></image>
        <view class="TUI-Extension-slot-name">语音通话</view>
      </view>
      <view class="TUI-Extension-slot" @tap="handleCalling(2)" v-if="[22, '22'].includes(detailData.consultationWay)">
        <image class="TUI-Extension-icon" src="../../../../assets/icon/take-video.svg"></image>
        <view class="TUI-Extension-slot-name">视频通话</view>
      </view>
      <!-- #endif -->
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, defineEmits, watchEffect, reactive, toRefs, onMounted, computed, nextTick, getCurrentInstance, ComponentPublicInstance } from 'vue'
import Face from './message/face.vue'
import AudioMessage from './message/audio.vue'
import store from '../../../../TUICore/store'

const TUIChatInput = defineComponent({
  components: {
    Face,
    AudioMessage
  },
  props: {
    text: {
      type: String,
      default: () => {
        return ''
      }
    },
    conversationData: {
      type: Object,
      default: () => {
        return ''
      }
    },
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['scrollbottomHandler', 'sendMessagehandler'],
  setup(props, { emit }) {
    const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

    const TUIServer: any = uni.$TUIKit.TUIChatServer
    const data = reactive({
      firstSendMessage: true,
      inputText: '',
      extensionArea: false,
      sendMessageBtn: false,
      displayFlag: '',
      isAudio: false,
      displayServiceEvaluation: false,
      displayCommonWords: false,
      displayOrderList: false,

      conversation: computed(() => store.state.timStore.conversation)
    })

    // watchEffect(() => {
    //   data.inputText = props.text
    // })

    const handleSwitchAudio = () => {
      data.isAudio = !data.isAudio
    }

    const handleEmoji = () => {
      data.displayFlag = data.displayFlag === 'emoji' ? '' : 'emoji'
    }
    const handleExtensions = (e: any) => {
      data.displayFlag = data.displayFlag === 'extension' ? '' : 'extension'
    }

    // 发送消息
    const handleSendTextMessage = (e: any) => {
      // if (data.inputText.trimEnd()) {
      //   uni.$TUIKit.TUIChatServer.sendTextMessage(JSON.parse(JSON.stringify(data.inputText)))
      // }
      emit('sendMessagehandler', data.inputText)
      emit('scrollbottomHandler')
      data.inputText = ' '
    }

    // 处理需要合并的数据
    const handleSend = (emo: any) => {
      data.inputText += emo.name
      // inputEle.value.focus();
    }

    const handleSendImageMessage = (type: any) => {
      uni.chooseImage({
        sourceType: [type],
        count: 1,
        success: res => {
          uni.getImageInfo({
            src: res.tempFilePaths[0],
            success(image) {
              console.error(image)
              TUIServer.sendImageMessage(res, image)
              emit('scrollbottomHandler')
            }
          })
        }
      })
    }

    const handleSendVideoMessage = (type: any) => {
      uni.chooseVideo({
        sourceType: [type],
        // 来源相册或者拍摄
        maxDuration: 60,
        // 设置最长时间60s
        camera: 'back',
        // 后置摄像头
        success: res => {
          if (res) {
            TUIServer.sendVideoMessage(res)
          }
        }
      })
    }

    const handleCalling = (value: any) => {
      // todo 目前支持单聊
      if (data.conversation.type === 'GROUP') {
        uni.showToast({
          title: '群聊暂不支持',
          icon: 'none'
        })
        return
      }
      const { userID } = data.conversation.userProfile

      // #ifdef APP-PLUS
      const TUICallKit = uni.requireNativePlugin('TencentCloud-TUICallKit')
      console.warn(TUICallKit, 'TUICallKit ｜ ok666666666666699999999999999999999999999999') // 本地日志
      uni.$TUICallKit = TUICallKit // 全局引入

      if (typeof uni.$TUICallKit === 'undefined') {
        console.error('请集成 TUICallKit 插件，使用真机运行并且自定义基座调试，请参考官网文档：https://cloud.tencent.com/document/product/269/83857')
        uni.showToast({
          title: '请集成 TUICallKit 插件哦 ～ ',
          icon: 'none',
          duration: 3000
        })
      } else {
        console.log(uni.$TUICallKit, '6666666666666666666666666666666666')

        nextTick(() => {
          uni.$TUICallKit.call(
            {
              userID: userID,
              callMediaType: value
            },
            res => {
              console.log(JSON.stringify(res), '有值嘛')
            }
          )
        })
      }
      // #endif

      // #ifdef MP-WEIXIN
      if (typeof uni.$TUICallKit !== 'undefined' && uni.$TUICallKit.value !== null) {
        uni.$TUICallKit.value.call({
          userID: userID,
          type: value
        })
      } else {
        console.error('请集成 TUICallKit 插件哦～，请参考官网文档：https://cloud.tencent.com/document/product/269/83858')
        uni.showToast({
          title: '请集成 TUICallKit 插件哦 ～ ',
          icon: 'none',
          duration: 3000
        })
      }
      // #endif

      // #ifdef H5
      uni.showToast({
        title: '暂不支持',
        icon: 'none'
      })
      // #endif
    }
    return {
      ...toRefs(data),
      proxy,
      handleExtensions,
      handleSendImageMessage,
      handleSendTextMessage,
      handleSendVideoMessage,
      handleEmoji,
      handleSend,
      handleSwitchAudio,
      handleCalling
    }
  }
})
export default TUIChatInput
</script>
<style lang="scss" scoped>
.TUI-message-input-container {
  background-color: #fff;
  padding-bottom: 20rpx;
}

.TUI-message-input {
  display: flex;
  padding: 16rpx;
  background-color: #fff;
  width: 100vw;
}

.TUI-commom-function {
  display: flex;
  flex-wrap: nowrap;
  width: 750rpx;
  height: 106rpx;
  background-color: #fff;
  align-items: center;
}

.TUI-commom-function-item {
  display: flex;
  width: 136rpx;
  justify-content: center;
  align-items: center;
  font-size: 24rpx;
  color: #ffffff;
  height: 48rpx;
  margin-left: 16rpx;
  border-radius: 24rpx;
  background-color: #00c8dc;
}

.TUI-commom-function-item:first-child {
  margin-left: 48rpx;
}

.TUI-message-input-functions {
  display: flex;
}

.TUI-message-input-main {
  flex: 1;
  margin: 0 10rpx;
  padding: 0 5rpx;
  border-radius: 5rpx;
  display: flex;
  align-items: center;
  height: 74rpx;
  border-radius: 116rpx;
  background: #f4f5f7;
  box-sizing: border-box;
  padding: 0 24rpx;
}
.TUI-message-input-area {
  width: 100%;
  height: 100%;
}

.TUI-icon {
  width: 56rpx;
  height: 56rpx;
  margin: 0 16rpx;
}

.TUI-Extensions {
  display: flex;
  flex-wrap: wrap;
  width: 100vw;
  height: 450rpx;
  margin-left: 14rpx;
  margin-right: 14rpx;
}

.TUI-Extension-slot {
  width: 128rpx;
  height: 170rpx;
  margin-left: 26rpx;
  margin-right: 26rpx;
  margin-top: 24rpx;
}

.TUI-Extension-icon {
  width: 128rpx;
  height: 128rpx;
}

.TUI-sendMessage-btn {
  display: flex;
  align-items: center;
  margin: 0 10rpx;
}

.TUI-Emoji-area {
  width: 100vw;
  height: 450rpx;
}

.TUI-Extension-slot-name {
  line-height: 34rpx;
  font-size: 24rpx;
  color: #333333;
  letter-spacing: 0;
  text-align: center;
}

.record-modal {
  height: 300rpx;
  width: 60vw;
  background-color: #000;
  opacity: 0.8;
  position: fixed;
  top: 670rpx;
  z-index: 9999;
  left: 20vw;
  border-radius: 24rpx;
  display: flex;
  flex-direction: column;
}

.record-modal .wrapper {
  display: flex;
  height: 200rpx;
  box-sizing: border-box;
  padding: 10vw;
}

.record-modal .wrapper .modal-loading {
  opacity: 1;
  width: 40rpx;
  height: 16rpx;
  border-radius: 4rpx;
  background-color: #006fff;
  animation: loading 2s cubic-bezier(0.17, 0.37, 0.43, 0.67) infinite;
}

.modal-title {
  text-align: center;
  color: #fff;
}

@keyframes loading {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(30vw, 0);
    background-color: #f5634a;
    width: 40px;
  }

  100% {
    transform: translate(0, 0);
  }
}
</style>