<script setup lang="ts">
import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
import { getPlatformConfig, getPlatformRoutePrefix } from '@af-mobile-client-vue3/types/platform'
import {
  Icon as VanIcon,
} from 'vant'
import { computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const userStore = useUserStore()

const userInfo = computed(() => userStore.getUserInfo())
const userName = computed(() => userInfo.value?.name || '外部用户')
const platformType = computed(() => userStore.getPlatformType())
const platformConfig = computed(() => getPlatformConfig(platformType.value))
const userDescription = computed(() =>
  platformConfig.value?.description || '外部系统访问用户',
)

function goToProfile() {
  const routePrefix = getPlatformRoutePrefix(platformType.value)
  router.push(`${routePrefix}/my`)
}
async function clean() {
  await useUserStore().registerClean()
}
</script>

<template>
  <main class="external_main">
    <!-- 顶部导航栏 -->
    <nav class="header_nav">
      <div class="header_content">
        <h1 class="main_title">
          智慧燃气外部系统
        </h1>
        <div class="user_section" @click="goToProfile">
          <VanIcon name="user-o" class="user-icon" />
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="content">
      <!-- 用户信息卡片 -->
      <div class="user-card">
        <div class="user-content">
          <div class="user-info">
            <VanIcon name="user-circle-o" size="64" color="#3b82f6" />
            <h2 class="user-name">
              {{ userName }}
            </h2>
            <p class="user-desc">
              {{ userDescription }}
            </p>
            <p v-if="platformConfig" class="platform-name">
              {{ platformConfig.name }}
            </p>
            <p class="platform-name" @click="clean">
              清理缓存
            </p>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<style scoped lang="less">
.external_main {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  .header_nav {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 0 16px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    .header_content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 56px;

      .main_title {
        font-size: 1.125rem;
        font-weight: 600;
        color: #333;
        margin: 0;
      }

      .user_section {
        padding: 8px;
        cursor: pointer;
        border-radius: 50%;
        background: rgba(59, 130, 246, 0.1);
        transition: all 0.3s ease;

        &:active {
          background: rgba(59, 130, 246, 0.2);
        }

        .user-icon {
          font-size: 20px;
          color: #3b82f6;
        }
      }
    }
  }

  .content {
    padding: 24px 16px;
    display: flex;
    justify-content: center;

    .user-card {
      width: 100%;
      max-width: 400px;
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);

      :deep(.van-card__content) {
        padding: 32px 24px;
      }

      .user-content {
        .user-info {
          text-align: center;

          .user-name {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin: 16px 0 8px 0;
          }

          .user-desc {
            font-size: 14px;
            color: #666;
            margin: 0;
          }

          .platform-name {
            font-size: 12px;
            color: #3b82f6;
            margin: 4px 0 0 0;
            font-weight: 500;
          }
        }
      }
    }
  }
}
</style>
