<template>
  <view class="chat-page">
    <view class="chat-header">
      <text class="title">客服在线</text>
    </view>
    <view class="chat-content">
      <view v-for="(msg, index) in messages" :key="index" class="chat-message">
        {{ msg }}
      </view>
    </view>
    <view class="chat-input">
      <input v-model="newMessage" placeholder="输入消息..." />
      <button @click="sendMessage">发送</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      messages: [],
      newMessage: '',
    };
  },
  methods: {
    async sendMessage() {
      if (!this.newMessage.trim()) {
        return;
      }
      
      // Add the user's message
      this.messages.push(this.newMessage);

      // Prepare the data for the API call
      const url = "https://spark-api-open.xf-yun.com/v1/chat/completions";
      const data ={
        "model": "pro-128k",
        "messages": [
           {
            "role": "在线宠物代管客服",
            "content": this.newMessage
            }
        ]
      };
      
      const headers = {
        "Authorization": "Bearer epMbmmDVIBXcfYRYFlNV:ZDoSuhhvWbPFDMrfMEei",  
        "Content-Type": "application/json"
      };

      // Make the API request
      try {
        const response = await fetch(url, {
          method: "POST",
          headers: headers,
          body: JSON.stringify(data),
        });

        if (response.ok) {
            const result = await response.json();
        
            if (result.choices && result.choices.length > 0) {
                const botMessage = result.choices[0].message.content;
                this.messages.push(botMessage);
            } else {
                console.error("Unexpected API response structure.");
            }
        } else {
              console.error("Failed to fetch response:", response.statusText);
            }
        } catch (error) {
            console.error("Error occurred:", error);
        }


      // Clear the input field
      this.newMessage = '';
    }
  },
};
</script>

<style scoped>
.chat-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.chat-header {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: #3c96f3;
  color: white;
  position: relative; /* Helps to position elements absolutely if needed */
}

.title {
  font-size: 10px;
  text-align: center;
  flex-grow: 1; /* This helps the title take up space equally */
}

.back-button {
  position: absolute;
  left: 10px;
  cursor: pointer;
}

.spacer {
  width: 45px; /* Width of back button for balance; adjust as necessary */
  visibility: hidden; /* Keeps element in flex layout but invisible */
}

.chat-content {
  flex-grow: 1;
  overflow-y: auto;
  padding: 10px;
  background-color: #f5f6f7;
}

.chat-message {
  margin-bottom: 5px;
}

.chat-input {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
  background-color: #fff;
}

.chat-input input {
  flex-grow: 1;
  height: 60px; 
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
}

.chat-input button {
  margin-left: 10px;
  padding: 5px 15px;
  background-color: #3c96f3;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>这个请求发送跨域问题，怎么解决？