<template>
  <div class="agent-wrap">
    <div v-for="(item, index) in list" :key="index">
      <span class="span-title">{{ item.name }}</span>
      <a-row class="grid-demo" :gutter="24">
        <a-col :span="6" v-if="item.agent_products.length > 0" v-for="(product, k) in item.agent_products">
          <a-card @click="goDetail(product?.agent_system?.type, product?.id)">
            <template #actions>
              <span class="icon-hover"> {{ product?.views }}次调用 </span>
            </template>
            <template #cover>
              <div>
                <img
                  :style="{ width: '100%', transform: 'translateY(-20px)' }"
                  alt="dessert"
                  :src="product?.agent_system?.icon_url"
                />
              </div>
            </template>
            <a-card-meta :title="product?.agent_system?.title" :description="product?.agent_system?.description">
              <template #avatar>
                <div :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }">
                  <a-typography-text>{{ product?.agent_system?.type == 1 ? '对话式' : '工作流' }}</a-typography-text>
                </div>
              </template>
            </a-card-meta>
          </a-card>
        </a-col>
        <NoData v-else />
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { getAgentList } from '@/api/all/agent';

const router = useRouter();

const list = ref([]);
const getData = async () => {
  const { code, data } = await getAgentList();
  list.value = data;
};

const goDetail = (type: number, id: number) => {
  if (type === 1) {
    router.push({
      path: '/agent/chat',
      query: { id: id },
    });
  } else if (type === 2) {
    router.push({
      path: '/agent/workFlow',
      query: { id: id },
    });
  }
};

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

<style scoped lang="scss">
@import './style.scss';
</style>
