<template>
  <div class="task-layout">
    <!-- 左侧导航 -->
    <aside class="task-layout__sidebar">
      <nav class="task-layout__nav">
        <div class="task-layout__nav-header">
          <h2 class="task-layout__nav-title">任务管理</h2>
        </div>
        <ul class="task-layout__nav-list">
          <li
            v-for="item in NAV_ITEMS"
            :key="item.type"
            class="task-layout__nav-item"
            :class="{ 'is-active': currentType === item.type }"
          >
            <a class="task-layout__nav-link" @click="navigateTo(item.type)">
              <component :is="item.icon" class="nav-icon" />
              <span class="nav-text">{{ item.label }}</span>
            </a>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- 右侧内容 -->
    <main class="task-layout__content">
      <transition name="fade" mode="out-in">
        <component :is="currentComponent" :key="currentType" />
      </transition>
    </main>
  </div>
</template>

<script setup>
import { computed, defineAsyncComponent, markRaw } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { VideoCameraOutlined, UserOutlined } from '@ant-design/icons-vue'

const route = useRoute()
const router = useRouter()

const currentType = computed(() => {
  const { type } = route.params
  return !type || type === 'task-management' ? 'mix-task' : type
})

const NAV_ITEMS = [
  {
    type: 'mix-task',
    label: '混剪视频任务',
    icon: VideoCameraOutlined,
    component: markRaw(defineAsyncComponent(() => import('../mix-task/index.vue')))
  },
  {
    type: 'digital-human-task',
    label: '数字人视频任务',
    icon: UserOutlined,
    component: markRaw(defineAsyncComponent(() => import('../digital-human-task/index.vue')))
  }
]

const currentComponent = computed(() => {
  return NAV_ITEMS.find(item => item.type === currentType.value)?.component ?? NAV_ITEMS[0].component
})

const navigateTo = (type) => {
  router.push(`/system/task-management/${type}`)
}
</script>

<style scoped lang="less">
.task-layout {
  display: flex;
  height: 100%;
  overflow: hidden;
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.task-layout__sidebar {
  width: 220px;
  background: transparent;
  border-right: 1px solid var(--color-gray-200);
  flex-shrink: 0;
  overflow-y: auto;
}

.task-layout__nav-header {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-gray-200);
}

.task-layout__nav-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-gray-800);
}

.task-layout__nav-list {
  list-style: none;
  padding: var(--space-2) 0;
  margin: 0;
}

.task-layout__nav-item {
  margin: var(--space-1) var(--space-3);

  &.is-active .task-layout__nav-link {
    background: var(--color-primary-500);
    color: #fff;
    box-shadow: var(--shadow-sm);

    .nav-icon {
      color: #fff;
    }
  }
}

.task-layout__nav-link {
  display: flex;
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-gray-600);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);

  &:hover {
    background: var(--color-gray-100);
    color: var(--color-primary-500);
  }

  .is-active &:hover {
    background: var(--color-primary-600);
    color: #fff;
  }
}

.nav-icon {
  width: 18px;
  height: 18px;
  margin-right: var(--space-2);
  color: var(--color-gray-500);
}

.nav-text {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
}

.task-layout__content {
  flex: 1;
  overflow: auto;
  background: var(--color-bg-page);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity var(--duration-base) var(--ease-out);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
