<template>
  <div class="terminal-quick-bar shrink-0">
    <span class="terminal-quick-bar__label">快捷命令</span>
    <div class="d-flex align-center ga-1 flex-grow-1 overflow-x-auto">
      <v-chip
        v-for="cmd in commands"
        :key="cmd.id"
        size="small"
        :variant="cmd.is_builtin ? 'outlined' : 'flat'"
        :color="cmd.is_builtin ? 'default' : 'primary'"
        label
        class="cursor-pointer"
        @click="$emit('exec', cmd.cmd)"
      >
        {{ cmd.name }}
      </v-chip>
    </div>
    <v-btn
      size="small"
      variant="text"
      color="error"
      prepend-icon="mdi-link-off"
      :disabled="disconnectDisabled"
      @click="$emit('disconnect')"
    >
      断开
    </v-btn>
  </div>
</template>

<script setup lang="ts">
import type { QuickCmdItem } from '@/composables/useTerminalQuickCommands'

defineProps<{
  commands: QuickCmdItem[]
  /** 无活动会话时禁用断开 */
  disconnectDisabled?: boolean
}>()

defineEmits<{
  exec: [cmd: string]
  disconnect: []
}>()
</script>

<style scoped>
.terminal-quick-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgb(var(--v-theme-surface));
  border-top: 1px solid rgb(var(--v-theme-surface-variant));
}
.terminal-quick-bar__label {
  font-size: 0.9375rem;
  font-weight: 600;
  flex-shrink: 0;
  color: rgb(var(--v-theme-on-surface));
}
.cursor-pointer {
  cursor: pointer;
}
</style>
