<script setup lang="ts">
import dayjs from 'dayjs';

import { Card, Empty, Tag } from 'ant-design-vue';

import type { SalespersonDashboardInactiveStoreItem } from '../api';

const props = defineProps<{
  title: string;
  subtitle?: string;
  items: SalespersonDashboardInactiveStoreItem[];
  showPromoter?: boolean;
  emptyText?: string;
}>();

function formatInputAt(timestamp: number) {
  if (!timestamp) return '—';
  return dayjs.unix(timestamp).format('YYYY-MM-DD');
}
</script>

<template>
  <Card :title="title" class="warning-card">
    <template v-if="subtitle" #extra>
      <span class="warning-card__subtitle">{{ subtitle }}</span>
    </template>

    <Empty v-if="!items.length" :description="emptyText || '暂无警示门店'" />

    <div v-else class="warning-card__list">
      <div
        v-for="item in items"
        :key="item.store_id"
        class="warning-item"
      >
        <div class="warning-item__indicator" />
        <div class="warning-item__main">
          <div class="warning-item__header">
            <div class="warning-item__name">{{ item.name }}</div>
            <Tag color="warning">本月零营业额</Tag>
          </div>
          <div class="warning-item__meta">
            <Tag size="small">{{ item.type_label }}</Tag>
            <span class="warning-item__time">录入时间：{{ formatInputAt(item.input_at) }}</span>
            <span v-if="showPromoter && item.promoter_nick_name" class="warning-item__promoter">
              业务员：{{ item.promoter_nick_name }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<style scoped>
.warning-card {
  height: 100%;
}

.warning-card__subtitle {
  max-width: 280px;
  font-size: 12px;
  font-weight: normal;
  color: #86909c;
  text-align: right;
}

.warning-card__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.warning-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: #fff7e6;
  border: 1px solid #ffe7ba;
  border-radius: 10px;
}

.dark .warning-item {
  background: #2b2111;
  border-color: #594214;
}

.warning-item__indicator {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  background: #fa8c16;
  border-radius: 50%;
}

.warning-item__main {
  flex: 1;
  min-width: 0;
}

.warning-item__header {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.warning-item__name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  color: #1d2129;
  white-space: nowrap;
}

.dark .warning-item__name {
  color: #f3f4f6;
}

.warning-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: #86909c;
}

.warning-item__promoter {
  color: #595959;
}

.dark .warning-item__promoter {
  color: #bfbfbf;
}
</style>
