<template>
  <div class="agent-card">
    <div class="header-section">
      <div class="image-container">
        <img :src="cozeInfo.icon_url" alt="" />
      </div>
    </div>
    <div class="info-section">
      <div class="title-group">
        <div class="title">{{ cozeInfo.name }}</div>
        <div class="tag">
          <div>
            <img class="status-icon" :src="chatbotIcon" />
          </div>
          <div class="text">对话式</div>
        </div>
      </div>
      <div class="usage-info">
        <a-space>
          <span class="count">{{ cozeInfo.views }}</span>
        </a-space>
        <a-space>
          <span class="label"> 次使用 </span>
        </a-space>
      </div>
    </div>
    <div class="description-section">
      <div class="description">
        {{ cozeInfo.description }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import { delAgentMessage, getHistoryChat } from '@/api/all/agent';
import chatbotIcon from '@/assets/svg/chatbot.svg';

const props = defineProps({
  cozeInfo: {
    type: Object as () => any,
    default: () => ({}),
  },
});

const delMessage = async (chatId, conversationId) => {
  const { code, data } = await delAgentMessage({ chat_id: chatId, conversation_id: conversationId });
  if (code === 200) {
    console.log(data, 'data');
  }
};

const conversations = ref([]);

const getHistoryChatData = async (botId) => {
  const { code, data } = await getHistoryChat({ bot_id: botId });
  if (code === 200) {
    conversations.value = data.list;
  }
};
const truncateText = (text: string, maxLength = 30) => {
  if (text.length <= maxLength) return text;
  return text.slice(0, maxLength) + '...';
};

onMounted(() => {});
</script>

<style scoped>
@import './history.scss';
</style>
