<template>
  <div class="global-im">
    <!-- 悬浮按钮与角标 -->
    <div class="im-trigger" :class="{ active: visible }" @click="toggleChat">
        <el-icon><el-icon-chat-round /></el-icon>
      <el-badge :value="unreadCount" :hidden="unreadCount === 0" :max="99">
        <i class="el-icon-chat-dot-round" style="font-size: 24px"></i>
      </el-badge>
    </div>

    <!-- IM 聊天窗口 -->
    <el-drawer
      v-model="visible"
      title="消息中心"
      :append-to-body="true"
      :destroy-on-close="false"
    >
      <div class="chat-container">
        <div class="message-list" ref="messageListRef">
          <div
            v-for="msg in messages"
            :key="msg.id"
            class="message-item"
            :class="msg.self ? 'self' : 'other'"
          >
            <div class="avatar">
              <el-avatar :size="32" :src="msg.avatar"></el-avatar>
            </div>
            <div class="content">
              <div class="name">{{ msg.name }}</div>
              <div class="text">{{ msg.text }}</div>
              <div class="time">{{ msg.time }}</div>
            </div>
          </div>
        </div>
        <div class="input-area">
          <el-input
            type="textarea"
            :rows="3"
            v-model="inputMessage"
            placeholder="请输入消息..."
          ></el-input>
          <el-button type="primary" style="margin-top: 10px;" @click="sendMessage">发送</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>

// 注意：Element UI 的图标需要单独引入或使用字体图标
// 如果使用 el-icon，需要安装 @element-plus/icons-vue（但这是 Vue 3 的）
// Vue 2 可以使用字体图标或 SVG 图标，这里用 Element UI 自带的字体图标

export default {
  name: 'GlobalIM',
  components: {
    // Element UI 组件已全局注册的话，这里不需要重复注册
  },
  data() {
    return {
      visible: false,           // 聊天窗口可见性
      unreadCount: 0,          // 未读消息数量
      inputMessage: '',        // 输入的消息
      timer: null,             // 定时器
      messages: [              // 消息列表
        { id: 1, name: '系统助手', avatar: '', text: '欢迎使用 SCUI！', time: '10:00', self: false },
        { id: 2, name: '我', avatar: '', text: '你好，这个全局IM功能不错', time: '10:01', self: true },
      ]
    }
  },
  mounted() {
    this.simulateNewMessage()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    // 模拟新消息（演示角标更新）
    simulateNewMessage() {
      this.timer = setInterval(() => {
        if (!this.visible) { // 仅当聊天窗口关闭时增加未读数
          const newMsg = {
            id: this.messages.length + 1,
            name: '访客',
            avatar: '',
            text: `自动消息 ${new Date().toLocaleTimeString()}`,
            time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
            self: false
          }
          this.messages.push(newMsg)
          this.unreadCount++
        }
      }, 15000) // 每15秒模拟一条新消息
    },

    // 发送消息
    sendMessage() {
      if (!this.inputMessage.trim()) return
      const newMsg = {
        id: this.messages.length + 1,
        name: '我',
        avatar: '',
        text: this.inputMessage,
        time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
        self: true
      }
      this.messages.push(newMsg)
      this.inputMessage = ''
      // 滚动到底部
      this.$nextTick(() => {
        const container = this.$refs.messageListRef
        if (container) container.scrollTop = container.scrollHeight
      })
    },

    // 切换聊天窗口
    toggleChat() {
      this.visible = !this.visible
      if (this.visible) {
        // 打开窗口时清除未读角标
        this.unreadCount = 0
      }
    }
  }
}
</script>

<style scoped lang="scss">
.global-im {
  .im-trigger {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    background: #409eff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
    z-index: 2000;
    transition: all 0.3s;
    color: white;
    &:hover {
      transform: scale(1.05);
      background: #66b1ff;
    }
    &.active {
      background: #909399;
    }
  }
}
.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  .message-list {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    .message-item {
      display: flex;
      margin-bottom: 16px;
      &.self {
        flex-direction: row-reverse;
        .content {
          margin-right: 12px;
          align-items: flex-end;
          .text {
            background: #95ec69;
          }
        }
      }
      &.other {
        .content {
          margin-left: 12px;
        }
      }
      .content {
        display: flex;
        flex-direction: column;
        max-width: 70%;
        .name {
          font-size: 12px;
          color: #999;
          margin-bottom: 4px;
        }
        .text {
          padding: 8px 12px;
          background: #f0f0f0;
          border-radius: 12px;
          word-break: break-all;
        }
        .time {
          font-size: 10px;
          color: #ccc;
          margin-top: 4px;
        }
      }
    }
  }
  .input-area {
    padding: 16px;
    border-top: 1px solid #eee;
  }
}
</style>