<template>
  <u-sticky>
    <u-navbar :title="navbarTitle" :autoBack="true" bgColor="#fff" placeholder safeAreaInsetTop :titleStyle="{ color: '#000' }" leftIconColor="#000"></u-navbar>
    <view class="imtopinfo">
      <view class="flexJ">
        <view class="flexA">
          <image :src="![null, undefined, ''].includes(detailData?.doctor?.avatar) ? proxy.$h.downFile(detailData?.doctor?.avatar) : '/static/images/mAvatar.png'" class="imtopinfo-avatar" mode="aspectFill" />
          <view class="imtopinfo-username">{{ detailData?.doctor?.nickname }}</view>
          <template v-if="history === 'err'">
            <u-count-down :time="countdownTime * 1000" format="HH:mm:ss" @finish="finishCountDownHandler"></u-count-down>
            <view class="graytext">后结束问诊</view>
          </template>
        </view>
        <!-- <view class="righttext">已结束</view> -->
        <up-button v-if="history === 'err'" type="info" shape="circle" text="结束问诊" throttleTime="1500" @click="getEndInformationHandler" :customStyle="{ width: '146rpx', height: '66rpx', marginRight: '0rpx' }"></up-button>
      </view>
      <view class="infocard" style="padding: 0; width: 100%">
        <view class="flexJ">
          <view>
            <view class="flexA" style="margin-bottom: 20rpx">
              <view class="infocard-username">问诊信息</view>
              <view class="blueTag1">{{ proxy.$h.optObjectValue('consultationWay', detailData.consultationWay) || '未设置' }}</view>
            </view>
            <view class="infocard-infoitem Zindex">
              <text class="gray">宠物信息：</text>
              {{ detailData?.petName }}/{{ detailData?.petClass || '品种未知' }}/{{ detailData?.age || '年龄未知' }}/ {{ proxy.$h.optObjectValue('petSex', detailData?.petSex) || '性别未知' }}
            </view>
          </view>
          <up-button color="#05B8D2" shape="circle" text="查看详情" throttleTime="1500" plain @click="showUserCardDetailState = true" :customStyle="{ width: '146rpx', height: '66rpx', marginRight: '0rpx' }"></up-button>
        </view>
      </view>
    </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="more-btn" style="margin-top: 180rpx" @click="handleGetProfile">更多</view> -->
    <view class="TUIChat-container">
      <scroll-view class="TUIChat-main" scroll-y="true" :refresher-triggered="triggered" :refresher-enabled="true" @refresherrefresh="handleRefresher" :scroll-top="scrollTop">
        <view class="TUI-message-list" @touchstart="handleTouchStart" @click="dialogID = ''">
          <!-- 用户信息卡片 -->
          <!-- <UserInfoCard :detailData="detailData" /> -->
          <view style="height: 390rpx"></view>
          <template v-if="history === 'err'">
            <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)" />
              </MessageBubble>
              <MessageRevoked v-if="item.isRevoked" :data="item" @edit="handleEdit(item)" />
            </view>
          </template>
          <template v-else>
            <view v-for="(item, index) in historyList" :key="item.ID" :id="'view' + item.ID">
              <MessageBubble :data="item">
                <MessageText :id="item.flow + '-' + item.ID" v-if="item.chatType === 1" :data="item" :messageData="item" @longpress="handleItem($event, item)"></MessageText>
                <MessageImage :id="item.flow + '-' + item.ID" v-if="item.chatType === 2" :data="item.payload" :messageData="item" @longpress="handleItem($event, item)"></MessageImage>
                <MessageVideo :id="item.flow + '-' + item.ID" v-if="item.chatType === 3" :data="item" :messageData="item" @longpress="handleItem($event, item)" />
              </MessageBubble>
              <MessageRevoked v-if="item.isRevoked" :data="item" @edit="handleEdit(item)" />
            </view>
          </template>

          <!-- 对话结束显示 -->
          <ConversationEnd v-if="history === 'success'" />
        </view>
      </scroll-view>
    </view>
    <template v-if="history === 'err'">
      <view class="flexA imBtn">
        <view @click="sendPrescriptionState = true" v-if="[null, undefined, ''].includes(detailData?.drugId)">发送处方单</view>
        <view @click="showPrescriptionDetailState = true">查看处方单</view>
      </view>
      <TUIChatInput :text="text" :conversationData="conversation" :detailData="detailData" @scrollbottomHandler="scrollbottomHandler" @sendMessagehandler="handleSendTextMessage"></TUIChatInput>
    </template>
  </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">
    <SendPrescription
      :orderId="Event.orderId"
      :detailData="detailData"
      @closeSendPrescriptionHandler="
        () => {
          sendPrescriptionState = false
          getDetailHandler()
        }
      "
      :isSend="true"
    />
  </u-popup>
  <!-- <u-modal :show="showPrescriptionDetailState" :title="`处方单详情`" @confirm="showPrescriptionDetailState = false">
    <ViewPrescription :orderId="Event.orderId" @click="showPrescriptionDetailState = false" />
  </u-modal> -->
  <u-modal :show="showUserCardDetailState" :title="``" :showConfirmButton="false" closeOnClickOverlay @close="showUserCardDetailState = false">
    <view class="slot-content" @click="showUserCardDetailState = false">
      <view class="text mb24">问诊类型：{{ proxy.$h.optObjectValue('consultationWay', detailData.consultationWay) || '未设置' }}</view>
      <view class="text mb24">宠物品种：{{ detailData?.petClass }}</view>
      <view class="text mb24">年龄：{{ detailData?.age }}</view>
      <view class="text mb24">性别：{{ proxy.$h.optObjectValue('petSex', detailData?.petSex) || '性别未知' }}</view>
      <view class="text mb24">是否绝育：{{ proxy.$h.optObjectValue('isSterilization', detailData?.isSterilization) || '未知' }}</view>
      <view class="text mb24">体重：{{ detailData?.weight ? detailData?.weight + 'kg' : '体重未知' }}</view>
      <view class="text mb24">免疫情况：{{ proxy.$h.optObjectValue('immuneStatus', detailData?.immuneStatus, 4) }}</view>
      <view class="text mb24">洗澡频率：{{ proxy.$h.optObjectValue('batheFrequency', detailData?.batheFrequency, 2) }}</view>
      <view class="text mb24">饲料类型：{{ proxy.$h.optObjectValue('feedType', detailData?.feedType, 1) }}</view>
      <view class="text mb24">
        症状类型：
        <template v-if="![null, '', undefined].includes(detailData?.symptom)">
          <template v-for="(_, index) in detailData?.symptom.split(',')">{{ proxy.$h.optObjectValue('symptom', _) || '' }}{{ index !== (detailData?.symptom.split(',').length as number) - 1 ? '，' : '' }}</template>
        </template>
      </view>
      <view class="text mb24">症状描述： {{ detailData.supplement }}</view>
      <view class="text mb24">
        症状照片：
        <view class="flexW" v-if="detailData?.image?.length">
          <image v-for="_ in detailData.image?.split(',')" :src="proxy.$h.downFile(_)" class="infocard-itemimg" mode="aspectFill" @click.stop="proxy.$h.previewImage(proxy.$h.downFile(_))" />
        </view>
      </view>
    </view>
  </u-modal>
  <u-popup :show="showPrescriptionDetailState" @close="showPrescriptionDetailState = false" mode="bottom" closeIconPos="top-right" closeable round="20">
    <Prescription :showTopState="false" :PrescriptionDetail="PrescriptionDetail" bg="linear-gradient(188deg, #E0FFF4 5.54%, #FFF 24.89%)" :title="`${detailData?.user?.nickname}的处方单`" :isRenew="'err'" :showStep="`err`" />
  </u-popup>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, computed, nextTick, watch, onMounted, shallowRef, getCurrentInstance, ComponentPublicInstance, ref, onUnmounted, onBeforeUnmount } from 'vue'
