<!--
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

interface ServiceItem {
  id: string
  code: string
  name: string
}

const props = defineProps<{
  services: ServiceItem[]
  modelValue: string[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string[]): void
}>()
const { t } = useI18n()

/** 互斥规则配置 */
const MUTUAL_EXCLUSION_RULES: Record<string, string[]> = {
  'D1': ['D2-1', 'D2-2', 'D3-1', 'D3-2', 'D3-3', 'D3-4', 'D3-6-1', 'D3-7'],
  'D2-1': ['D1', 'D2-2', 'D3-4', 'D3-6-1', 'D3-7'],
  'D2-2': ['D2-1', 'D3-1', 'D3-2', 'D3-3']
}

/** 当前已选服务的 code 集合 */
const selectedCodes = computed(() => {
  return props.services
    .filter(s => selectedSet.value.has(s.id))
    .map(s => s.code)
})

/** 获取某服务被哪些服务互斥 */
const getBlockedBy = (targetCode: string): string[] => {
  const blockers: string[] = []
  for (const [blockerCode, blockedCodes] of Object.entries(MUTUAL_EXCLUSION_RULES)) {
    if (selectedCodes.value.includes(blockerCode) && blockedCodes.includes(targetCode)) {
      blockers.push(blockerCode)
    }
  }
  return blockers
}

/** 判断某服务是否被禁用 */
const isServiceDisabled = (item: ServiceItem): { disabled: boolean; reason: string } => {
  const blockers = getBlockedBy(item.code)
  if (blockers.length > 0) {
    const blockerServices = blockers.map(bc => {
      const s = props.services.find(s => s.code === bc)
      return s ? `${s.code}${s.name}` : bc
    })
    return { disabled: true, reason: `与已选的${blockerServices.join('、')}互斥` }
  }
  return { disabled: false, reason: '' }
}

const selectedSet = computed(() => new Set(props.modelValue))

const toggleService = (item: ServiceItem, checked: boolean) => {
  const { disabled } = isServiceDisabled(item)
  // 如果尝试勾选被禁用的服务，直接忽略
  if (checked && disabled) return
  
  const next = new Set(props.modelValue)
  if (checked) {
    next.add(item.id)
    // 勾选时，自动取消互斥的服务
    const blockedCodes = MUTUAL_EXCLUSION_RULES[item.code] || []
    for (const blockedCode of blockedCodes) {
      const blockedService = props.services.find(s => s.code === blockedCode)
      if (blockedService) {
        next.delete(blockedService.id)
      }
    }
  } else {
    next.delete(item.id)
  }
  emit('update:modelValue', props.services.map(s => s.id).filter(id => next.has(id)))
}

const clearAll = () => {
  emit('update:modelValue', [])
}
</script>

<template>
  <div class="rounded-lg border bg-card p-2.5 shadow-sm">
    <div class="mb-1 flex items-center justify-between gap-2">
      <label class="block text-[11px] font-medium text-foreground leading-none">{{ t('serviceSelector.title') }}</label>
      <button
        type="button"
        class="cursor-pointer h-6 rounded-md border px-2 text-[13px] text-muted-foreground transition hover:bg-accent"
        @click="clearAll"
      >
        {{ t('serviceSelector.clear') }}
      </button>
    </div>
    <div class="rounded-md border p-1.5">
      <div class="flex flex-wrap items-start gap-1">
      <label
        v-for="item in props.services"
        :key="item.id"
        :class="[
          'inline-flex w-fit max-w-full cursor-pointer items-start gap-1.5 rounded-md border px-2 py-1 text-[11px] leading-4',
          isServiceDisabled(item).disabled
            ? 'opacity-50 cursor-not-allowed hover:bg-transparent'
            : 'hover:bg-muted/60'
        ]"
        :title="isServiceDisabled(item).reason"
      >
        <input
          type="checkbox"
          class="mt-0.5"
          :checked="selectedSet.has(item.id)"
          :disabled="isServiceDisabled(item).disabled"
          @change="toggleService(item, ($event.target as HTMLInputElement).checked)"
        />
        <span class="text-muted-foreground shrink-0">{{ item.code }}</span>
        <span class="text-foreground break-words">{{ item.name }}</span>
      </label>
      </div>
      <div v-if="props.services.length === 0" class="px-2 py-4 text-center text-xs text-muted-foreground">
        {{ t('serviceSelector.empty') }}
      </div>
    </div>
  </div>
</template>
-->
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

interface ServiceItem {
  id: string
  code: string
  name: string
}

const props = defineProps<{
  services: ServiceItem[]
  modelValue: string[]
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string[]): void
}>()
const { t } = useI18n()

const selectedSet = computed(() => new Set(props.modelValue))

const toggleService = (item: ServiceItem, checked: boolean) => {
  const next = new Set(props.modelValue)
  if (checked) {
    next.add(item.id)
  } else {
    next.delete(item.id)
  }
  emit('update:modelValue', props.services.map(s => s.id).filter(id => next.has(id)))
}

const clearAll = () => {
  emit('update:modelValue', [])
}
</script>

<template>
  <div class="rounded-lg border bg-card p-2.5 shadow-sm">
    <div class="mb-1 flex items-center justify-between gap-2">
      <label class="block text-[11px] font-medium text-foreground leading-none">{{ t('serviceSelector.title') }}</label>
      <button
          type="button"
          class="cursor-pointer h-6 rounded-md border px-2 text-[13px] text-muted-foreground transition hover:bg-accent"
          @click="clearAll"
      >
        {{ t('serviceSelector.clear') }}
      </button>
    </div>
    <div class="rounded-md border p-1.5">
      <div class="flex flex-wrap items-start gap-1">
        <label
            v-for="item in props.services"
            :key="item.id"
            class="inline-flex w-fit max-w-full cursor-pointer items-start gap-1.5 rounded-md border px-2 py-1 text-[11px] leading-4 hover:bg-muted/60"
        >
          <input
              type="checkbox"
              class="mt-0.5"
              :checked="selectedSet.has(item.id)"
              @change="toggleService(item, ($event.target as HTMLInputElement).checked)"
          />
          <span class="text-muted-foreground shrink-0">{{ item.code }}</span>
          <span class="text-foreground break-words">{{ item.name }}</span>
        </label>
      </div>
      <div v-if="props.services.length === 0" class="px-2 py-4 text-center text-xs text-muted-foreground">
        {{ t('serviceSelector.empty') }}
      </div>
    </div>
  </div>
</template>
