<script lang="ts" setup>
import { useTagsViewStore } from '@/store/modules/tagsView'
import { useAppStore } from '@/store/modules/app'
import { useRouter, useRoute } from 'vue-router'
import { computed, ref } from 'vue'

defineOptions({ name: 'MobileLayout' })

const router = useRouter()
const route = useRoute()
const appStore = useAppStore()
const tagsViewStore = useTagsViewStore()

const getCaches = computed((): string[] => {
  return tagsViewStore.getCachedViews
})

// 当前页面标题
const pageTitle = computed(() => {
  return (route.meta?.title as string) || '首页'
})

// 底部Tab配置
const tabs = [
  { name: 'Index', path: '/index', label: '首页', icon: 'home' },
  { name: 'Workbench', path: '/index', label: '工作台', icon: 'workbench' },
  { name: 'Function', path: '/function', label: '功能', icon: 'function' },
  { name: 'Mine', path: '/user/center', label: '我的', icon: 'mine' }
]

const activeTab = computed(() => {
  const p = route.path
  if (p === '/index' || p === '/') return 'Index'
  if (p === '/function' || p.startsWith('/function/')) return 'Function'
  if (p.includes('/user/center')) return 'Mine'
  return 'Index'
})

const handleTabClick = (tab: typeof tabs[0]) => {
  if (tab.path && tab.path !== route.path) {
    router.push(tab.path)
  }
}

// 是否显示返回按钮（首页不显示）
const showBack = computed(() => {
  const p = route.path
  return p !== '/' && p !== '/index'
})

// 返回上一页
const goBack = () => {
  router.back()
}

// 无感刷新
const routerAlive = ref(true)
const reload = () => {
  routerAlive.value = false
  nextTick(() => (routerAlive.value = true))
}
provide('reload', reload)
</script>

<template>
  <div class="mobile-layout">
    <!-- 顶部标题栏 -->
    <div class="mobile-layout__header">
      <div class="mobile-layout__back" v-if="showBack" @click="goBack">
        <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
          <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
        </svg>
      </div>
      <div class="mobile-layout__back-placeholder" v-else></div>
      <div class="mobile-layout__title">{{ pageTitle }}</div>
      <div class="mobile-layout__header-right"></div>
    </div>

    <!-- 内容区域 -->
    <div class="mobile-layout__content">
      <router-view v-if="routerAlive">
        <template #default="{ Component, route: r }">
          <keep-alive :include="getCaches">
            <component :is="Component" :key="r.fullPath" />
          </keep-alive>
        </template>
      </router-view>
    </div>

    <!-- 底部Tab栏 -->
    <div class="mobile-layout__tabbar">
      <div
        v-for="tab in tabs"
        :key="tab.name"
        class="mobile-layout__tab"
        :class="{ 'mobile-layout__tab--active': activeTab === tab.name }"
        @click="handleTabClick(tab)"
      >
        <div class="mobile-layout__tab-icon">
          <!-- 首页 -->
          <svg v-if="tab.icon === 'home'" viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
            <path d="M12 3L4 9v12h5v-7h6v7h5V9z"/>
          </svg>
          <!-- 工作台 -->
          <svg v-else-if="tab.icon === 'workbench'" viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
            <path d="M20 6h-4V4c0-1.1-.9-2-2-2h-4c-1.1 0-2 .9-2 2v2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zM10 4h4v2h-4V4zm10 16H4V8h16v12z"/>
          </svg>
          <!-- 功能 -->
          <svg v-else-if="tab.icon === 'function'" viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
            <path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/>
          </svg>
          <!-- 我的 -->
          <svg v-else-if="tab.icon === 'mine'" viewBox="0 0 24 24" width="22" height="22" fill="currentColor">
            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
          </svg>
        </div>
        <span class="mobile-layout__tab-label">{{ tab.label }}</span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mobile-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  background: #f5f5f5;
  overflow: hidden;
}

.mobile-layout__header {
  height: 44px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
  padding: 0 12px;
}

.mobile-layout__back {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #303133;
  border-radius: 6px;
  transition: background 0.2s;
  flex-shrink: 0;

  &:active {
    background: #f0f0f0;
  }
}

.mobile-layout__back-placeholder {
  width: 32px;
  flex-shrink: 0;
}

.mobile-layout__header-right {
  width: 32px;
  flex-shrink: 0;
}

.mobile-layout__title {
  font-size: 17px;
  font-weight: 600;
  color: #303133;
  flex: 1;
  text-align: center;
}

.mobile-layout__content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-layout__tabbar {
  height: 56px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1px solid #eee;
  flex-shrink: 0;
  position: relative;
  z-index: 100;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-layout__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  cursor: pointer;
  color: #909399;
  transition: color 0.2s;

  &--active {
    color: #409eff;
  }
}

.mobile-layout__tab-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-layout__tab-label {
  font-size: 10px;
  margin-top: 2px;
  line-height: 1;
}
</style>
