<template>
  <a-layout class="tabs-layout">
    <a-layout-header class="header">
      <div class="logo">闪兔到家后台管理系统</div>
      <div class="header-right">
        <a-space>
          <a-button type="link" icon><SearchOutlined /></a-button>
          <a-button type="link" icon><QuestionCircleOutlined /></a-button>
          <a-dropdown>
            <a-button type="link">
              {{ username }}
              <DownOutlined />
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item key="logout" @click="handleLogout">
                  退出登录
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </a-space>
      </div>
    </a-layout-header>

    <a-layout>
      <a-layout-sider width="256" class="sider">
        <a-menu
          mode="inline"
          :selectedKeys="[activeMenu]"
          :openKeys="openKeys"
          @select="handleMenuSelect"
          @openChange="handleOpenChange"
        >
          <a-sub-menu key="user">
            <template #title>
              <span>
                <UserOutlined />
                <span>用户管理</span>
              </span>
            </template>
            <a-menu-item key="/user/list">用户列表</a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="community">
            <template #title>
              <span>
                <HomeOutlined />
                <span>小区管理</span>
              </span>
            </template>
            <a-menu-item key="/community/list">小区列表</a-menu-item>
            <a-menu-item key="/community/building">楼栋列表</a-menu-item>
          </a-sub-menu>

          <a-sub-menu key="station">
            <template #title>
              <span>
                <ShopOutlined />
                <span>驿站管理</span>
              </span>
            </template>
            <a-menu-item key="/station/list">驿站列表</a-menu-item>
          </a-sub-menu>
        </a-menu>
      </a-layout-sider>

      <a-layout-content class="content">
        <div class="tabs-wrapper">
          <a-tabs
            v-model:activeKey="activeTab"
            type="editable-card"
            @edit="handleTabEdit"
            @change="handleTabChange"
            hide-add
          >
            <a-tab-pane
              v-for="tab in tabs"
              :key="tab.key"
              :tab="tab.title"
              :closable="tab.closable"
            />
          </a-tabs>
        </div>
        <div class="content-wrapper">
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
import { defineComponent, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {
  SearchOutlined,
  QuestionCircleOutlined,
  DownOutlined,
  UserOutlined,
  HomeOutlined,
  ShopOutlined
} from '@ant-design/icons-vue'

export default defineComponent({
  components: {
    SearchOutlined,
    QuestionCircleOutlined,
    DownOutlined,
    UserOutlined,
    HomeOutlined,
    ShopOutlined
  },

  setup() {
    const router = useRouter()
    const route = useRoute()
    const activeTab = ref('')
    const activeMenu = ref('')
    const openKeys = ref(['user', 'community'])
    const username = ref('')

    const tabs = ref([
      {
        title: '工作台',
        key: '/dashboard',
        closable: false
      }
    ])

    // 获取用户信息
    const getUserInfo = () => {
      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
      username.value = userInfo.username || '未登录'
    }

    // 在组件挂载时获取用户信息
    getUserInfo()

    // 监听路由变化
    watch(
      () => route.path,
      (newPath) => {
        activeMenu.value = newPath
        const existTab = tabs.value.find(tab => tab.key === newPath)
        if (!existTab) {
          tabs.value.push({
            title: route.meta.title,
            key: newPath,
            closable: true
          })
        }
        activeTab.value = newPath
      },
      { immediate: true }
    )

    // 处理标签页切换
    const handleTabChange = (key) => {
      router.push(key)
    }

    // 处理标签页编辑（关闭）
    const handleTabEdit = (targetKey, action) => {
      if (action === 'remove') {
        const targetIndex = tabs.value.findIndex(tab => tab.key === targetKey)
        if (targetIndex === -1) return

        // 如果关闭的是当前页，需要跳转到其他页面
        if (targetKey === activeTab.value) {
          const newActiveKey = tabs.value[targetIndex - 1]?.key || tabs.value[targetIndex + 1]?.key
          if (newActiveKey) {
            router.push(newActiveKey)
          }
        }

        // 移除标签页
        tabs.value = tabs.value.filter(tab => tab.key !== targetKey)
      }
    }

    // 处理菜单选择
    const handleMenuSelect = ({ key }) => {
      router.push(key)
    }

    // 处理子菜单展开/收起
    const handleOpenChange = (keys) => {
      openKeys.value = keys
    }

    // 处理退出登录
    const handleLogout = () => {
      localStorage.removeItem('token')
      localStorage.removeItem('userInfo')
      router.push('/login')
    }

    return {
      activeTab,
      activeMenu,
      openKeys,
      tabs,
      username,
      handleTabChange,
      handleTabEdit,
      handleMenuSelect,
      handleOpenChange,
      handleLogout
    }
  }
})
</script>

<style scoped>
.tabs-layout {
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  z-index: 10;
}

.logo {
  font-size: 16px;
  color: #1890ff;
  white-space: nowrap;
}

.header-right {
  display: flex;
  align-items: center;
}

.sider {
  background: #fff;
  box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
}

.content {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: #f0f2f5;
}

.tabs-wrapper {
  padding: 6px 6px 0;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.content-wrapper {
  flex: 1;
  padding: 16px;
  overflow: auto;
}

:deep(.ant-tabs-nav) {
  margin: 0;
}

:deep(.ant-tabs-tab) {
  border: none !important;
  background: transparent !important;
  padding: 8px 16px !important;
}

:deep(.ant-tabs-tab-active) {
  background: #e6f7ff !important;
}

:deep(.ant-tabs-tab-btn) {
  color: #666 !important;
}

:deep(.ant-tabs-tab-active .ant-tabs-tab-btn) {
  color: #1890ff !important;
}

:deep(.ant-menu-item) {
  margin: 0 !important;
}
</style> 