<template>
  <div class="task-tree-container">
    <div v-if="taskData.length === 0" class="empty-state">
      <a-empty description="暂无任务数据" />
    </div>
    <div v-else class="task-tree">
      <div 
        v-for="script in taskData" 
        :key="script.script_id"
        class="script-card"
      >
        <!-- 脚本级别 -->
        <div 
          class="script-header"
          @click="toggleScript(script.script_id)"
        >
          <div class="script-content">
            <div class="script-info">
              <CaretDownOutlined 
                v-if="expandedScripts.has(script.script_id)"
                class="expand-icon"
              />
              <CaretRightOutlined 
                v-else
                class="expand-icon"
              />
              <span class="script-name">{{ script.name }}</span>
              <span class="user-count" v-if="script.user_list && script.user_list.length > 0">
                ({{ script.user_list.length }}个用户)
              </span>
            </div>
            <a-tag 
              :color="getStatusColor(script.status)" 
              size="small"
              class="status-tag"
            >
              {{ script.status }}
            </a-tag>
          </div>
        </div>
        
        <!-- 用户列表 -->
        <div 
          v-show="expandedScripts.has(script.script_id)"
          class="user-list"
        >
          <div v-if="!script.user_list || script.user_list.length === 0" class="no-users">
            <div class="no-users-content">
              <span class="no-users-text">暂无用户</span>
            </div>
          </div>
          <div 
            v-for="(user, index) in script.user_list" 
            :key="user.user_id"
            class="user-item"
            :class="{ 'last-item': index === script.user_list.length - 1 }"
          >
            <div class="user-content">
              <span class="user-name">{{ user.name }}</span>
              <a-tag 
                :color="getStatusColor(user.status)" 
                size="small"
                class="status-tag"
              >
                {{ user.status }}
              </a-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { CaretDownOutlined, CaretRightOutlined } from '@ant-design/icons-vue'

interface User {
  user_id: string
  status: string
  name: string
}

interface Script {
  script_id: string
  status: string
  name: string
  user_list: User[]
}

interface Props {
  taskData: Script[]
}

const props = defineProps<Props>()

// 展开的脚本集合
const expandedScripts = ref<Set<string>>(new Set())

// 切换脚本展开状态
const toggleScript = (scriptId: string) => {
  if (expandedScripts.value.has(scriptId)) {
    expandedScripts.value.delete(scriptId)
  } else {
    expandedScripts.value.add(scriptId)
  }
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  const statusColorMap: Record<string, string> = {
    '等待': 'orange',
    '运行中': 'blue',
    '已完成': 'green',
    '失败': 'red',
    '暂停': 'gray',
    '取消': 'default'
  }
  return statusColorMap[status] || 'default'
}

// 初始化时展开所有脚本
const initExpandedScripts = () => {
  console.log('初始化展开脚本，数据:', props.taskData)
  props.taskData.forEach(script => {
    console.log('添加展开脚本:', script.script_id, script.name)
    expandedScripts.value.add(script.script_id)
  })
  console.log('展开的脚本集合:', Array.from(expandedScripts.value))
}

// 监听数据变化，自动展开新的脚本
const updateExpandedScripts = () => {
  console.log('更新展开脚本，当前数据:', props.taskData)
  props.taskData.forEach(script => {
    if (!expandedScripts.value.has(script.script_id)) {
      console.log('添加新脚本到展开列表:', script.script_id, script.name)
      expandedScripts.value.add(script.script_id)
    }
  })
  console.log('更新后展开的脚本集合:', Array.from(expandedScripts.value))
}

// 监听 taskData 变化
watch(() => props.taskData, (newData) => {
  console.log('TaskData 发生变化:', newData)
  if (newData && newData.length > 0) {
    updateExpandedScripts()
  }
}, { immediate: true, deep: true })

// 暴露方法供父组件调用
defineExpose({
  expandAll: () => {
    props.taskData.forEach(script => {
      expandedScripts.value.add(script.script_id)
    })
  },
  collapseAll: () => {
    expandedScripts.value.clear()
  },
  updateExpandedScripts
})
</script>

<style scoped>
.task-tree-container {
  width: 100%;
  height: 100%;
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.task-tree {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.script-card {
  background: var(--ant-color-bg-container);
  border-radius: 8px;
  border: 1px solid var(--ant-color-border-secondary);
  overflow: hidden;
  transition: all 0.3s ease;
}

.script-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: var(--ant-color-primary-border);
}

.script-header {
  cursor: pointer;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--ant-color-fill-quaternary) 0%, var(--ant-color-fill-tertiary) 100%);
  transition: all 0.2s ease;
}

.script-header:hover {
  background: linear-gradient(135deg, var(--ant-color-fill-tertiary) 0%, var(--ant-color-fill-secondary) 100%);
}

