<script setup lang="ts">
import { useFilesPageContext } from '@/composables/files/filesPageContext'

const p = useFilesPageContext()
</script>

<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-autocomplete
          v-model="p.selectedServer"
          v-model:search="p.serverSearchQuery"
          :items="p.filteredServerList"
          :loading="p.serversLoading"
          item-title="name"
          item-value="id"
          label="选择服务器"
          placeholder="搜索名称 / 域名 / 路径 / ID"
          variant="outlined"
          density="compact"
          prepend-inner-icon="mdi-server"
          :custom-filter="() => true"
          @update:model-value="p.onServerChange"
        >
          <template #item="{ props: itemProps, item }">
            <v-list-item
              v-bind="itemProps"
              :subtitle="item.domain || item.target_path"
            >
              <template #prepend>
                <v-icon
                  :color="item.is_online ? 'success' : 'grey'"
                  size="8"
                  class="mr-2"
                >
                  mdi-circle
                </v-icon>
              </template>
            </v-list-item>
          </template>
        </v-autocomplete>
      </v-col>
      <v-col cols="12" sm="4">
        <v-text-field
          v-model="p.currentPath"
          label="路径"
          variant="outlined"
          density="compact"
          prepend-inner-icon="mdi-folder"
          append-inner-icon="mdi-arrow-right"
          @click:append-inner="p.browseCurrent"
          @keydown.enter="p.browseCurrent"
        />
      </v-col>
      <v-col cols="12" sm="3">
        <v-text-field
          v-model="p.fileFilter"
          label="筛选文件名"
          variant="outlined"
          density="compact"
          prepend-inner-icon="mdi-magnify"
          clearable
          hide-details
        />
      </v-col>
      <v-col cols="12" sm="3">
        <v-select
          v-model="p.extFilter"
          :items="p.FILE_EXT_FILTERS"
          item-title="title"
          item-value="value"
          label="类型"
          variant="outlined"
          density="compact"
          hide-details
          clearable
        />
      </v-col>
      <v-col cols="12" sm="2">
        <v-select
          v-model="p.sortBy"
          :items="p.sortOptions"
          item-title="title"
          item-value="value"
          label="排序"
          variant="outlined"
          density="compact"
          hide-details
        />
      </v-col>
      <v-col cols="12" class="d-flex ga-2 flex-wrap justify-end">
        <v-btn size="small" variant="tonal" prepend-icon="mdi-upload" @click="p.showUpload = true">
          上传
        </v-btn>
        <v-btn
          size="small"
          variant="tonal"
          prepend-icon="mdi-file-plus"
          @click="p.openNewFileDialog()"
        >
          新建文件
        </v-btn>
        <v-btn size="small" variant="tonal" prepend-icon="mdi-folder-plus" @click="p.showMkdir = true">
          新建目录
        </v-btn>
        <v-btn
          size="small"
          variant="tonal"
          prepend-icon="mdi-zip-box"
          :disabled="!p.selectedServer || !p.selectedFileCount"
          @click="p.openCompressDialog()"
        >
          压缩
        </v-btn>
        <v-btn
          size="small"
          variant="tonal"
          prepend-icon="mdi-content-paste"
          :disabled="!p.canPasteHere"
          @click="() => p.pasteClipboard()"
        >
          粘贴
        </v-btn>
        <v-btn size="small" variant="tonal" prepend-icon="mdi-arrow-up" :disabled="!p.canGoUp" @click="p.goUp">
          上级
        </v-btn>
        <v-btn size="small" variant="tonal" prepend-icon="mdi-refresh" @click="p.browseCurrent">刷新</v-btn>
        <v-btn
          size="small"
          variant="tonal"
          prepend-icon="mdi-console"
          :disabled="!p.selectedServer"
          @click="p.openInTerminal"
        >
          终端
        </v-btn>
      </v-col>
    </v-row>
  </v-card>
</template>
