<template>
  <div class="coze-chat-container"></div>
</template>

<script>
import { onMounted } from 'vue';
const baseUrl = import.meta.env.VITE_API_TOKEN_URL;

export default {
  name: 'CozeChat',
  setup() {
    async function getAuthToken() {
      const response = await fetch(`${baseUrl}/token`, {
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        }
      });
      const data = await response.json();
      return data.access_token;
    }

    onMounted(async () => {
      const tokenValue = await getAuthToken();
      
      const cozeWebSDK = new CozeWebSDK.WebChatClient({
        config: {
          //修改为您的botId
          botId: import.meta.env.VITE_BOT_ID,
        },
        auth: {
          type: 'token',
          token: tokenValue,
          onRefreshToken: () => tokenValue
        },
        userInfo: {
          id: "12344",
          url: "//",
          nickname: "Guest",
        },
        ui:{
          base:{
            layout:"pc",
            lang:"zh-CN",
            zIndex:100
          }, 
          header:{
            isShow:false,
            isNeedClose:true,
          },
          asstBtn: {
            isNeed: true,
          },
          footer: {
            isShow: true,
            expressionText: 'Powered by Megadotnet',
            linkvars: {
              name: {
                text: 'A',
                link: 'https://www.test1.com'
              },
              name1: {
                text: 'B',
                link: 'https://www.test2.com'
              }
            }
          }
        },
        chatBot: {
          title: "Kids' Playmate | Snowy",
          uploadable: true,
          width: 800,
          el: undefined,
          onHide: () => {},
          onShow: () => {},
        },
      });
    });
  }
}
</script>

<style scoped>
.coze-chat-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
}
</style>