<template>
  <u-sticky>
    <u-navbar title="问诊中" :autoBack="true" bgColor="#fff" placeholder safeAreaInsetTop :titleStyle="{ color: '#000' }" leftIconColor="#000"></u-navbar>
    <view class="imtopinfo flexJ">
      <view class="flexA">
        <image src="/static/images/v.png" class="imtopinfo-avatar" mode="aspectFill" />
        <view class="imtopinfo-username">名字</view>
        <u-count-down :time="30 * 60 * 60 * 1000" format="HH:mm:ss"></u-count-down>
        <view class="graytext">后结束问诊</view>
      </view>
      <!-- <view class="righttext">已结束</view> -->
      <up-button type="info" shape="circle" text="结束问诊" throttleTime="1500" @click="" :customStyle="{ width: '146rpx', height: '66rpx', marginRight: '0rpx' }"></up-button>
    </view>
  </u-sticky>
  <!-- #ifdef MP-WEIXIN -->
  <tuicallkit ref="TUICallKit"></tuicallkit>
  <!-- #endif -->

  <view class="TUIChat" v-if="conversationType === 'chat'">
    <view class="more-btn" v-if="conversation?.type === 'GROUP'" @click="handleGetProfile">更多</view>
    <view class="TUIChat-container">
      <scroll-view class="TUIChat-main" scroll-y="true" :scroll-with-animation="true" :refresher-triggered="triggered" :refresher-enabled="true" @refresherrefresh="handleRefresher" :scroll-top="scrollTop">
        <view class="TUI-message-list" @touchstart="handleTouchStart" @click="dialogID = ''">
          <!-- 用户信息卡片 -->
          <UserInfoCard />
          <view class="loading-text" v-if="isCompleted">没有更多</view>
          <view v-for="(item, index) in messages" :key="item.ID" :id="'view' + item.ID">
            <view class="time-container" v-if="item.showTime">{{ caculateTimeago(item.time * 1000) }}</view>
            <MessageTip v-if="!item.isRevoked && item.type === types.MSG_GRP_TIP" :data="handleTipMessageShowContext(item)" />
            <!-- <MessageTip v-if="item.type === types.MSG_GRP_SYS_NOTICE" /> -->
            <MessageBubble v-if="!item.isRevoked && item.type !== types.MSG_GRP_TIP" :data="item">
              <Message-Operate
                v-if="dialogID === item.ID"
                :data="item"
                class="dialog dialog-item"
                :style="{
                  top: dialogPosition.top + 'px',
                  right: dialogPosition.right + 'px',
                  left: dialogPosition.left + 'px'
                }"
              ></Message-Operate>
              <MessageText :id="item.flow + '-' + item.ID" v-if="item.type === types.MSG_TEXT" :data="handleTextMessageShowContext(item)" :messageData="item" @longpress="handleItem($event, item)"></MessageText>
              <MessageImage :id="item.flow + '-' + item.ID" v-if="item.type === types.MSG_IMAGE" :data="handleImageMessageShowContext(item)" :messageData="item" @longpress="handleItem($event, item)"></MessageImage>
              <MessageVideo :id="item.flow + '-' + item.ID" v-if="item.type === types.MSG_VIDEO" :data="handleVideoMessageShowContext(item)" :messageData="item" @longpress="handleItem($event, item)" />
              <MessageAudio :id="item.flow + '-' + item.ID" v-if="item.type === types.MSG_AUDIO" :data="handleAudioMessageShowContext(item)" :messageData="item" @longpress="handleItem($event, item)" />
              <MessageFace :id="item.flow + '-' + item.ID" v-if="item.type === types.MSG_FACE" :data="handleFaceMessageShowContext(item)" :messageData="item" @longpress="handleItem($event, item)" />
              <MessageCustom :id="item.flow + '-' + item.ID" v-if="item.type === types.MSG_CUSTOM" :data="handleCustomMessageShowContext(item)" :messageData="item" @longpress="handleItem($event, item)" />
            </MessageBubble>
            <MessageRevoked v-if="item.isRevoked" :data="item" @edit="handleEdit(item)" />
          </view>
          <!-- 对话结束显示 -->
          <ConversationEnd />
        </view>
      </scroll-view>
    </view>
    <view class="flexA imBtn">
      <view @click="sendPrescriptionState = true">发送处方单</view>
      <view>查看处方单</view>
    </view>
    <TUIChatInput :text="text" :conversationData="conversation"></TUIChatInput>
  </view>
  <view class="TUIChat" v-if="conversationType === 'system'">
    <MessageSystem :data="messages" :types="types" />
  </view>
  <u-popup :show="sendPrescriptionState" @close="sendPrescriptionState = false" mode="bottom" closeIconPos="top-right" closeable round="20">
    <view class="main1">
      <view class="formTitle">xxx开处方单</view>
      <view class="formSubTitle">认证用户 未接诊可退出 不满意可申诉</view>
      <view class="main1-title">问诊病情</view>
      <view style="width: 94%">
        <u-textarea v-model="form.text" placeholder="请输入问诊病情(200字以内)" border="none" maxlength="200" count></u-textarea>
      </view>
      <view class="main1-title">处方药</view>

      <view v-for="_ in 1">
        <view class="flexC grayinput1" style="width: 90%; margin-left: 50rpx">
          <up-input placeholder="输入药物名称" border="none"></up-input>
        </view>
        <view class="flexA" style="margin-bottom: 18rpx">
          <view style="margin-right: 18rpx">
            <u-icon name="minus-circle-fill" size="18" color="#CDCDCD"></u-icon>
          </view>

          <view class="flexC grayinput">
            <up-input placeholder="价格" border="none">
              <template #prefix>
                <text>¥</text>
              </template>
            </up-input>
          </view>
          <view class="flexC grayinput">
            <up-input placeholder="输入药物数量" border="none"></up-input>
          </view>
        </view>
        <view style="width: 86%; margin-left: 50rpx">
          <u-textarea v-model="form.text" placeholder="输入说明" border="none" maxlength="200"></u-textarea>
        </view>
      </view>

      <view class="flexC addblueBtn">
        <view class="flexA">
          <u-icon name="plus-circle" size="18" color="#05B8D2"></u-icon>
          <view class="bluetext">添加处方药</view>
        </view>
      </view>

      <view class="main1-title">处方单证明:</view>

      <view class="flexJ" style="margin-top: 32rpx">
        <view>处方金额：</view>
        <view style="width: 30vw">
          <up-input placeholder="请输入金额" border="none">
            <template #prefix>
              <view style="color: #a6a6a6">¥</view>
            </template>
          </up-input>
        </view>
      </view>
      <view class="flexJ" style="margin: 32rpx 0">
        <view>处方金额：</view>
        <view style="width: 30vw" class="flexD">
          <view style="color: #a6a6a6">选填</view>
          <u-icon name="arrow-right" size="18" color="#a6a6a6"></u-icon>
        </view>
      </view>
      <view class="flexA">
        <view class="flexA fileImg" v-for="(_, index) in form.file">
          <image src="/static/images/addImg.png" class="fileimage" mode="aspectFill" />
          <image src="/static/images/close.png" class="close" mode="aspectFill" @click="form.file.splice(index, 1)" />
        </view>
        <view v-if="form.file.length < 3" class="uploadImg">
          <view class="flexCCol">
            <image src="/static/images/addImg.png" mode="aspectFill" />
            <view>添加图片</view>
          </view>
        </view>
      </view>
      <view class="flexJ" style="margin-top: 32rpx">
        <view>处方金额：</view>
        <view style="width: 30vw">
          <up-input placeholder="请输入金额" border="none">
            <template #prefix>
              <view>¥</view>
            </template>
          </up-input>
        </view>
      </view>
      <u-line margin="32rpx 0"></u-line>
      <view style="height: 270rpx"></view>
      <view class="fixed-bottom">
        <view class="form-btns">
          <up-button color="#05B8D2" shape="circle" text="发送" throttleTime="1500" @click=""></up-button>
        </view>
        <u-safe-bottom></u-safe-bottom>
      </view>
    </view>
  </u-popup>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed, nextTick, watch, onMounted, shallowRef, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { onReady, onLoad, onNavigationBarButtonTap, onUnload } from '@dcloudio/uni-app'

