<!--
=============================================================================
企微IT智能服务台 — 通用占位页
=============================================================================
说明：通用占位页面模板
  - 居中"开发中"提示
  - 返回首页按钮
  - 可配置标题和描述
-->
<template>
  <div class="placeholder-center">
    <!-- 图标 -->
    <div class="placeholder-icon">
      <el-icon :size="64">
        <Tools />
      </el-icon>
    </div>

    <!-- 标题 -->
    <div class="placeholder-title">{{ title }}</div>

    <!-- 描述 -->
    <div class="placeholder-desc">{{ description }}</div>

    <!-- 返回按钮 -->
    <el-button type="primary" @click="goHome">
      <el-icon><HomeFilled /></el-icon>
      返回运营总览
    </el-button>
  </div>
</template>

<script setup lang="ts">
// ==========================================================================
// 依赖导入
// ==========================================================================
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

// ==========================================================================
// 路由
// ==========================================================================
const router = useRouter()
const route = useRoute()

// ==========================================================================
// 动态标题/描述
// ==========================================================================
const title = computed(() => {
  const metaTitle = route.meta.title as string
  if (route.path === '/:pathMatch(.*)*') return '页面未找到'
  return metaTitle || '功能开发中'
})

const description = computed(() => {
  if (route.path === '/:pathMatch(.*)*') return '您访问的页面不存在'
  if (route.meta.comingSoon) return '该功能正在开发中，敬请期待'
  return '此功能将在后续版本中开放，请关注版本更新'
})

// ==========================================================================
// 返回首页
// ==========================================================================
function goHome(): void {
  router.push('/dashboard')
}
</script>