.script-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.script-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.expand-icon {
  font-size: 14px;
  color: var(--ant-color-primary);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.expand-icon:hover {
  color: var(--ant-color-primary-hover);
}

.script-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ant-color-text);
  word-break: break-word;
}

.user-count {
  font-size: 12px;
  color: var(--ant-color-text-tertiary);
  font-weight: normal;
}

.status-tag {
  flex-shrink: 0;
}

.user-list {
  background: var(--ant-color-bg-layout);
}

.no-users {
  padding: 16px;
}

.no-users-content {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--ant-color-fill-quaternary);
  border-radius: 6px;
  border: 1px dashed var(--ant-color-border);
}

.no-users-text {
  font-size: 13px;
  color: var(--ant-color-text-tertiary);
  font-style: italic;
}

.user-item {
  border-bottom: 1px solid var(--ant-color-border-secondary);
}

.user-item.last-item {
  border-bottom: none;
}

.user-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  transition: all 0.2s ease;
}

.user-content:hover {
  background: var(--ant-color-fill-quaternary);
}

.user-name {
  flex: 1;
  font-size: 14px;
  color: var(--ant-color-text);
  word-break: break-word;
  font-weight: 500;
}

/* 深色模式适配 */
[data-theme="dark"] .script-card,
.dark .script-card {
  background: #1f1f1f;
  border-color: #424242;
}

[data-theme="dark"] .script-card:hover,
.dark .script-card:hover {
  box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
  border-color: #1890ff;
}

[data-theme="dark"] .script-header,
.dark .script-header {
  background: linear-gradient(135deg, #262626 0%, #303030 100%);
}

[data-theme="dark"] .script-header:hover,
.dark .script-header:hover {
  background: linear-gradient(135deg, #303030 0%, #383838 100%);
}

[data-theme="dark"] .script-name,
.dark .script-name {
  color: #ffffff;
}

[data-theme="dark"] .user-count,
.dark .user-count {
  color: #8c8c8c;
}

[data-theme="dark"] .user-list,
.dark .user-list {
  background: #141414;
}

[data-theme="dark"] .no-users-content,
.dark .no-users-content {
  background: #262626;
  border-color: #424242;
}

[data-theme="dark"] .no-users-text,
.dark .no-users-text {
  color: #8c8c8c;
}

[data-theme="dark"] .user-item,
.dark .user-item {
  border-bottom-color: #424242;
}

[data-theme="dark"] .user-content:hover,
.dark .user-content:hover {
  background: #262626;
}

[data-theme="dark"] .user-name,
.dark .user-name {
  color: #ffffff;
}

[data-theme="dark"] .expand-icon,
.dark .expand-icon {
  color: #1890ff;
}

[data-theme="dark"] .expand-icon:hover,
.dark .expand-icon:hover {
  color: #40a9ff;
}

/* 浅色模式适配 */
[data-theme="light"] .script-card,
.light .script-card,
.script-card {
  background: #ffffff;
  border-color: #d9d9d9;
}

[data-theme="light"] .script-card:hover,
.light .script-card:hover,
.script-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-color: #1890ff;
}

[data-theme="light"] .script-header,
.light .script-header,
.script-header {
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
}

[data-theme="light"] .script-header:hover,
.light .script-header:hover,
.script-header:hover {
  background: linear-gradient(135deg, #f5f5f5 0%, #f0f0f0 100%);
}

[data-theme="light"] .script-name,
.light .script-name,
.script-name {
  color: #262626;
}

[data-theme="light"] .user-count,
.light .user-count,
.user-count {
  color: #8c8c8c;
}

[data-theme="light"] .user-list,
.light .user-list,
.user-list {
  background: #fafafa;
}

[data-theme="light"] .no-users-content,
.light .no-users-content,
.no-users-content {
  background: #f5f5f5;
  border-color: #d9d9d9;
}

[data-theme="light"] .no-users-text,
.light .no-users-text,
.no-users-text {
  color: #8c8c8c;
}

[data-theme="light"] .user-item,
.light .user-item,
.user-item {
  border-bottom-color: #f0f0f0;
}

[data-theme="light"] .user-content:hover,
.light .user-content:hover,
.user-content:hover {
  background: #f5f5f5;
}

[data-theme="light"] .user-name,
.light .user-name,
.user-name {
  color: #262626;
}

[data-theme="light"] .expand-icon,
.light .expand-icon,
.expand-icon {
  color: #1890ff;
}

[data-theme="light"] .expand-icon:hover,
.light .expand-icon:hover,
.expand-icon:hover {
  color: #40a9ff;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .task-tree {
    gap: 8px;
  }
  
  .script-header {
    padding: 10px 12px;
  }
  
  .script-name {
    font-size: 14px;
  }
  
  .user-count {
    font-size: 11px;
  }
  
  .user-content {
    padding: 8px 12px;
  }
  
  .user-name {
    font-size: 13px;
  }
  
  .no-users {
    padding: 12px;
  }
}

/* 动画效果 */
.user-list {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.script-card {
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>