<script setup lang="ts">
import type { MarketingCalendarActivityDto } from '#/api/marketing';

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

import {
  CALENDAR_STATUS_TEXT_MAP,
  CALENDAR_TYPE_TEXT_MAP,
} from '../composables/marketing-calendar-page/constants';

defineProps<{
  activity: MarketingCalendarActivityDto | null;
  open: boolean;
}>();

const emit = defineEmits<{
  (event: 'close'): void;
}>();
</script>

<template>
  <Drawer
    :open="open"
    title="活动详情"
    width="560"
    class="mc-detail-drawer"
    @close="emit('close')"
  >
    <template v-if="activity">
      <div class="mc-detail-title">{{ activity.name }}</div>
      <div class="mc-detail-meta">
        <Tag color="blue">
          {{
            CALENDAR_TYPE_TEXT_MAP[activity.calendarType] ??
            activity.calendarType
          }}
        </Tag>
        <Tag :color="activity.isDimmed ? 'default' : 'green'">
          {{
            CALENDAR_STATUS_TEXT_MAP[activity.displayStatus] ??
            activity.displayStatus
          }}
        </Tag>
      </div>
      <div class="mc-detail-desc">{{ activity.detail.description }}</div>

      <div class="mc-detail-fields">
        <div
          v-for="field in activity.detail.fields"
          :key="`${activity.activityId}-${field.label}`"
          class="mc-detail-field"
        >
          <span class="label">{{ field.label }}</span>
          <span class="value">{{ field.value }}</span>
        </div>
      </div>
    </template>

    <Empty v-else description="暂无活动详情" />
  </Drawer>
</template>
