<template>
  <!-- 聊天内容 -->
  <scroll-view
    @tap="closeEmoji"
    scroll-y
    :style="{height: isShowEmoji ? 'calc(100vh - 510rpx)' : 'calc(100vh - 110rpx)'}" 
    scroll-with-animation
    :scroll-into-view="scrollToView"
  >
    <chat-item
      v-if="isItem"
      :id="'msg' + index"
      v-for="(item, index) in chatData"
      :item="item"
      :key="index"
    />
  </scroll-view>

  <!-- 输入框 -->
  <view class="chat-input-bar">
    <!-- 相册 -->
    <view class="xc-icon" @tap="selectImg">
      <jx-icon icon="xiangce" :size="55" color="#888888" />
    </view>

    <!-- 输入框 style="width:410rpx"  可读-->
    <view class="chat-input-root" @tap="closeReadOnly">
      <editor id="editor"
        class="ql-container" 
        :read-only="readOnly"
        :placeholder="'请输入内容...'" 
        @ready="onEditorReady"
        @input="onInput"
        @blur="onBlur"
        @focus="onFocus">
      </editor>
    </view>

    <!-- emoji -->
    <view class="chat-emoji-border" @touchend.prevent="openEmoji">
      <image class="chat-emoji" src="https://image.jxc4.com/image/0465edd3e027eab221c3d37ee7a063f9.png" alt=""></image>
    </view>

    <!-- 发送 -->
    <view class="chat-input-send" @tap="sendMessage">
      <text class="chat-input-send-text">发送</text>
    </view>
  </view>
   
  <!-- emoji表情 -->
  <view class="emoji-select" :style="{
    height: isShowEmoji ? '400rpx' : '0rpx'
  }">
    <view v-for="(item, index) in emojiArr" :key="index" class="emoji-border" @touchend.prevent="selectEmoji(item)">
      <view :class="'emoji-' + item.symbol" class="emoji-display"> </view>
    </view>
  </view>
  
</template>

<script lang="ts" setup >
import msgChatFn from './msgChat'
import chatItem from './msgChatChild/chat-item.vue'
import { emojiArr } from '@/utils/emoji'
const {
  scrollToView,     // 滚动到底部
  chatData,         // 聊天信息
  isItem,           // 聊天界面的数据是否请求完毕
  isShowEmoji,      // emoji是否发生偏移
  onEditorReady,    // 编辑器初始化
  onInput,          // 编辑器的内容(实时)
  onBlur,           // 编辑器失去焦点
  onFocus,          // 编辑器聚焦时
  selectImg,        // 选择图片
  openEmoji,        // 打开emoji
  closeEmoji,       // 关闭emoji
  selectEmoji,      // 选择emoji,
  sendMessage,      // 发送消息
  readOnly,         // 是否为只读
  closeReadOnly     // 关闭editor的只读属性
} = msgChatFn()
</script>

<style lang="scss" scoped>
@import './msgChatChild/index.scss';
.ql-container{
  // width:416rpx;
  width:calc(100vw - 340rpx);
  height: 50rpx;
  min-height: 50rpx;
  caret-color:#05c160;
  display:flex;
  align-items: center;
}
</style>

<style>
page {
  background-color: #f0f0f0;
}
</style>