import { onReady, onLoad, onNavigationBarButtonTap, onUnload } from '@dcloudio/uni-app'
import { getConsultation_information_detail, getEndInformation, getReceive_diagnosis, getOrder_chat, getPrescription_detail_information } from '@/api'
// 消息元素组件
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 ConversationEnd from '@/components/ConversationEnd'
import SendPrescription from '@/components/SendPrescription'
import ViewPrescription from '@/components/ViewPrescription'
import Prescription from '@/pages2/order/com/Prescription.vue'
import store from '../../TUICore/store'
import type { DiaLogEventType, Consultation_information_detailType, PrescriptionDetailType } from '../../../types'
import { emojiMap } from '../../utils/emojiMap'
import {
  handleTextMessageShowContext,
  handleImageMessageShowContext,
  handleVideoMessageShowContext,
  handleAudioMessageShowContext,
  handleFileMessageShowContext,
  handleFaceMessageShowContext,
  handleLocationMessageShowContext,
  handleMergerMessageShowContext,
  handleTipMessageShowContext,
  handleCustomMessageShowContext
} from '../../utils/untis'

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

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

  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,
      showPrescriptionDetailState: false,
      Event: {} as DiaLogEventType,
      detailData: {} as Consultation_information_detailType,
      countdownTime: 300,
      end: false,
      showUserCardDetailState: false,
      history: 'err',
      page: {
        pageNo: 1,
        pageSize: 15
      },
      imUserId: '',
      historyList: [] as any,
      navbarTitle: '',
      PrescriptionDetail: {}
    })

    // 判断当前会话类型：无/系统会话/正常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(async (options: DiaLogEventType) => {
      data.history = uni.getStorageSync('history')
      data.imUserId = uni.getStorageSync('ImUserId')
      data.Event = options
      getDetailHandler()

      data.navbarTitle = { err: '问诊中', success: '问诊记录' }[data.history] as string

      setTimeout(() => {
        data.scrollTop = 10000
      }, 1300)

      // uni.setNavigationBarTitle({
      //   // title: options && options.conversationName
      //   title: '自定义用户名'
      // })
    })

    onBeforeUnmount(() => {
      uni.$TUIKit.logout()
    })
    onUnmounted(() => {})
    onUnload(() => {
      clearInterval(stateInterval)
      // uni.$TUIKit.TUIConversationServer.destroyed()
      // #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 scrollbottomHandler = () => {
      setTimeout(() => {
        data.scrollTop = Number(String(new Date().getTime()).slice(-5))
      }, 500)
    }

    const imageFormatMap = new Map([
      ['jpg', 1],
      ['gif', 2],
      ['png', 3],
      ['bmp', 4]
    ])

    const stateInterval = setInterval(async () => {
      if (data.history === 'err') {
        const { result }: { result: Consultation_information_detailType } = await getConsultation_information_detail({ id: data.Event.orderId })

        if (result?.orderState !== 30) proxy.$h.timeCallBack('对方已结束问诊即将返回', 2000)
      }
    }, 5000)

    const getDetailHandler = async () => {
      const { result: timeData }: { result: { countdownTime: number } } = await getReceive_diagnosis({ id: data.Event.orderId })

      data.countdownTime = timeData.countdownTime

      const { result }: { result: Consultation_information_detailType } = await getConsultation_information_detail({ id: data.Event.orderId })

      data.detailData = result

      const { result: Pdetail }: { result: PrescriptionDetailType } = await getPrescription_detail_information({ id: data.Event.orderId })

      data.PrescriptionDetail = Pdetail

      if (data.history === 'success') getOrder_chatHandler(true)
    }

    const getOrder_chatHandler = async (refresh: boolean) => {
      refresh ? ((data.page.pageNo = 1), data.historyList.splice(0)) : data.page.pageNo++

      const { result } = await getOrder_chat({ ...data.page, id: data.detailData.userId })

      const regex = /(\[[^\[\]]+\])|([^\[\]]+)/g
      result.records = result.records
        .map(item => ({
          ...item,
          imContent: JSON.parse(item.imContent)
        }))
        .map(item => {
          let msgContent = item.imContent?.msgBody?.[0]?.msgContent
          const text = msgContent?.text?.match(regex).map(item => ({
            text: item,
            name: /^\[.+?\]$/.test(item) ? '' : 'text',
            src: `https://web.sdk.qcloud.com/im/assets/emoji/${emojiMap[item]}`
          }))
          let url = ''
          let snapshotUrl = ''
          let src = ''
          let imageFormat: string | number = ''
          let flow = ''
          {
            if (item.chatType == 1) {
              flow = item.imContent.from_Account == data.imUserId ? 'out' : 'in'
            } else if (item.chatType == 2) {
              url = msgContent?.imageInfoArray?.[0]?.uRL
              const match = url.match(/\.(\w+)(\?.*)?$/)
              imageFormat = match ? imageFormatMap.get(match[1])! : ''
            } else if (item.chatType == 3) {
              url = msgContent?.videoUrl
              snapshotUrl = msgContent?.thumbUrl
            }
          }
          return {
            ...item,
            flow,
            url,
            text,
            snapshotUrl,
            src,
            payload: {
              info: msgContent?.imageInfoArray?.map(item => ({
                ...item,
                url: item.uRL
              })),
              imageFormat
            },
            ID: item.id
          }
        })

      if (result.records.length) {
        result.records.map((_: any) => data.historyList.unshift(_))
        return
      }
      uni.$u.toast('没有更多数据了')
    }

    const finishCountDownHandler = async () => {
      await getEndInformation({ id: data.Event.orderId })

      data.end = true

      proxy.$h.timeCallBack('问诊结束~')
    }

    const getEndInformationHandler = async () => {
      uni.showModal({
        title: '提示',
        content: '您确定要结束问诊吗',
        success: async function (res: any) {
          if (res.confirm) {
            try {
              await getEndInformation({ id: data.Event.orderId })
              proxy.$h.backUrl(1)
            } catch (error) {
              proxy.$h.backUrl(1)
              uni.$u.toast(error)
            }
          }
        }
      })
    }

    const computedTotalHandler = () => {
      data.form.prescriptionAmount = data.form.drugList.reduce((accumulator, item) => {
        // 将amount和num转换为数字，如果为空则转换为0
        const amount = item.amount ? item.amount : 0
        const num = item.num ? item.num : 0

        // 只有当amount和num都不为空时才加入计算
        if (amount !== 0 && num !== 0) {
          accumulator += amount * num
        }

        return accumulator
      }, 0)
    }

    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.history === 'err') {
        if (!data.isCompleted) {
          TUIServer.getHistoryMessageList().then(res => {
            data.triggered = false
            data.isCompleted = res.isCompleted
          })
        }
      } else if (data.history === 'success') {
        getOrder_chatHandler(false)
      }
      setTimeout(() => {
        data.triggered = false
      }, 500)
    }

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

    // 发送消息
    const handleSendTextMessage = (e: any) => {
      if (e.trimEnd()) {
        TUIServer.sendTextMessage(JSON.parse(JSON.stringify(e)))
      }
      // 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,
      getDetailHandler,
      getEndInformationHandler,
      computedTotalHandler,
      finishCountDownHandler,
      getOrder_chatHandler,
      scrollbottomHandler
    }
  }
})
</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;
}
@import '../styles/TUIChat.scss';

.mb24 {
  margin-bottom: 24rpx;
}
.text {
  color: #323233;
  font-size: 28rpx;
  font-weight: 700;
}
.blacktext {
  color: #323233;
  font-size: 30rpx;
  font-weight: 700;
}
.graytext {
  color: #999999;
  font-size: 24rpx;
  font-weight: 700;
}
.list {
  width: 460rpx;
  box-sizing: border-box;
  padding: 34rpx 28rpx;
  background: #f8f8fa;
  margin-bottom: 32rpx;
}
.zmimg {
  width: 210rpx;
  height: 210rpx;
  border-radius: 24rpx;
  margin-right: 16rpx;
}
</style>