<template>
  <UIKitProvider theme="dark">
    <div class="app">
      <div class="chat-container">
        <div class="chat-content">
          <BarrageList class="barrage-list" />
        </div>
        <div class="chat-input">
          <BarrageInput class="barrage-input" />
        </div>
      </div>
    </div>
  </UIKitProvider>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
import { BarrageList, BarrageInput, useLoginState, useLiveListState } from 'tuikit-atomicx-vue3';

const { login } = useLoginState();
const { joinLive } = useLiveListState();

async function initLogin() {
  try {
    await login({
      sdkAppId: 0,        // SDKAppID, 可以参考步骤 1 获取
      userId: '',         // UserID, 可以参考步骤 1 获取
      userSig: '',        // userSig, 可以参考步骤 1 获取
    });
  } catch (error) {
    console.error('登录失败:', error);
  }
}

onMounted(async () => {
  await initLogin();
  await joinLive({
    liveId: '输入对应直播间 LiveId',     // 输入对应 liveId 进入直播间
  });
});
</script>

<style scoped>.app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.chat-container{width:100%;max-width:500px;height:600px;border-radius:16px;display:flex;flex-direction:column;overflow:hidden}.chat-content{flex:1;overflow:hidden}.barrage-list{width:100%;height:100%}.chat-input{background-color:var(--bg-color-dialog);padding:16px}.barrage-input{width:100%}</style>

<BarrageList>
  <template #message-item="{ message, sender }">
    <div class="custom-barrage-item">
      <span class="sender-name">{{ sender.userName }}:</span>
      <span class="message-text">{{ message.textContent }}</span>
    </div>
  </template>
</BarrageList>

<template>
  <BarrageList>
    <template #message-item="{ message, sender }">
      <!-- 礼物消息 -->
      <div v-if="isGiftMessage(message)" class="gift-barrage-item">
        <span class="sender-name">{{ sender.userName }}</span>
        <span class="gift-text">🎁 送出了礼物!</span>
      </div>
      <!-- 普通文本消息 -->
      <div v-else class="text-barrage-item">
        <span class="sender-name">{{ sender.userName }}:</span>
        <span class="message-text">{{ message.textContent }}</span>
      </div>
    </template>
  </BarrageList>
</template>

<script setup lang="ts">
function isGiftMessage(message: { data?: string }): boolean {
  if (!message.data) return false;
  try {
    const data = JSON.parse(message.data);
    return data.type === 'gift';
  } catch {
    return false;
  }
}
</script>

<BarrageInput width="400px" height="60px" minHeight="40px" maxHeight="120px" />

<BarrageInput :maxLength="100" />

<template>
  <BarrageInput
    :onWillSendBarrage="handleWillSend"
    :onDidSendBarrage="handleDidSend"
  />
</template>

<script setup lang="ts">
import { BarrageInput } from 'tuikit-atomicx-vue3';
import type { Barrage } from 'tuikit-atomicx-vue3';

// 发送前内容过滤 — 返回 false 可拦截发送
function handleWillSend(message: Barrage): boolean {
  const sensitiveWords = ['spam', 'abuse'];
  const hasSensitive = sensitiveWords.some(word => (message.textContent || '').includes(word));
  if (hasSensitive) {
    alert('消息包含敏感内容，已拦截发送');
    return false;
  }
  return true;
}

// 发送成功后的埋点统计
function handleDidSend(message: Barrage) {
  console.log('已发送:', message.textContent);
}
</script>

import { useBarrageState } from 'tuikit-atomicx-vue3';

const { sendCustomMessage } = useBarrageState();

const joinLottery = async () => {
  await sendCustomMessage({
    businessId: 'LOTTERY_JOIN', // 自定义业务 ID
    data: JSON.stringify({
      lotteryId: 'ACT_2026_001',
      userName: '资深摄影师',
      timestamp: Date.now()
    }),
  });
  console.log('抽奖请求已发送');
};

import { useBarrageState, BarrageType, BarrageEvent } from 'tuikit-atomicx-vue3';

const { subscribeEvent } = useBarrageState();

subscribeEvent(BarrageEvent.onBarrageReceived, (barrage) => {
  // 识别自定义业务消息
  if (barrage.messageType === BarrageType.custom && barrage.businessId === 'LOTTERY_JOIN') {
    const lotteryData = JSON.parse(barrage.data);
    console.log(`用户 ${lotteryData.userName} 参与了抽奖！`);
    // 💡 此处可调用您自己的动效引擎，弹出“XX参与了抽奖”的轻提示
  }
});

<BarrageList>
  <template #message-item="{ message, sender }">
    <div v-if="message.messageType === 0" class="normal-msg">
      <span class="name">{{ sender.userName }}:</span>
      <span>{{ message.textContent }}</span>
    </div>
    
    <div v-else-if="message.businessId === 'LOTTERY_JOIN'" class="lottery-card">
      🎊 欢迎 {{ sender.userName }} 参加本场抽奖！
    </div>
  </template>
</BarrageList>

async function handleWillSend(message) {
  const isLegal = await checkMessageWithAI(message.textContent);
  return isLegal; // 若为 false，组件内部会自动停止发送流程
}