<template>
  <section class="dept-list">
    <div
      v-for="(dept, idx) in departments"
      :key="dept.deptId"
      :class="['dept-full', { rec: idx === 0, submitting: store.cardActionSubmitting }]"
      @click="select(dept)"
    >
      <span v-if="idx === 0" class="dept-badge">推荐</span>
      <div class="dept-name">{{ dept.name }}</div>
      <div v-if="dept.reason" class="dept-reason">{{ dept.reason }}</div>
      <div class="dept-meta">
        <span v-if="dept.doctorCount !== undefined">可约医生 <strong>{{ dept.doctorCount }}</strong> 位</span>
        <span v-if="dept.slotCount !== undefined">明日号源 <strong>{{ dept.slotCount }}</strong> 个</span>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useTerminalStore } from '../state/terminalStore';
import type { CardInstance } from '../api/types';

const props = defineProps<{ card: CardInstance }>();
const emit = defineEmits<{ action: [data: { actionName: string; payload: Record<string, unknown> }] }>();
const store = useTerminalStore();

interface DepartmentOption {
  deptId: string;
  departmentId?: string;
  name: string;
  reason?: string;
  doctorCount?: number;
  slotCount?: number;
}

const departments = computed(() => {
  const raw = (props.card.cardData.departments as DepartmentOption[]) ?? [];
  return raw.map((d) => ({
    ...d,
    deptId: d.deptId ?? d.departmentId ?? '',
  }));
});

function select(dept: DepartmentOption) {
  if (store.cardActionSubmitting) return;
  emit('action', {
    actionName: 'select_department',
    payload: { departmentId: dept.deptId, departmentName: dept.name },
  });
}
</script>

<style scoped>
.dept-full.submitting {
  pointer-events: none;
  opacity: 0.5;
}
</style>


<style scoped>
.dept-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dept-full {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.dept-full:hover {
  border-color: var(--accent);
}

.dept-full.rec {
  border-color: var(--accent);
  background: var(--accent-faint);
}

.dept-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--surface);
  font-size: 10px;
  font-weight: 500;
  margin-bottom: 8px;
}

.dept-name {
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}

.dept-reason {
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 10px;
}

.dept-meta {
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--muted);
}

.dept-meta strong {
  color: var(--fg);
  font-weight: 500;
}
</style>
