<template>
  <div class="main">
    <div class="header">{{props.userName}}</div>
    <div class="chat-box">
      <el-scrollbar ref="srcrollbarRef">
        <div ref="innerRef">
            <Message class="slip_in_animation" v-for="item, index in variable.messageList" :key="index" :message="item"/>
        </div>
      </el-scrollbar>
      <el-input class="input" v-model="variable.text" :rows="1" type="textarea" placeholder="" autosize/>
      <el-button @click="semd_msg" type="success" round>Send</el-button>
      <el-button @click="showSendComponent" class="red-envelope" type="danger" round>红包</el-button>
    </div>
    <SendRedEnvelopeComponent class="second"  @changeShow="changeShow" v-if="variable.show" :user-name="props.userName" :topic-id="props.topicId"/>
  </div>
</template>

<script lang="ts" setup>
import { nextTick, ref, reactive } from 'vue'
import Message from './Message.vue'
import SendRedEnvelopeComponent from './SendRedEnvelopeComponent.vue';
import { ElButton, ElInput, ElMessage, ElScrollbar } from 'element-plus';
import SocketConnect from '@/utils/socket'
const variable = reactive({
  text: "",
  messageList: new Array(),
  show: false
})
const srcrollbarRef = ref<InstanceType<typeof ElScrollbar>>()
const innerRef = ref<HTMLDivElement>()
const props = defineProps({userName: String, topicId: String})
const socket = new SocketConnect()
const changeShow = (value: boolean) => {
  variable.show = value
}
function showSendComponent() {
  variable.show = !variable.show;
}
function semd_msg() {
  if (variable.text == ""){
    ElMessage({message: '消息不能为空', type: 'error'})
    return 
  }
  socket.socket.emit('send_msg', {"message": variable.text, "messageType": 1, "topicId": props.topicId, "userName": props.userName});
  variable.text = '';
  nextTick(() => {
    setTimeout(() => {
      srcrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
    }, 300);
})
}
nextTick(() => {
  socket.socket.emit('create_or_connect_channel', {"topicId": props.topicId});
  socket.socket.emit('get_message', {"topicId": props.topicId});
  socket.socket.on("rev_msg", (res: any) => {
    var res = res
    console.log(res)
    if (res.messageType == 0) {
      return 
    }
    if (res.userName == props.userName){
      res.messageFrom = 1
      
    }
    else if (res.userName == null) {
      res.messageFrom = 2
    }
    else{
      res.messageFrom = 0
    }
    res.topicId = props.topicId
    res.mainUserName = props.userName
    variable.messageList.push(res)
    srcrollbarRef.value!.setScrollTop(innerRef.value!.clientHeight)
})

})
</script>

<style scoped>
  .second {
    display: flex;
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #909590;
  }
  .main {
    display: flex;
    flex-direction: column;
    box-shadow: var(--el-box-shadow-light);
    width: 80%;
    height: 90%;
    margin: auto;
  }
  .header {
    display: flex;
    height: 10%;
    background-color: #9ae19d;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-shadow: 0 0 black;
    text-transform: capitalize;
  }
  .input {
    width: 74%;
  }
  .chat-box {
    width: 100%;
    height: 80%;
    flex: auto;
    background-color: rgb(212, 212, 212);
  }
  .el-button+.el-button {
    margin-left: 0px
  }

  .slip_in_animation {
    animation: slip_in 0.5s;
  }

  @keyframes slip_in {
    from{transform: translateY(20%);}
    to{transform: translateY(0%);}
  }
</style>