<script setup lang="ts">
import { computed } from 'vue'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()

// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

// 获取用户信息
const userInfo = computed(() => userStore.getUserInfo)

// 功能菜单项
const menuItems = [
  {
    icon: 'i-carbon:locked',
    title: '修改密码',
    action: () => handleMenuClick('password'),
  },
  {
    icon: 'i-carbon:security',
    title: '隐私政策',
    action: () => handleMenuClick('privacy'),
  },
  {
    icon: 'i-carbon:chat',
    title: '联系客服',
    action: () => handleMenuClick('service'),
  },
]

// 菜单点击处理
function handleMenuClick(type: string) {
  switch (type) {
    case 'password':
      uni.showToast({
        title: '修改密码功能开发中',
        icon: 'none',
      })
      break
    case 'privacy':
      uni.showToast({
        title: '隐私政策功能开发中',
        icon: 'none',
      })
      break
    case 'service':
      uni.showToast({
        title: '联系客服功能开发中',
        icon: 'none',
      })
      break
  }
}

// 退出登录
function handleLogout() {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    confirmColor: '#3B82F6',
    success: (res) => {
      if (res.confirm) {
        userStore.logOut()
        uni.reLaunch({
          url: '/pages/auth/index',
        })
      }
    },
  })
}

// 获取用户角色显示文本
const getRoleText = computed(() => {
  const roles = userInfo.value.roles
  if (roles && roles.length > 0) {
    return roles[0].name || '教师/班主任'
  }
  return '教师/班主任'
})

// 获取用户头像
const getAvatarSrc = computed(() => {
  return '/static/images/default-avatar.png'
})

// 获取图标背景颜色类
function getIconBgClass(index: number) {
  const bgClasses = [
    'bg-blue-50', // 修改密码
    'bg-cyan-50', // 隐私政策
    'bg-sky-50', // 联系客服
  ]
  return bgClasses[index] || 'bg-blue-50'
}

// 获取图标颜色类
function getIconColorClass(index: number) {
  const colorClasses = [
    'text-blue-500', // 修改密码
    'text-cyan-500', // 隐私政策
    'text-sky-500', // 联系客服
  ]
  return colorClasses[index] || 'text-blue-500'
}
</script>

<template>
  <view class="bg-slate-50">
    <!-- 顶部背景装饰 -->
    <div class="absolute left-0 right-0 top-0 z-0 h-200px rounded-b-2xl from-cyan-400 to-blue-500 bg-gradient-to-br" />

    <!-- 顶部用户信息区域 -->
    <view class="relative px-4 pb-4 pt-2" :style="{ paddingTop: `${(safeAreaInsets?.top || 0) + 8}px` }">
      <!-- 用户信息容器 -->
      <view class="relative z-10 flex flex-col items-center">
        <!-- 头像容器 -->
        <view class="mb-3 h-80px w-80px overflow-hidden">
          <view class="h-full w-full rounded-2xl bg-white shadow-lg">
            <image :src="getAvatarSrc" class="h-full w-full rounded-xl" mode="aspectFill" />
          </view>
        </view>

        <!-- 用户名 -->
        <text class="mb-2 text-xl text-white font-semibold drop-shadow-sm">
          {{ userInfo.nickname || "王**" }}
        </text>

        <!-- 角色信息 -->
        <view class="rounded-full bg-white/20 px-3 py-1 backdrop-blur-sm">
          <text class="text-sm text-white/90">角色：{{ getRoleText }}</text>
        </view>
      </view>
    </view>

    <!-- 主要内容区域 -->
    <view class="relative z-10 mx-2 min-h-[calc(100vh-200px)] rounded-t-3xl bg-white px-2 pt-4">
      <!-- 账号和学校信息卡片 -->
      <view class="grid grid-cols-2 mx-2 mb-4 gap-3">
        <!-- 账号信息 -->
        <view class="border border-blue-100 rounded-xl from-white to-blue-50 bg-gradient-to-br p-4 shadow-blue-50 shadow-sm">
          <view class="mb-1 flex items-center">
            <view class="i-mingcute:user-line mr-1 text-base text-blue-500" />
            <text class="text-xs text-slate-600">账号信息</text>
          </view>
          <text class="text-base text-slate-800 font-bold">
            {{ userInfo.phone || "17622222222" }}
          </text>
        </view>

        <!-- 所属学校 -->
        <view class="border border-cyan-100 rounded-xl from-white to-cyan-50 bg-gradient-to-br p-4 shadow-cyan-50 shadow-sm">
          <view class="mb-1 flex items-center">
            <view class="i-mingcute:school-line mr-1 text-base text-cyan-500" />
            <text class="text-xs text-slate-600">所属学校</text>
          </view>
          <text class="text-base text-slate-800 font-bold">
            {{ userInfo.schools?.[0]?.name || "光谷四小" }}
          </text>
        </view>
      </view>

      <!-- 功能菜单标题 -->
      <view class="mx-2 mb-3">
        <text class="text-lg text-slate-800 font-semibold">功能菜单</text>
      </view>

      <!-- 功能菜单 -->
      <view class="mx-2 mb-4 overflow-hidden border border-blue-100 rounded-2xl bg-white shadow-blue-50 shadow-sm">
        <view
          v-for="(item, index) in menuItems"
          :key="index"
          class="flex items-center px-4 py-4 transition-colors active:bg-blue-50"
          :class="{ 'border-b border-blue-100': index < menuItems.length - 1 }"
          @tap="item.action"
        >
          <!-- 图标 -->
          <view
            class="mr-3 h-10 w-10 flex items-center justify-center rounded-xl transition-all"
            :class="getIconBgClass(index)"
          >
            <view class="text-18px" :class="[item.icon, getIconColorClass(index)]" />
          </view>

          <!-- 标题 -->
          <text class="flex-1 text-base text-slate-800 font-medium">
            {{ item.title }}
          </text>

          <!-- 右箭头 -->
          <view class="i-carbon:chevron-right text-16px text-blue-400 transition-transform active:scale-110" />
        </view>
      </view>

      <!-- 退出登录按钮 -->
      <view class="mx-2 mt-6">
        <button
          class="h-52px w-full rounded-xl from-blue-500 to-cyan-500 bg-gradient-to-r text-white font-semibold shadow-blue-200 shadow-lg transition-all active:scale-98 !border-none active:shadow-md !outline-none"
          @tap="handleLogout"
        >
          退出登录
        </button>
      </view>

      <!-- 版本信息 -->
      <view class="mt-8 pb-6 text-center">
        <text class="text-xs text-slate-400">版本号 v1.0.0</text>
      </view>
    </view>
  </view>
</template>

<route lang="jsonc" type="home">
{
  "layout": "tabbar",
  "style": {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    "navigationStyle": "custom",
    "navigationBarTitleText": "我的"
  }
}
</route>
