<template>
  <div class="anwser-window">
    <!-- 文本域 -->
    <div class="scroll show-content">
      <textarea
        v-if="contentType === 'Text'"
        class="scroll show-content-textarea"
        ref="anwserText"
        id="textarea"
        maxlength="1000"
        autofocus
        :value="content"
        @input="setContent"
        @keydown.13.exact="enterSend"
        @keyup.ctrl.enter.exact="lineFeed"
      ></textarea>
      <img v-else-if="contentType === 'Picture'" class="show-content-img" :src="content" alt="图片丢失" />
      <video v-else-if="contentType === 'Video'" class="show-content-video" :src="content" controls></video>
      <audio
        v-if="contentType === 'Voice' && /.mp3$/.test(content)"
        class="show-content-voice"
        :src="content"
        type="audio/mp3"
        controls
      ></audio>
      <span v-if="contentType === 'Voice' && !/.mp3$/.test(content)" class="show-content-file" v-text="content"></span>
      <span
        v-else-if="contentType === 'File'"
        class="show-content-file"
        v-text="$options.filters.getFileName(content)"
      ></span>
    </div>

    <!-- 发送 -->
    <div class="opration-btn">
      <div class="chats-bottom">按ctrl + enter 换行</div>
      <div>
        <!-- <el-button
        icon="el-icon-mic"
        type="plant"

        @mousedown.native="handlerDown"
        @mouseup.native="handlerUp"
      >
        按住说话
      </el-button> -->
        <el-button class type="warning" @click="clearContent">清空</el-button>
        <el-button class type="primary" @click="talkToFriendTask">发送(Enter)</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { TalkToFriendTask } from '@/api/webSocketApi'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapGetters({
      remark: 'conversation/remark',
      content: 'conversation/content',
      contentType: 'conversation/contentType',
      currentFriend: 'conversation/currentFriend'
    }),
    // 群成员id
    membersMap() {
      if (this.currentFriend.Members) {
        return this.currentFriend.Members.map((x) => {
          return x.RemoteId || x.OpRemoteId
        })
      }
      return []
    }
  },
  methods: {
    // 发送消息
    talkToFriendTask() {
      const { WxId, RemoteId } = this.currentFriend
      // 未选择微信不能发送
      if (!WxId || !RemoteId) {
        this.$message.warning('好友数据不对，不能发送消息！')
        return
      }
      //   // 如果手机下线或者未登陆 不能发消息
      //   if (this.currentWechat.isonline === 1) {
      //     this.$message.warning(`${this.currentWechat.name} 不在线，不能给其发消息！`)
      //     return
      //   }

      // 不能发送空的信息
      let cc = this.content.replace(/\s/gi, '')
      if (!cc) {
        this.$message.warning('请设置发送内容！')
        return
      }
      // 如果是发送到群里
      if (this.currentFriend.Members) {
        // 被踢出群了 则不能发消息
        if (this.membersMap.indexOf(WxId) >= 0) {
          TalkToFriendTask(WxId, RemoteId, this.contentType, this.content, '', this.remark)
          this.clearContent()
        } else {
          this.$message.warning('你已被踢出群聊,不能在该群发送消息!')
          return
        }
      } else {
        // 发送消息
        TalkToFriendTask(WxId, RemoteId, this.contentType, this.content, '', this.remark)
        // 清空数据
        this.clearContent()
      }
    },
    // ctrl + enter换行
    lineFeed() {
      let newContent = this.content + '\r\n'
      this.$store.commit('conversation/SET_CONTENT', newContent)
    },
    // enter发送消息
    enterSend(e) {
      e.preventDefault()
      this.talkToFriendTask()
    },
    setContent(e) {
      let newText = this.$refs.anwserText.value
      this.$store.commit('conversation/SET_CONTENT', newText)
    },
    // 清空message
    clearContent() {
      this.$store.commit('conversation/SET_REMARK', '')
      this.$store.commit('conversation/SET_CONTENT', '')
      this.$store.commit('conversation/SET_CONTENT_TYPE', 'Text')
    }
  },
  created() {
    // 节流 几秒只执行一次
    this.talkToFriendTask = this._.throttle(this.talkToFriendTask, 500)
  }
}
</script>


<style lang="scss" scoped>
.anwser-window {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background-color: $bg-color-content-base;
  overflow: hidden;

  .show-content {
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    border-radius: 5px;
    .show-content-textarea {
      flex: auto;
      resize: none;
      line-height: 20px;
      font-size: 16px;
      padding: 5px;
      border: #dcdfe6 solid 1px;
      margin: 2px;
      &:focus {
        outline: none !important;
      }
    }
    .show-content-video {
      max-height: 100%;
      margin: 2px auto 0px;
    }
    .show-content-img {
      object-fit: scale-down;
      margin: 0 auto;
      margin-top: 2px;
    }
    .show-content-voice {
      margin: auto;
    }
    .show-content-file {
      padding: 0 10px;
      width: 100%;
      max-width: 100%;
      line-height: 20px;
      text-align: center;
      align-self: center;
      word-break: break-all;
      //   white-space: pre-wrap;
    }
  }

  .opration-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border-top: solid $border-color-base 2px;

    .chats-bottom {
      margin-left: 10px;
    }

    .el-button {
      width: 100px;
      margin: 3px;
    }
  }
}
</style>



