<template>
  <div class="floating-chat-container">
    <!-- 悬浮按钮 -->
    <div class="floating-button" @click="toggleChat" v-show="!isOpen || isMobile">
      <img src="@/assets/icons/ai.png" v-if="!isOpen" alt="聊天" />
      <img src="@/assets/icons/chat_off.png" v-else alt="关闭聊天" />
    </div>
    
    <!-- 悬浮聊天窗口 -->
    <div class="floating-chat-window" v-show="isOpen" :class="{ 'mobile-view': isMobile }" :style="chatWindowStyle">
      <div class="chat-header">
        <div class="header-title"
             @mousedown="onDragStart"
             @touchstart="onDragStart">
          <!-- <i class="el-icon-s-opportunity"></i> -->
          <img src="@/assets/icons/ai.png" alt="Custom Icon" class="custom-icon">
          <span style="padding-left: 5px;">AI 智能助手</span>
        </div>
        <div class="header-actions">
          <i class="el-icon-minus" @click="minimizeChat" v-if="!isMobile"></i>
          <i class="el-icon-close" @click="closeChat"></i>
        </div>
      </div>
      <div class="chat-body">
        <ai-chat ref="aiChat" :is-floating="true"></ai-chat>
      </div>
    </div>
  </div>
</template>

<script>
import AiChat from "@/views/ai-chat/index.vue";

export default {
  name: "FloatingChat",
  components: {
    AiChat
  },
  data() {
    return {
      isOpen: false,
      isMobile: false,
      position: {
        x: 20, // 初始右侧距离
        y: 20  // 初始底部距离
      },
      isDragging: false,
      dragOffset: {
        x: 0,
        y: 0
      }
    };
  },
  computed: {
    chatWindowStyle() {
      if (this.isMobile) return {};
      
      return {
        right: this.position.x + 'px',
        bottom: this.position.y + 'px'
      };
    }
  },
  mounted() {
    this.checkMobile();
    window.addEventListener('resize', this.checkMobile);
    
    // 添加全局事件监听器用于拖拽
    document.addEventListener('mousemove', this.onMouseMove);
    document.addEventListener('mouseup', this.onMouseUp);
    document.addEventListener('touchmove', this.onTouchMove);
    document.addEventListener('touchend', this.onTouchEnd);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkMobile);
    
    // 移除全局事件监听器
    document.removeEventListener('mousemove', this.onMouseMove);
    document.removeEventListener('mouseup', this.onMouseUp);
    document.removeEventListener('touchmove', this.onTouchMove);
    document.removeEventListener('touchend', this.onTouchEnd);
  },
  methods: {
    toggleChat() {
      this.isOpen = !this.isOpen;
    },
    closeChat() {
      this.isOpen = false;
    },
    minimizeChat() {
      this.isOpen = false;
    },
    checkMobile() {
      this.isMobile = window.innerWidth < 768;
    },
    
    // 开始拖拽
    onDragStart(event) {
      if (this.isMobile) return;
      
      this.isDragging = true;
      
      // 计算鼠标位置与窗口边缘的偏移
      const header = event.target.closest('.chat-header');
      const rect = header.getBoundingClientRect();
      
      if (event.type === 'mousedown') {
        this.dragOffset.x = event.clientX - rect.left;
        this.dragOffset.y = event.clientY - rect.top;
      } else if (event.type === 'touchstart') {
        const touch = event.touches[0];
        this.dragOffset.x = touch.clientX - rect.left;
        this.dragOffset.y = touch.clientY - rect.top;
      }
      
      event.preventDefault();
    },
    
    // 处理鼠标移动
    onMouseMove(event) {
      if (!this.isDragging) return;
      
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      const chatWindow = this.$el.querySelector('.floating-chat-window');
      const chatWidth = chatWindow.offsetWidth;
      const chatHeight = chatWindow.offsetHeight;
      
      // 计算新的窗口位置
      const right = windowWidth - (event.clientX - this.dragOffset.x + chatWidth);
      const bottom = windowHeight - (event.clientY - this.dragOffset.y + chatHeight);
      
      // 限制窗口不超出屏幕边界
      this.position.x = Math.max(0, Math.min(right, windowWidth - 50));
      this.position.y = Math.max(0, Math.min(bottom, windowHeight - 50));
    },
    
    // 处理触摸移动
    onTouchMove(event) {
      if (!this.isDragging) return;
      
      const touch = event.touches[0];
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;
      const chatWindow = this.$el.querySelector('.floating-chat-window');
      const chatWidth = chatWindow.offsetWidth;
      const chatHeight = chatWindow.offsetHeight;
      
      // 计算新的窗口位置
      const right = windowWidth - (touch.clientX - this.dragOffset.x + chatWidth);
      const bottom = windowHeight - (touch.clientY - this.dragOffset.y + chatHeight);
      
      // 限制窗口不超出屏幕边界
      this.position.x = Math.max(0, Math.min(right, windowWidth - 50));
      this.position.y = Math.max(0, Math.min(bottom, windowHeight - 50));
      
      event.preventDefault();
    },
    
    // 结束拖拽
    onMouseUp() {
      this.isDragging = false;
    },
    
    onTouchEnd() {
      this.isDragging = false;
    }
  }
};
</script>

<style scoped>
.floating-chat-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.floating-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #67c23a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 10000;
}

.floating-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.floating-button img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.floating-chat-window {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 380px;
  height: 500px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideIn 0.3s ease;
}

.floating-chat-window.mobile-view {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0;
}

@keyframes slideIn {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.chat-header {
  height: 50px;
  background-image: linear-gradient(to right, #67c23a, #4caf50);
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

.header-title {
  display: flex;
  align-items: center;
  font-weight: bold;
  flex: 1;
  cursor: move;
}

.header-title i {
  margin-right: 8px;
  font-size: 18px;
}

.header-actions {
  display: flex;
  align-items: center;
}

.header-actions i {
  margin-left: 15px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s ease;
}

.header-actions i:hover {
  transform: scale(1.1);
}

.chat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.custom-icon {
  width: 34px; /* 设置图标宽度 */
  height: 34px; /* 设置图标高度 */
  vertical-align: middle; /* 垂直对齐 */
}
</style> 