<script setup lang="ts">
import type { WorkbenchTrendCommentItem } from '../typing';

import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  VbenIcon,
} from '@vben-core/shadcn-ui';

interface Props {
  items?: WorkbenchTrendCommentItem[];
  title: string;
}

defineOptions({
  name: 'WorkbenchTrendsComment',
});

withDefaults(defineProps<Props>(), {
  items: () => [],
});
</script>

<template>
  <Card>
    <CardHeader class="py-4">
      <CardTitle class="text-lg">{{ title }}</CardTitle>
    </CardHeader>
    <CardContent class="flex flex-wrap p-5 pt-0">
      <ul class="divide-border w-full divide-y" role="list">
        <li
          v-for="item in items"
          :key="item.title"
          class="flex justify-between gap-x-6 py-5"
        >
          <div class="flex min-w-0 items-center gap-x-4">
            <VbenIcon
              :icon="item.avatar"
              alt=""
              class="size-10 flex-none rounded-full"
            />
            <div class="min-w-0 flex-auto">
              <p class="text-foreground text-sm font-semibold leading-6">
                <!-- eslint-disable vue/no-v-html -->
                <!-- <span v-html="item.info"></span> -->
                <a-tooltip title="客户名称">
                  <span
                    class="text-foreground mr-2 text-sm font-semibold leading-6"
                    >{{ item.customerName }}
                  </span>
                </a-tooltip>
                <a-tooltip title="项目名称">
                  <span
                    class="text-foreground mr-2 text-sm font-semibold leading-6"
                    >{{ item.title }}
                  </span>
                </a-tooltip>
                <a-tooltip title="项目状态">
                  <a-tag
                    v-if="item.status"
                    :color="
                      item.status.colorType
                        ? item.status.colorType
                        : item.status.cssClass
                    "
                  >
                    {{ item.status.label }}
                  </a-tag>
                </a-tooltip>

                <a-tooltip title="SN" v-if="item.serialNo">
                  <span
                    class="text-foreground mr-2 text-sm font-semibold leading-6"
                    >{{ item.serialNo }}
                  </span>
                </a-tooltip>
                <a-tooltip title="业务负责人">
                  <span
                    class="text-foreground mr-2 text-sm font-semibold leading-6"
                    >{{ item.businessOwner }}
                  </span>
                </a-tooltip>
                <a-tooltip title="技术负责人1">
                  <span
                    class="text-foreground mr-2 text-sm font-semibold leading-6"
                    >{{ item.technicalOwnerA }}
                  </span>
                </a-tooltip>
                <!-- eslint-disable vue/no-v-html -->
                <!-- <span v-html="item.info"></span> -->
                <!-- <a-row :gutter="16" class="mb-2">
                  <a-col>项目名称</a-col>
                  <a-col>项目状态</a-col>
                  <a-col>业务负责人</a-col>
                </a-row>
                <a-row :gutter="16">
                  <a-col :span="8">
                    <span
                      class="text-foreground text-sm font-semibold leading-6"
                    >
                      {{ item.title }}
                    </span>
                  </a-col>
                  <a-col :span="8">
                    <a-tag
                      v-if="item.status"
                      :color="
                        item.status.colorType
                          ? item.status.colorType
                          : item.status.cssClass
                      "
                    >
                      {{ item.status.label }}
                    </a-tag>
                  </a-col>
                  <a-col :span="8">col-6</a-col>
                </a-row> -->
              </p>
              <!-- eslint-disable vue/no-v-html -->
              <p
                class="text-foreground/80 *:text-primary mt-1 truncate text-xs leading-5"
                v-html="item.content"
              ></p>
            </div>
          </div>
          <div class="hidden h-full shrink-0 sm:flex sm:flex-col sm:items-end">
            <span class="text-foreground/80 mt-6 text-xs leading-6">
              {{ item.date }}
            </span>
          </div>
        </li>
      </ul>
    </CardContent>
  </Card>
</template>
