<template>
  <div class="chat-icon" @click="toggleChat">
    <i class="el-icon-chat-dot-round animate-pulse"></i>
    <div v-show="$store.state.app.showChat" class="chat-window" :style="chatWindowStyle" ref="chatWindow" @click.stop>
      <div class="chat-header">
        <div class="resize-handle" @mousedown="startResize">
          <i class="el-icon-d-caret"></i>
        </div>
        <i class="el-icon-minus close-icon" @click.stop="closeChat"></i>
      </div>
      <ChatBox  ref="chatBox"/>
    </div>
  </div>
</template>

<script>
import ChatBox from "@/components/ai.vue";
import LoginModal from "@/components/LoginModal";
import MarkdownIt from "markdown-it";
import { pcInnerAi, getMinioURl } from "@/api/api";
import { modelList, get_default } from "@/api/knowledge";
import axios from "axios";
const md = new MarkdownIt();
export default {
  components: {
   
    ChatBox,
  },
  name: "ChatIcon",
  data() {
    return {
      showChat: false,
      chatWidth: 500,
      chatHeight: 735,
      isResizing: false,
      startX: 0,
      startY: 0,
      startWidth: 0,
      startHeight: 0,
    };
  },
  computed: {
    chatWindowStyle() {
      return {
        width: `${this.chatWidth}px`,
        height: `${this.chatHeight}px`,
      };
    },
    messagesHeight() {
      // 减去其他元素的高度（如头部、输入框等）
      return `calc(${this.chatHeight}px - 251px)`;
    },
  },
  watch: {
    '$store.state.app.showChat': {
      handler(newValue) {
        if (newValue) {
          this.$nextTick(() => {
            this.updateMessagesHeight();
          });
        }
      },
      immediate: true
    }
  },
  mounted() {
    window.addEventListener('resize', this.updateMessagesHeight);
    document.addEventListener('click', this.handleOutsideClick);
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.updateMessagesHeight);
    document.removeEventListener('click', this.handleOutsideClick);
  },
  methods: {
    handleOutsideClick(event) {
      if (this.$store.state.app.showChat && !this.$el.contains(event.target)) {
        this.closeChat();
      }
    },
    toggleChat() {
      this.$store.state.app.showChat= true;
      this.showChat = true;
    },
    closeChat() {
      this.$store.state.app.showChat= false;
      this.showChat = false;
    },
    startResize(event) {
      this.isResizing = true;
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.startWidth = this.$refs.chatWindow.offsetWidth;
      this.startHeight = this.$refs.chatWindow.offsetHeight;
      document.addEventListener('mousemove', this.resize);
      document.addEventListener('mouseup', this.stopResize);
    },
    // Add this method
    stopResize() {
      this.isResizing = false;
      document.removeEventListener('mousemove', this.resize);
      document.removeEventListener('mouseup', this.stopResize);
    },
    updateMessagesHeight() {
      const chatBox = this.$refs.chatBox;
      if (chatBox && chatBox.$el) {
        const messagesEl = chatBox.$el.querySelector('.messages');
        if (messagesEl) {
          const chatWindowHeight = this.$refs.chatWindow.offsetHeight;
          const otherElementsHeight = 251; // Adjust this value as needed
          messagesEl.style.height = `${chatWindowHeight - otherElementsHeight}px`;
        }
      }
    },

    resize(event) {
      if (this.isResizing) {
        const dx = this.startX - event.clientX;
        const dy = this.startY - event.clientY;
        this.chatWidth = Math.max(300, this.startWidth + dx);
        this.chatHeight = Math.max(400, this.startHeight + dy);
        this.$nextTick(() => {
          this.updateMessagesHeight();
        });
      }
    },

    toggleChat() {
      this.$store.state.app.showChat = true;
      this.showChat = true;
      this.$nextTick(() => {
        this.updateMessagesHeight();
      });
    },
  },

};
</script>

<style scoped>
.chat-icon {
  cursor: pointer;
  background-color: #409eff;
  color: #000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
.el-icon-chat-dot-round {
  color: white;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.animate-pulse {
  animation: pulse 1.5s infinite ease-in-out;
}
.chat-window {
  position: fixed;
  bottom: 60px;
  right: 0;
  background-color: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.chat-header {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 10px;
}


.resize-handle {
  width: 20px;
  height: 20px;
  cursor: nwse-resize;
  position: absolute;
  top: -4px;
  left: -4px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #409eff;
  font-size: 16px;
  transform: rotate(140deg);
}

.resize-handle i {
  pointer-events: none;
}

.message {
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  max-width: 80%;
}

.user {
  align-self: flex-end;
  /*  background-color: #409EFF; */
  color: #000;
}

.agent {
  align-self: flex-start;
  background-color: #f4f4f5;
  color: #333;
}

.chat-input {
  margin-top: 10px;
}
::v-deep .chat-container .content{
    flex-direction: column;
  }
  ::v-deep .messages {
  overflow-y: auto;
}
  ::v-deep .input-container{
    margin: 0 auto;
    position: unset;
      left: 50%;
      transform: translateX(0%);
  }
  ::v-deep .sender-name{
      font-size: 14px;
  }
  ::v-deep.chat-container{
    margin-bottom: 0;
  }
</style>