<template>
  <div class="chat-container">
    <div class="message-list">
      <div
        v-for="item in messageList"
        :key="item.id"
        class="message-row"
        :style="item.isMe ? `flex-direction: row-reverse;` : ''"
      >
        <div class="avatar">
          {{ item.account[0] }}
        </div>

        <div class="message-item">
          <div class="sender" :style="item.isMe ? `text-align: right;` : ''">
            {{ item.account }}
          </div>
          <div
            class="text"
            :style="item.isMe ? `background-color: #89d961;` : ``"
            v-html="item.msg"
          ></div>
          <div class="time">{{ item.time }}</div>
        </div>
      </div>
    </div>
    <div class="input-bar">
      <!-- <div
        v-if="isHost"
        @click="openRichMessageEditor"
        v-html="editingMessage"
        class="display-message"
        :style="`border-color: ${
          showRichEditor === true ? '#409eff' : '#c0c4cc'
        }`"
      ></div> -->
      <wangEditor
        v-if="isHost"
        class="rich-editor"
        v-model="editingMessage"
        width="100%"
        height="200px"
      ></wangEditor>

      <!-- <el-input v-if="isHost" v-model="editingMessage" class="message-input">
        <template #prepend>
          <el-button :icon="Expand" />
        </template>
      </el-input> -->
      <el-input
        v-else
        v-model="editingMessage"
        class="message-input"
        maxlength="140"
      ></el-input>
      <el-button @click="sendMessage" :disabled="editingMessage.length === 0"
        >发送</el-button
      >
    </div>

    <el-dialog title="富文本输入框" v-model="showRichEditor">
      <wangEditor v-model="richMessage" width="100%" :focus="true"></wangEditor>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="warning" @click="cancelRichMessage">取消</el-button>
          <el-button type="primary" @click="saveRichMessage">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="Chat">
import { ref, toRefs } from "vue";
import { uniqueId } from "lodash";
import dayjs from "dayjs";
import wangEditor from "@/components/wangEditor";
import { Expand } from "@element-plus/icons-vue";
const emit = defineEmits(["send"]);
const props = defineProps({
  isHost: {
    type: Boolean,
    default: false,
  },
  place: {
    type: String,
    default: "right",
  },
  messageList: {
    type: Array,
    required: true,
  },
  account: {
    type: String,
    required: true,
  },
});
const { isHost, messageList, account } = toRefs(props);

/* 聊天功能 */
const editingMessage = ref(""); // 正在编辑的内容
const richMessage = ref(""); // 正在编辑的富文本内容 -- 主持人独有
const showRichEditor = ref(false);
// 保存富文本聊天内容
const saveRichMessage = () => {
  showRichEditor.value = false;
  editingMessage.value = richMessage.value;
  richMessage.value = "";
};
// 取消保存富文本
const cancelRichMessage = () => {
  showRichEditor.value = false;
};
// 打开富文本编辑器窗口
const openRichMessageEditor = () => {
  showRichEditor.value = true;
  richMessage.value = editingMessage.value;
};
// 发送消息
const sendMessage = () => {
  const msgObj = {
    id: uniqueId(),
    account: account.value,
    msg: editingMessage.value,
    isMe: true,
    time: dayjs().format("YYYY-MM-DD HH:mm:ss"),
  };
  emit("send", msgObj);
  editingMessage.value = "";
};
</script>
<style lang="scss" scoped>
.chat-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  .message-list {
    background-color: #f5f5f5;
    padding: 20px;
    // min-height: 100px;
    height: 100%;
    // margin-bottom: 10px;
    border-radius: 12px;

    .message-row {
      display: flex;
      margin-bottom: 10px;
      align-items: center;
      .avatar {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
        background-color: #bcbcbc;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        font-weight: 700;
        font-size: 24px;
      }
      .message-item {
        margin: 0 16px 0;
        .sender {
          font-size: 12px;
          color: #333;
        }
        .text {
          margin: 3px 0 3px;
          padding: 10px;
          background-color: #fff;
          border-radius: 10px;
          font-size: 16px;
          word-wrap: break-word;
          word-break: break-all;
          :deep(p) {
            margin: 0;
          }
        }
        .time {
          font-size: 12px;
          text-align: right;
          color: #333;
        }
      }
    }
  }
  .input-bar {
    display: flex;
    margin: 5px;
    align-items: center;
    .message-input {
      margin-right: 5px;
    }
    .display-message {
      box-sizing: border-box;
      display: flex;
      width: 100%;
      align-items: center;
      padding: 0 11px;
      font-size: 14px;
      color: #606266;
      border: 1px solid;
      // width: 80%;
      min-height: 32px;
      border-radius: 5px;
      margin-right: 5px;
      word-wrap: break-word;
      :deep(p) {
        margin: 0;
      }
    }
  }
}
</style>
