<template>
  <div class="app-container">
    <h1>我的应用</h1>

    <!-- 聊天组件 -->
    <CozeChat :bot-id="cozeConfig.botId" :title="cozeConfig.title" :token="authToken" />

    <!-- Token刷新按钮（示例） -->
    <button @click="refreshToken" class="refresh-btn">刷新Token</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import CozeChat from './components/CozeChat.vue';

export default {
  components: { CozeChat },
  setup() {
    const cozeConfig = ref({
      botId: '7522056630889381923',
      title: 'AI客服',
    });

    // 存储认证令牌
    const authToken = ref('');

    // 模拟从API获取token
    const fetchToken = async () => {
      return 'pat_tuIM7jubM1hLXaIWzbWg1U15lBe66AlYwu9BkXMQXInh8VdPszRFTwlTPmdziHwg';
      // 实际项目中应调用后端API
      // return new Promise((resolve) => {
      //   setTimeout(() => {
      //     // 生成模拟token
      //     const mockToken = 'pat_' + Math.random().toString(36).substring(2, 15);
      //     resolve(mockToken);
      //   }, 500);
      // });
    };

    // 刷新token
    const refreshToken = async () => {
      authToken.value = await fetchToken();
    };

    // 初始化时获取token
    onMounted(async () => {
      authToken.value = await fetchToken();
    });
  },
};
</script>

<style>
.app-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.refresh-btn {
  margin-top: 20px;
  padding: 10px 20px;
  background: #2ecc71;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.3s;
}

.refresh-btn:hover {
  background: #27ae60;
}
</style>
