<template>
  <v-card elevation="0" border rounded="lg" class="mb-4 pa-4">
    <v-row align="center" dense>
      <v-col cols="12" sm="8">
        <v-text-field
          :model-value="targetPath"
          label="目标路径"
          placeholder="/www/wwwroot"
          hint="留空则使用下方各服务器配置的路径；填写则统一覆盖所有选中服务器"
          persistent-hint
          variant="outlined"
          density="compact"
          prepend-inner-icon="mdi-folder-marker"
          clearable
          @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="submitting"
          :disabled="pushing"
          @click="$emit('push')"
        >
          推送
        </v-btn>
      </v-col>
    </v-row>
  </v-card>
</template>

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

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