<template>
  <v-card elevation="0" border rounded="lg" class="mb-4 pa-4">
    <v-row align="center" dense>
      <v-col cols="12" sm="4">
        <v-text-field
          :model-value="sourcePath"
          label="推送源路径"
          variant="outlined"
          density="compact"
          prepend-inner-icon="mdi-folder"
          :disabled="zipLocked"
          :hint="zipLocked ? '已使用 ZIP 解压目录作为源路径' : undefined"
          persistent-hint
          @update:model-value="$emit('update:sourcePath', $event)"
        />
      </v-col>
      <v-col cols="12" sm="4">
        <v-text-field
          :model-value="targetPath"
          label="目标路径"
          variant="outlined"
          density="compact"
          prepend-inner-icon="mdi-folder-marker"
          @update:model-value="$emit('update:targetPath', $event)"
        />
      </v-col>
      <v-col cols="12" sm="4" class="d-flex ga-2 justify-end">
        <v-btn size="small" variant="tonal" prepend-icon="mdi-eye" @click="$emit('preview')">预览</v-btn>
        <v-btn
          size="small"
          color="primary"
          variant="flat"
          prepend-icon="mdi-upload"
          :loading="pushing"
          @click="$emit('push')"
        >
          推送
        </v-btn>
      </v-col>
    </v-row>
  </v-card>
</template>

<script setup lang="ts">
defineProps<{
  sourcePath: string
  targetPath: string
  zipLocked: boolean
  pushing: boolean
}>()

defineEmits<{
  'update:sourcePath': [value: string]
  'update:targetPath': [value: string]
  preview: []
  push: []
}>()
</script>
