<script setup lang="ts">
import {computed} from 'vue';

import {Tools} from '@element-plus/icons-vue';
import {ElIcon, ElTag} from 'element-plus';

const props = defineProps<{
  input?: unknown;
  output?: unknown;
  status?: string;
  toolName: string;
}>();

const statusText = computed(() => props.status || '执行中');
</script>

<template>
  <div class="ai-tool-card">
    <div class="ai-tool-card__head">
      <div class="ai-tool-card__name">
        <ElIcon><Tools /></ElIcon>
        <span>{{ toolName }}</span>
      </div>
      <ElTag size="small" effect="plain">{{ statusText }}</ElTag>
    </div>
    <pre v-if="input" class="ai-tool-card__payload">{{ input }}</pre>
    <pre v-if="output" class="ai-tool-card__payload">{{ output }}</pre>
  </div>
</template>

<style scoped>
.ai-tool-card {
  padding: 12px;
  background: var(--el-fill-color-light);
  border-radius: 8px;
}

.ai-tool-card__head,
.ai-tool-card__name {
  display: flex;
  align-items: center;
}

.ai-tool-card__head {
  justify-content: space-between;
}

.ai-tool-card__name {
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
}

.ai-tool-card__payload {
  max-height: 128px;
  padding: 8px;
  margin: 10px 0 0;
  overflow: auto;
  font-size: 12px;
  line-height: 18px;
  color: var(--el-text-color-secondary);
  white-space: pre-wrap;
  background: var(--el-bg-color);
  border-radius: 6px;
}
</style>