// 消息元素组件
import MessageBubble from './components/message-elements/message-bubble.vue'
import MessageText from './components/message-elements/message-text.vue'
import MessageImage from './components/message-elements/message-image.vue'
import MessageOperate from './components/message-elements/message-operate.vue'
import MessageVideo from './components/message-elements/message-video.vue'
import MessageAudio from './components/message-elements/message-audio.vue'
import MessageFace from './components/message-elements/message-face.vue'
import MessageCustom from './components/message-elements/message-custom.vue'
import MessageTip from './components/message-elements/message-tip.vue'
import MessageRevoked from './components/message-elements/message-revoked.vue'
import MessageSystem from './components/message-elements/message-system.vue'
// 底部消息发送组件
import TUIChatInput from './components/message-input'
import UserInfoCard from '@/components/UserInfoCard'
import ConversationEnd from '@/components/ConversationEnd'
import store from '../../TUICore/store'
import {
  handleAvatar,
  handleTextMessageShowContext,
  handleImageMessageShowContext,
  handleVideoMessageShowContext,
  handleAudioMessageShowContext,
  handleFileMessageShowContext,
  handleFaceMessageShowContext,
  handleLocationMessageShowContext,
  handleMergerMessageShowContext,
  handleTipMessageShowContext,
  handleCustomMessageShowContext
} from '../../utils/untis'

