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

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

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

defineProps<{
  activities: MarketingCalendarActivityDto[];
  conflict: MarketingCalendarConflictDto | null;
  open: boolean;
}>();

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

<template>
  <Drawer
    :open="open"
    title="冲突详情"
    width="620"
    class="mc-detail-drawer"
    @close="emit('close')"
  >
    <template v-if="conflict">
      <div class="mc-conflict-head">
        {{ conflict.startDay }}日~{{ conflict.endDay }}日，最大并行
        {{ conflict.maxConcurrentCount }} 个活动
      </div>

      <div v-if="activities.length > 0" class="mc-conflict-list">
        <div
          v-for="item in activities"
          :key="item.activityId"
          class="mc-conflict-item"
        >
          <div class="left">
            <span class="dot" :style="{ background: item.color }"></span>
            <div class="content">
              <div class="name">{{ item.name }}</div>
              <div class="summary">{{ item.summary }}</div>
            </div>
          </div>
          <div class="right">
            <Tag>
              {{
                CALENDAR_TYPE_TEXT_MAP[item.calendarType] ?? item.calendarType
              }}
            </Tag>
            <Button
              type="link"
              size="small"
              @click="emit('viewActivity', item.activityId)"
            >
              查看活动
            </Button>
          </div>
        </div>
      </div>

      <Empty v-else description="暂无冲突活动明细" />
    </template>

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