<template>
    <div>
        <chat-at
              ref="chatAt"
              v-if="atShow"
              @atperson="atPerson"
              :curInd="atInd"
              :filterList="filterMembers">
            </chat-at>
            <div class="input-con">
              <div class="more-icon" @click.stop="handleMoreClick"></div>
              <form class="input-wrap" @submit="handleSend">
                <textarea
                  @keydown.up="handleUp"
                  @keydown.down="handleDown"
                  @keydown.left="handleLeft"
                  @keydown.right="handleRight"
                  @keydown.delete="handleDel"
                  @keydown.esc="handleEsc"
                  cols="1"
                  ref="chatInput"
                  rows="1"
                  @keydown.enter="handleKeyDown"
                  placeholder="Write a message"
                  v-model="inputMsg"
                  @focus="handleFocus"
                  @blur="handleBlur"
                  :style="{height:inputHeight}"
                />
              </form>
              <div class="emoji-icon" @click.stop="handleEmojiClick"></div>
              <div class="btn-send" @click="handleSend">{{$t('chat.send')}}</div>
            </div>

            <toolbar ref="toolbar" :toolShow="toolShow" @handleFile="handleFile"></toolbar>

            <emoji-list @addEmoji="addEmoji" :emojiShow="emojiShow" v-show="emojiShow" @closeEmojiList="closeEmojiList"></emoji-list>
    </div>
</template>
