<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useTerminalTabsStore } from '../stores/terminalTabs'
import { useConnectionsStore } from '../stores/connections'
import TerminalWidget from '../components/TerminalWidget.vue'

const props = defineProps<{
  visible?: boolean
}>()

const tabsStore = useTerminalTabsStore()
const connectionsStore = useConnectionsStore()

const tabs = computed(() => tabsStore.tabs)

onMounted(() => {
  // 确保连接列表已加载
  if (connectionsStore.connections.length === 0) {
    connectionsStore.fetchConnections()
  }
})
</script>

<template>
  <div class="h-full flex flex-col">
    <!-- 终端内容区 -->
    <div class="flex-1 min-h-0 p-4">
      <div v-if="tabs.length === 0" class="flex items-center justify-center h-full text-slate-400">
        <div class="text-center">
          <p class="text-lg mb-2">暂无打开的终端</p>
          <p class="text-sm text-slate-500">从左侧连接列表点击"终端"按钮打开</p>
        </div>
      </div>
      <div v-else class="h-full">
        <div
          v-for="tab in tabs"
          :key="tab.id"
          v-show="tab.active"
          class="h-full"
        >
          <TerminalWidget
            :connection-id="tab.connectionId"
            :active="tab.active && props.visible !== false"
          />
        </div>
      </div>
    </div>
  </div>
</template>
