<template>
  <v-card elevation="0" border rounded="lg" class="mb-4">
    <v-card-title class="text-subtitle-1">同步模式</v-card-title>
    <v-card-text>
      <v-radio-group
        :model-value="syncMode"
        inline
        density="compact"
        @update:model-value="onSyncModeUpdate"
      >
        <v-radio label="增量同步" value="incremental" />
        <v-radio label="全量同步" value="full" />
        <v-radio label="校验和同步" value="checksum" />
      </v-radio-group>
      <v-alert v-if="syncMode === 'full'" type="warning" density="compact" variant="tonal" class="mt-2">
        全量同步会删除目标目录中不存在于源目录的文件
      </v-alert>
      <div class="text-caption text-medium-emphasis mt-1">{{ syncModeDesc }}</div>
    </v-card-text>
  </v-card>
</template>

<script setup lang="ts">
import type { SyncMode } from '@/composables/push/types'

defineProps<{
  syncMode: SyncMode
  syncModeDesc: string
}>()

const emit = defineEmits<{
  'update:syncMode': [value: SyncMode]
}>()

/** Vuetify radio group may emit null when clearing; keep sync mode always defined. */
function onSyncModeUpdate(value: SyncMode | null) {
  if (value != null) emit('update:syncMode', value)
}
</script>
