<script setup lang="ts">
/**
 * 个人中心页面 — 我的
 *
 * 设计规格：
 *  - NavBar: #1E74FF 背景, 透明标题区域, 右侧白色图标
 *  - 顶部区域: 蓝色渐变背景 (264px), 用户头像 (56px 圆形) + 姓名/部门白色文字浮动其上
 *  - 快捷入口: 3 列网格 (我的待办 / 我的已办 / 我的发起), 待办 Badge 角标
 *  - 设置列表: van-cell-group, 图标 (edit / replay / orders-o), 版本信息
 *  - 退出登录: 白色按钮, 红色文字, 圆角, 块级
 */
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast, showDialog } from 'vant'
import { useUserStore } from '@/stores/user'

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

// ── 快捷入口 ──
interface Shortcut {
  id: string
  label: string
  icon: string
  badge?: number
  route?: string
}

const shortcuts: Shortcut[] = [
  { id: 'pending', label: '我的待办', icon: 'todo-list-o', badge: 5, route: '/inspection' },
  { id: 'done', label: '我的已办', icon: 'passed', route: '/inspectionRecords' },
  { id: 'initiated', label: '我的发起', icon: 'add-square', route: '/inspectionProblem' },
]

// ── 设置项 ──
interface SettingItem {
  id: string
  label: string
  icon: string
  route?: string
  action?: () => void
}

const settings: SettingItem[] = [
  {
    id: 'resetPwd',
    label: '修改密码',
    icon: 'edit',
    route: '/mine/resetPwd',
  },
  {
    id: 'clearCache',
    label: '清空缓存',
    icon: 'replay',
    action: onClearCache,
  },
  {
    id: 'privacyPolicy',
    label: '隐私政策',
    icon: 'orders-o',
    route: '/mine/privacyPolicy',
  },
  {
    id: 'version',
    label: '版本信息',
    icon: 'info-o',
    action: onShowVersion,
  },
]

// ── 快捷入口点击 ──
function onShortcutClick(item: Shortcut): void {
  if (item.route) {
    router.push(item.route)
  }
}

// ── 设置项点击 ──
function onSettingClick(item: SettingItem): void {
  if (item.route) {
    router.push(item.route)
  } else if (item.action) {
    item.action()
  }
}

// ── 清空缓存 ──
function onClearCache(): void {
  showDialog({
    title: '提示',
    message: '确定要清空缓存吗？',
  })
    .then(() => {
      showToast('缓存已清空')
    })
    .catch(() => {})
}

// ── 版本信息 ──
function onShowVersion(): void {
  showToast('版本 v2.0.0')
}

// ── 退出登录 ──
async function onLogout(): Promise<void> {
  try {
    await userStore.logout()
    router.replace('/login')
  } catch {
    router.replace('/login')
  }
}
</script>

<template>
  <div class="mine-page">
    <!-- ═══════════ 顶部导航栏 ═══════════ -->
    <van-nav-bar title="我的" fixed placeholder>
      <template #right>
        <van-icon name="setting-o" size="20" @click="router.push('/menuEdit')" />
        <van-icon name="bell" size="20" style="margin-left: 14px" @click="router.push('/noticeList')" />
      </template>
    </van-nav-bar>

    <!-- ═══════════ 页面主体 ═══════════ -->
    <div class="mine-body">
      <!-- ── 顶部蓝色渐变区域 ── -->
      <div class="mine-header">
        <div class="header-bg"></div>
        <div class="header-user">
          <div class="user-avatar">
            <van-icon name="user-o" size="28" color="#ffffff" />
          </div>
          <div class="user-text">
            <span class="user-name">{{ userStore.userName || '未登录' }}</span>
            <span class="user-dept">{{ userStore.userInfo?.deptName || '' }}</span>
          </div>
        </div>
      </div>

      <!-- ── 快捷入口 ── -->
      <div class="shortcuts">
        <div
          v-for="item in shortcuts"
          :key="item.id"
          class="shortcut-item"
          @click="onShortcutClick(item)"
        >
          <div class="shortcut-icon-box">
            <van-icon :name="item.icon" size="22" color="#1E74FF" />
            <span v-if="item.badge" class="shortcut-badge">{{ item.badge }}</span>
          </div>
          <span class="shortcut-label">{{ item.label }}</span>
        </div>
      </div>

      <!-- ── 设置列表 ── -->
      <van-cell-group inset class="setting-group">
        <van-cell
          v-for="item in settings"
          :key="item.id"
          :title="item.label"
          is-link
          @click="onSettingClick(item)"
        >
          <template #icon>
            <van-icon :name="item.icon" size="18" color="#1E74FF" class="cell-icon" />
          </template>
        </van-cell>
      </van-cell-group>

      <!-- ── 退出登录 ── -->
      <div class="logout-wrapper">
        <van-button round block class="logout-btn" @click="onLogout">
          退出登录
        </van-button>
      </div>

      <!-- 底部安全区占位 -->
      <div class="safe-bottom"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.mine-page {
  min-height: 100vh;
  background: var(--color-bg-page, #f4f7f8);
  display: flex;
  flex-direction: column;

  // ── 导航栏 ──
  :deep(.van-nav-bar) {
    background: #1E74FF;

    .van-nav-bar__title {
      color: #ffffff;
    }

    .van-nav-bar__left,
    .van-nav-bar__right {
      .van-icon {
        color: #ffffff;
      }
    }
  }
}

// ── 页面主体 ──
.mine-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

// ── 头部蓝色渐变区域 ──
.mine-header {
  position: relative;
  width: 100%;
  height: 264px;
  overflow: hidden;

  .header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, #1E74FF 0%, #64B5F6 100%);
  }

  .header-user {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 60px 24px 0;
  }

  .user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.4);
  }

  .user-text {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .user-name {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1;
  }

  .user-dept {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1;
  }
}

// ── 快捷入口 ──
.shortcuts {
  display: flex;
  margin: -20px 12px 12px;
  padding: 18px 0;
  background: #ffffff;
  border-radius: 10px;
  position: relative;
  z-index: 2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.shortcut-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;

  &:active {
    opacity: 0.7;
  }
}

.shortcut-icon-box {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f0f6ff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.shortcut-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #ee0a24;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  padding: 0 4px;
}

.shortcut-label {
  font-size: 13px;
  color: var(--color-text-regular, #666);
}

// ── 设置列表 ──
.setting-group {
  margin: 0 12px 12px;

  :deep(.van-cell-group) {
    border-radius: 10px;
    overflow: hidden;
  }

  :deep(.van-cell) {
    align-items: center;
  }

  .cell-icon {
    margin-right: 8px;
  }
}

// ── 退出登录 ──
.logout-wrapper {
  margin: 24px 16px 0;
}

.logout-btn {
  :deep(.van-button__text) {
    color: #ee0a24;
  }

  :deep(.van-button) {
    background: #ffffff;
    border: none;
  }
}

// ── 底部安全区 ──
.safe-bottom {
  height: 16px;
}
</style>
