<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 navItems"
            :key="item.type"
            class="task-layout__nav-item"
            :class="{
              'is-active': currentType === item.type
            }"
          >
            <a
              href="javascript:void(0)"
              class="task-layout__nav-link"
              @click="navigateTo(item.type)"
            >
              <span class="nav-icon" v-html="icons[item.icon]"></span>
              <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>

    <!-- 移动端菜单按钮 -->
    <a-button
      v-if="isMobile"
      class="task-layout__mobile-btn"
      type="primary"
      shape="circle"
      size="large"
      @click="showMobileNav = !showMobileNav"
    >
      <template #icon>
        <MenuOutlined />
      </template>
    </a-button>

    <!-- 移动端遮罩层 -->
    <a-drawer
      v-model:open="showMobileNav"
      placement="left"
      :width="220"
      :closable="false"
      class="task-layout__mobile-drawer"
    >
      <div class="task-layout__mobile-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 navItems"
            :key="item.type"
            class="task-layout__nav-item"
            :class="{
              'is-active': currentType === item.type
            }"
          >
            <a
              href="javascript:void(0)"
              class="task-layout__nav-link"
              @click="navigateTo(item.type, true)"
            >
              <span class="nav-icon" v-html="icons[item.icon]"></span>
              <span class="nav-text">{{ item.label }}</span>
            </a>
          </li>
        </ul>
      </div>
    </a-drawer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { MenuOutlined } from '@ant-design/icons-vue'

// 响应式数据
const route = useRoute()
const router = useRouter()
const showMobileNav = ref(false)
const windowWidth = ref(window.innerWidth)

// 单色 SVG 图标（填充 currentColor，可继承文本色）
const icons = {
  video: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2" ry="2"/></svg>',
  user: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" width="18" height="18"><circle cx="12" cy="7" r="4"/><path d="M5.5 21a8.38 8.38 0 0 1 13 0"/></svg>'
}

// 计算属性
const isMobile = computed(() => windowWidth.value < 768)
const isTablet = computed(() => windowWidth.value >= 768 && windowWidth.value < 1200)

// 当前任务类型 - 使用路由name来激活高亮
const currentType = computed(() => {
  // 使用路由的params.type，如果不存在则默认使用mix-task
  const type = route.params.type

  // 如果类型无效或为空，默认使用 mix-task
  if (!type || type === 'task-management') {
    return 'mix-task'
  }

  return type
})

// 动态导入组件
const MixTaskList = defineAsyncComponent(() => import('../mix-task/index.vue'))
const DigitalHumanTaskList = defineAsyncComponent(() => import('../digital-human-task/index.vue'))

// 导航项配置
const navItems = [
  {
    type: 'mix-task',
    label: '混剪视频任务',
    icon: 'video',
    component: MixTaskList
  },
  {
    type: 'digital-human-task',
    label: '数字人视频任务',
    icon: 'user',
    component: DigitalHumanTaskList
  }
]

// 当前组件
const currentComponent = computed(() => {
  const item = navItems.find(item => item.type === currentType.value)
  if (!item) {
    return navItems[0].component
  }
  return item.component
})

// 导航到指定类型
const navigateTo = (type, closeMobile = false) => {
  router.push(`/system/task-management/${type}`)
  if (closeMobile) {
    showMobileNav.value = false
  }
}

// 更新窗口宽度
const updateWindowWidth = () => {
  windowWidth.value = window.innerWidth
}

// 生命周期钩子
onMounted(() => {
  window.addEventListener('resize', updateWindowWidth)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateWindowWidth)
})
</script>

<style scoped>
.task-layout {
  display: flex;
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* 左侧导航 */
.task-layout__sidebar {
  width: 220px;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  flex-shrink: 0;
  overflow-y: auto;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .task-layout__sidebar {
    width: 200px;
  }
}

@media (max-width: 767px) {
  .task-layout__sidebar {
    display: none;
  }
}

/* 导航头部 */
.task-layout__nav-header {
  padding: 24px 16px;
  border-bottom: 1px solid var(--color-border);
}

.task-layout__nav-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

/* 导航列表 */
.task-layout__nav-list {
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

/* 导航项 */
.task-layout__nav-item {
  margin: 4px 8px;
}

.task-layout__nav-item.is-active .task-layout__nav-link {
  background: var(--color-primary);
  color: #fff;
}

.task-layout__nav-item.is-active .nav-icon {
  color: #fff;
}

/* 导航链接 */
.task-layout__nav-link {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-radius: var(--radius-card);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: all 0.2s;
  cursor: pointer;
}

.task-layout__nav-link:hover {
  background: var(--color-bg-2);
  color: var(--color-primary);
}

.task-layout__nav-item.is-active .task-layout__nav-link:hover {
  background: var(--color-primary);
  color: #fff;
}

/* 导航图标 */
.nav-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 12px;
  color: var(--color-text-3);
  transition: color 0.2s;
}

.task-layout__nav-item.is-active .nav-icon {
  color: #fff;
}

/* 导航文本 */
.nav-text {
  font-size: 14px;
  font-weight: 500;
}

/* 右侧内容 */
.task-layout__content {
  flex: 1;
  overflow: auto;
  background: var(--color-bg);
  padding: 0;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 移动端按钮 */
.task-layout__mobile-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (min-width: 768px) {
  .task-layout__mobile-btn {
    display: none;
  }
}

/* 移动端抽屉 */
.task-layout__mobile-drawer :deep(.ant-drawer-body) {
  padding: 0;
  background: var(--color-surface);
}

.task-layout__mobile-nav {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.task-layout__mobile-nav .task-layout__nav-header {
  background: var(--color-surface);
}

.task-layout__mobile-nav .task-layout__nav-list {
  flex: 1;
  overflow-y: auto;
  background: var(--color-surface);
}
</style>