import { caculateTimeago } from '../../utils/date'
import Vuex from 'vuex'
import { TUIChatServer } from '../../TUICore/server'

export default defineComponent({
  name: 'TUIChat',
  components: { MessageText, MessageImage, MessageVideo, MessageAudio, MessageFace, MessageCustom, MessageBubble, MessageTip, MessageRevoked, MessageSystem, TUIChatInput, MessageOperate, UserInfoCard, ConversationEnd },

  setup(props) {
    const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }
    const timStore = store.state.timStore
    uni.$TUIKit.TUIChatServer = new TUIChatServer()
    const TUICallKit = shallowRef(null)
    const TUIServer = uni.$TUIKit.TUIChatServer
    const left: number | null = 0
    const right: number | null = 0
    const defaultDialogPosition = {
      top: -70,
      left,
      right
    }
    const data = reactive({
      messageList: computed(() => timStore.messageList),
      conversation: computed(() => timStore.conversation),
      triggered: false,
      scrollTop: 999,
      text: '',
      types: uni.$TIM.TYPES,
      currentMessage: {},
      dialogID: '',
      forwardStatus: false,
      imageFlag: false,
      isCompleted: false,
      oldMessageTime: 0,
      dialogPosition: defaultDialogPosition,
      sendPrescriptionState: false,
      form: {
        text: '',
        file: [{}, {}]
      }
    })

    // 判断当前会话类型：无/系统会话/正常C2C、群聊
    const conversationType = computed(() => {
      const conversation: any = data.conversation
      if (!conversation?.conversationID) {
        return ''
      }
      if (conversation?.type === uni.$TIM.TYPES.CONV_SYSTEM) {
        return 'system'
      }
      return 'chat'
    })

    // 不展示已删除消息
    const messages = computed(() => {
      if (data.messageList.length > 0) {
        data.oldMessageTime = data.messageList[0].time
        return data.messageList.filter((item: any) => {
          return !item.isDeleted
        })
      }
    })
    // 获取页面参数
    onLoad(options => {
      // uni.setNavigationBarTitle({
      //   // title: options && options.conversationName
      //   title: '自定义用户名'
      // })
    })
    onUnload(() => {
      // #ifdef MP-WEIXIN
      //回收 TUICallKit
      uni.$TUICallKit.value !== null && uni.$TUICallKit.value.destroyed()
      // #endif
      TUIServer.destroyed()
    })

    // 监听数据渲染，展示最新一条消息
    watch(messages, (newVal: any, oldVal: any) => {
      // 下拉刷新不滑动 todo 优化
      nextTick(() => {
        const newLastMessage = newVal[newVal.length - 1]
        const oldLastMessage = oldVal ? oldVal[oldVal.length - 1] : {}
        data.oldMessageTime = messages.value[0].time
        handleShowTime()
        if (oldVal && newLastMessage.ID !== oldLastMessage.ID) {
          // handleScrollBottom(); // 非从conversationList 首次进入
        }
      })
    })
    // 监听数据初次渲染，展示最新一条消息
    // TODO app 中获取不到DOM 元素
    onReady(() => {
      const options = {
        sdkAppID: uni.$chat_SDKAppID, // 开通实时音视频服务创建应用后分配的 SDKAppID
        userID: uni.$chat_userID, // 用户 ID，可以由您的帐号系统指定
        userSig: uni.$chat_userSig, // 身份签名，相当于登录密码的作用
        tim: uni.$TUIKit //  tim 参数适用于业务中已存在 TIM 实例，为保证 TIM 实例唯一性
      }
      uni.$TUICallKit = TUICallKit
      nextTick(() => {
        uni.$TUICallKit.value !== null && uni.$TUICallKit.value.init(options)
      })
      setTimeout(() => {
        data.scrollTop = 998
      }, 500)
    })
    onMounted(() => {
      handleShowTime()
      // // 监听回退，已读上报
      uni.addInterceptor('navigateBack', {
        success() {
          // 小程序无效 官网链接：https://uniapp.dcloud.io/api/interceptor.html
          // uni.$TUIKit.TUIConversationServer.setMessageRead(data.conversation.conversationID)
        }
      })
    })
    onNavigationBarButtonTap(() => {
      if (data.conversation?.type === uni.$TIM.TYPES.CONV_GROUP) {
        uni.navigateTo({
          url: '../TUIGroup/index'
        })
      } else {
        uni.showToast({
          title: '暂无信息'
        })
      }
    })
    const handleGetProfile = () => {
      uni.navigateTo({
        url: '../TUIGroup/index'
      })
    }
    const handleShowTime = () => {
      if (messages.value) {
        Array.from(messages.value).forEach(item => {
          if (item.time - data.oldMessageTime > 5 * 60) {
            data.oldMessageTime = item.time
            item.showTime = true
          } else {
            item.showTime = false
          }
        })
      }
    }
    const handleScrollBottom = () => {
      uni
        .createSelectorQuery()
        .select('.TUI-message-list')
        .boundingClientRect(res => {
          const scrollH = res.height?.height
          data.scrollTop = scrollH
        })
        .exec()
    }

    // 需要自实现下拉加载
    const handleScroll = (e: any) => {
      data.triggered = 'restore' // 需要重置
    }

    const handleRefresher = () => {
      data.triggered = true
      if (!data.isCompleted) {
        TUIServer.getHistoryMessageList().then(res => {
          data.triggered = false
          data.isCompleted = res.isCompleted
        })
      }
      setTimeout(() => {
        data.triggered = false
      }, 500)
    }

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

    // 发送消息
    const handleSendTextMessage = (e: any) => {
      if (data.text.trimEnd()) {
        TUIServer.sendTextMessage(JSON.parse(JSON.stringify(data.text)))
      }
      data.text = ' '
    }
    // 右键消息，展示处理功能
    const handleItem = (event: any, item: any) => {
      const { flow } = item
      // const { height, top } = event.target.getBoundingClientRect();
      try {
        const query = uni.createSelectorQuery() // .in(this)
        query
          .select(`#${item.flow + '-' + item.ID}`)
          .boundingClientRect((res: any) => {
            const { top } = res
            // 弹框在下面显示，60--弹框高度；44--导航栏高度；20--弹框离信息间距
            if (top < 60 + 20) {
              data.dialogPosition = {
                ...data.dialogPosition,
                top: res.height?.res + 10 // 在下面展示弹框 + 10px 间隔
              }
              data.dialogPosition = {
                ...data.dialogPosition,
                right: flow === 'out' ? 0 : null, // 发出去的消息（弹框 right 都是 0）
                left: flow === 'in' ? 0 : null // 接收的消息（弹框 left 都是 0）
              }
            } else {
              data.dialogPosition = {
                ...defaultDialogPosition,
                right: flow === 'out' ? 0 : null, // 发出去的消息（弹框 right 都是 0）
                left: flow === 'in' ? 0 : null // 接收的消息（弹框 left 都是 0）
              }
            }
          })
          .exec((res: any) => {
            data.currentMessage = item
            data.dialogID = item.ID
          })
      } catch (error) {
        data.currentMessage = item
        data.dialogID = item.ID
      }
    }

    // 滑动触发时，失焦收起键盘
    const handleTouchStart = () => {
      uni.hideKeyboard()
    }
    // 重新编辑
    const handleEdit = (item: any) => {
      data.text = item.payload.text
    }

    return {
      ...toRefs(data),
      TUICallKit,
      conversationType,
      messages,
      proxy,
      handleShowTime,
      handleTouchStart,
      handleRefresher,
      handleScroll,
      handleScrollBottom,
      handleSendTextMessage,
      handleItem,
      handleEdit,
      handleTextMessageShowContext,
      handleImageMessageShowContext,
      handleVideoMessageShowContext,
      handleAudioMessageShowContext,
      handleFileMessageShowContext,
      handleFaceMessageShowContext,
      handleLocationMessageShowContext,
      handleMergerMessageShowContext,
      handleTipMessageShowContext,
      handleCustomMessageShowContext,
      handleSend,
      caculateTimeago,
      handleGetProfile
    }
  }
})
</script>
<style>
page {
  background: #f4f5f7 !important;
}
</style>
<style lang="scss" scoped>
:deep(.u-textarea) {
  background: #f8f8fa !important;
  margin: 0 auto;
  width: 100%;
  height: 196prx;
  border-radius: 24rpx;
  margin-bottom: 46rpx;
}
.grayinput {
  width: 308rpx;
  box-sizing: border-box;
  padding: 22rpx 20rpx;
  border-radius: 24rpx;
  background: #f8f8fa;
  margin-right: 16rpx;
}
.grayinput1 {
  box-sizing: border-box;
  padding: 22rpx 20rpx;
  border-radius: 24rpx;
  background: #f8f8fa;
  margin-bottom: 18rpx;
}

.addblueBtn {
  width: 100%;
  box-sizing: border-box;
  padding: 26rpx 0;
  border-radius: 90rpx;
  background: #f3ffff;
  font-size: 30rpx;
  font-weight: 700;
  margin-bottom: 54rpx;
}
.imBtn {
  box-sizing: border-box;
  padding: 12rpx 24rpx;
  view {
    box-sizing: border-box;
    padding: 12rpx 20rpx;
    border-radius: 68rpx;
    background: #fff;
    margin-right: 20rpx;
    color: #323233;
    font-size: 26rpx;
    font-weight: 700;
  }
}
.imtopinfo {
  background: #fff;
  box-sizing: border-box;
  padding: 20rpx 24rpx;
  .righttext {
    color: #323233;
    font-size: 26rpx;
    font-weight: 700;
  }
  &-avatar {
    width: 64rpx;
    height: 64rpx;
    margin-right: 16rpx;
    border-radius: 50%;
  }
  .graytext {
    color: #666666;
    font-size: 26rpx;
  }
  &-username {
    color: #323233;
    font-size: 30rpx;
    font-weight: 700;
    margin-right: 16rpx;
  }
}

@import '../styles/TUIChat.scss';
</style>