<template>
  <!-- 主区域 start  -->
  <div id="PageRtcLive">
    <chat v-show="true" :chatList="chatList"></chat>

    <!-- 控制条 start -->
    <div class="controlBar" v-if="!showInput">
      <div class="saySomething" @click="onFocus">
        <!-- <i class="speakIcon"
           :class="{'dis':!user_info.IsWords}"></i> -->
        <span>说点什么~</span>
        <!-- <span>已被禁言</span> -->

        <div class="disSpeakBtn"></div>
      </div>
      <!-- <div style="text-align: right; width: 100%">连接中...</div> -->
      <div class="control_btn">
        <div class="brushesBack"></div>
        <div class="brushes"></div>

        <div class="invitation"></div>
        <div v-if="isNativeLeader" class="members" @click="openMember"></div>
        <template>
          <div class="mic_on"></div>
          <div class="mic_no"></div>
          leader
        </template>

        <!-- <div style="font-size: 0.65rem">
          <Icon type="scene" />
        </div> -->
        <div class="exit"></div>
      </div>
    </div>
    <!-- 控制条 start -->
    <!-- 主区域 end  -->
    <!-- 输入框 start-->
    <div class="layer" v-if="showInput" @click.stop="closeText">
      <div class="inputBox" @click.stop>
        <div class="msgBox">
          <input
            id="input_msg"
            type="text"
            maxlength="50"
            v-model.trim="text"
            :placeholder="`说点什么~`"
          />
          <span
            class="iconsend_icon"
            :class="{ disable: text == '' }"
            @click.stop="sendText"
            >发送</span
          >
        </div>
      </div>
    </div>
    <!-- 输入框 end-->
  </div>
</template>

<script lang="ts" setup>
import { computed, nextTick, onMounted, ref } from "vue";
import { getApp } from "/@/hooks/userApp";
import { initSocketEvent } from "./roomControl";
import { createSocket } from "/@/hooks/userSocket";
import browser from "/@/utils/browser";
import { useRtcStore } from "/@/store/modules/rtc";
import type { SocketParams, RoleType } from "/@/store/modules/rtc";
import chat from "./chat.vue";
import consola from "consola";

const rtcStore = useRtcStore();
const isNativeLeader = computed(() => rtcStore.role == "leader");
const showInput = ref(false);
const text = ref<string>("");
const chatList = computed(() => rtcStore.chatList);
const userInfo = computed(() => rtcStore.chatList);
//设置socket 参数
const initParams: SocketParams = {
  userId:
    browser.getURLParam("vruserId") ||
    `user_${browser.getURLParam("role")}${Math.floor(
      Math.random() * 100000000
    )}`,
  roomId:
    browser.getURLParam("roomId") ||
    `room_${Math.floor(Math.random() * 100000000)}`,
  role: (browser.getURLParam("role") as RoleType) || "leader",
  avatar: browser.getURLParam("avatar"),
  nickname: browser.getURLParam("name"),
  mode: browser.getURLParam("mode"),
};
consola.info({
  message: initParams,
  tag: "socket参数",
});
rtcStore.setSocketParams(initParams);

const socket = createSocket();
initSocketEvent(socket);

onMounted(() => {
  const app = getApp();
});

/* method */
function closeText(): void {
  showInput.value = false;
  text.value = "";
}

function sendText(): void {
  if (text.value == "") {
    return;
  }
  let data = {
    role: rtcStore.role,
    mode: rtcStore.mode,
    Nickname: rtcStore.nickname,
    UserId: rtcStore.userId,
    text: text.value,
  };
  consola.info({
    message: data,
    tag: "发送信息",
  });
  socket.emit("action", {
    type: "danmumsg",
    data,
  });
  rtcStore.addToChatList(data);
  document.getElementById("input_msg")?.blur();
  closeText();
}
function onFocus(): void {
  showInput.value = true;
  nextTick(() => {
    document.getElementById("input_msg")?.focus();
  });
}
function openMember(): void {}
</script>

<style scoped lang="scss">
@import "./chatroom.scss";
</style>
