<template>
  <view class="profile-page">
    <!-- 顶部个人信息 banner：山水线条背景 -->
    <view class="banner">
      <image class="banner-bg" src="/static/peoplebackpage.jpg" mode="aspectFill" />
      <view class="banner-veil"></view>
      <StatusBar />
      <view class="banner-inner">
        <view class="avatar mr-4">
          <text class="uni-icons uniui-person-filled avatar-icon"></text>
        </view>
        <view class="flex-1 min-w-0">
          <view class="flex items-center flex-wrap">
            <text class="name truncate">{{ displayName }}</text>
            <text class="role-chip">{{ roleLabel }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 卡片组 -->
    <view class="cards-wrap px-4 pb-24">
      <!-- 账号信息 -->
      <view class="glass-card">
        <view class="flex items-center px-5 pt-6 pb-3">
          <view class="section-bar mr-2"></view>
          <text class="card-title">账号信息</text>
        </view>
        <view class="px-5 pb-4">
          <view class="info-row">
            <text class="info-label">姓名</text>
            <text class="info-value">{{ userInfo?.name || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">部门</text>
            <text class="info-value">{{ userInfo?.department || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">岗位</text>
            <text class="info-value">{{ userInfo?.postNames || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">工号</text>
            <text class="info-value">{{ userInfo?.employeeNo || '-' }}</text>
          </view>
          <view class="info-row">
            <text class="info-label">联系电话</text>
            <text class="info-value">{{ userInfo?.phone || '-' }}</text>
          </view>
        </view>
      </view>

      <!-- 功能菜单 -->
      <view class="glass-card mt-4 p-2">
        <view
          class="menu-item"
          hover-class="menu-hover"
          :hover-start-time="0"
          :hover-stay-time="120"
          @click="goToChangePassword"
        >
          <view class="menu-icon">
            <text class="uni-icons uniui-locked menu-glyph"></text>
          </view>
          <view class="flex-1 min-w-0">
            <text class="menu-title">修改密码</text>
            <text class="menu-desc">定期更换，保障账号安全</text>
          </view>
          <text class="uni-icons uniui-arrowright menu-arrow"></text>
        </view>
        <view
          class="menu-item"
          hover-class="menu-hover"
          :hover-start-time="0"
          :hover-stay-time="120"
          @click="goToNotices"
        >
          <view class="menu-icon">
            <text class="uni-icons uniui-notification menu-glyph"></text>
          </view>
          <view class="flex-1 min-w-0">
            <text class="menu-title">通知公告</text>
            <text class="menu-desc">查看公司最新通知与公告</text>
          </view>
          <text class="uni-icons uniui-arrowright menu-arrow"></text>
        </view>
        <view
          class="menu-item"
          hover-class="menu-hover"
          :hover-start-time="0"
          :hover-stay-time="120"
          @click="goToHelp"
        >
          <view class="menu-icon">
            <text class="uni-icons uniui-help menu-glyph"></text>
          </view>
          <view class="flex-1 min-w-0">
            <text class="menu-title">帮助中心</text>
            <text class="menu-desc">常见问题与使用指南</text>
          </view>
          <text class="uni-icons uniui-arrowright menu-arrow"></text>
        </view>
      </view>

      <!-- 退出登录 -->
      <view
        class="glass-card mt-4 logout-row"
        hover-class="logout-hover"
        :hover-start-time="0"
        :hover-stay-time="120"
        @click="handleLogout"
      >
        <view class="logout-icon mr-3">
          <text class="uni-icons uniui-loop logout-glyph"></text>
        </view>
        <text class="flex-1 logout-text">退出登录</text>
        <text class="uni-icons uniui-arrowright logout-arrow"></text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { useAuthStore } from '@/stores/auth'
import { getTeamSimpleList } from '@/api/team'
import StatusBar from '@/components/common/StatusBar.vue'

const authStore = useAuthStore()

const userInfo = computed(() => authStore.user)
const role = computed(() => userInfo.value?.role || 'sales')

const roleLabel = computed(() => {
  const map: Record<string, string> = {
    sales: '销售',
    dispatch: '调度',
    construction: '施工',
  }
  return map[role.value] || '员工'
})

const displayName = computed(() => {
  return userInfo.value?.name || '用户'
})

const primaryMeta = computed(() => {
  if (role.value === 'construction') {
    return userInfo.value?.team ? `${userInfo.value.team}` : ''
  }
  return userInfo.value?.department || ''
})

const secondaryMeta = computed(() => {
  return userInfo.value?.position || ''
})

const dutyStatusMap: Record<string, { label: string; color: string }> = {
  on_duty: { label: '在岗', color: '#22c55e' },
  in_use: { label: '施工中', color: '#3b82f6' },
  idle: { label: '空闲', color: '#9ca3af' },
  rest: { label: '休息', color: '#f59e0b' },
}

const dutyStatusText = computed(() => {
  const status = userInfo.value?.dutyStatus
  return status ? dutyStatusMap[status]?.label || status : '-'
})

const dutyStatusColor = computed(() => {
  const status = userInfo.value?.dutyStatus
  return status ? dutyStatusMap[status]?.color || '#6b7280' : '#6b7280'
})

onMounted(async () => {
  const user = userInfo.value
  if (user?.teamId && !user.team) {
    try {
      const teams = await getTeamSimpleList()
      const team = teams.find((t) => t.value === user.teamId)
      if (team) {
        authStore.user = { ...user, team: team.label }
        uni.setStorageSync('user', JSON.stringify(authStore.user))
      }
    } catch {
      // 忽略失败
    }
  }
})

function goToChangePassword() {
  uni.navigateTo({ url: '/subPackages/pages-common/changePassword' })
}

function goToNotices() {
  const paths: Record<string, string> = {
    sales: '/subPackages/pages-common/noticeList',
    dispatch: '/subPackages/pages-dispatch/noticeList',
    construction: '/subPackages/pages-construction/noticeList',
  }
  uni.navigateTo({ url: paths[role.value] || paths.sales })
}

function goToHelp() {
  uni.navigateTo({ url: '/subPackages/pages-common/helpCenter' })
}

async function handleLogout() {
  const res = await uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
  })
  if (res.confirm) {
    uni.reLaunch({
      url: '/pages/login/login',
      complete: () => {
        authStore.doLogout()
      },
    })
  }
}
</script>

<style scoped>
/* ==================== 页面外壳 ==================== */
.profile-page {
  position: relative;
  max-width: 430px;
  margin: 0 auto;
  min-height: 100vh;
  background-color: #f6fbf9;        /* 云雾白 */
}

/* ==================== 顶部 banner（山水背景） ==================== */
.banner {
  position: relative;
  height: 232px;
  overflow: hidden;
}

.banner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* 蒙版：顶部提亮保文字、底部淡出衔接云雾白 */
.banner-veil {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.45) 0%,
    rgba(255, 255, 255, 0.12) 45%,
    rgba(246, 251, 249, 0.62) 100%
  );
}

.banner-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 30px 16px 30px;
}

.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 28px -8px rgba(54, 143, 111, 0.45);
  flex-shrink: 0;
}

.avatar-icon {
  font-size: 34px;
  color: #368f6f;
}

.name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #1f2937;
}

.role-chip {
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #368f6f 0%, #5ab8d0 100%);
}

.meta {
  font-size: 13px;
  color: #6b7280;
}

.meta-dot {
  margin: 0 6px;
  font-size: 13px;
  color: rgba(107, 114, 128, 0.6);
}

.emp-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: #1f2937;
  background-color: rgba(255, 255, 255, 0.7);
}

/* ==================== 卡片组（轻微上叠 banner） ==================== */
.cards-wrap {
  position: relative;
  z-index: 2;
  margin-top: -18px;
}

/* 磨砂玻璃卡 */
.glass-card {
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(164, 216, 152, 0.35);
  border-radius: 16px;
  box-shadow: 0 18px 50px -12px rgba(54, 143, 111, 0.28);
  overflow: hidden;
}

.card-title {
  font-size: 16px;
  font-weight: 700;
  color: #1f2937;
}

.section-bar {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, #368f6f 0%, #5ab8d0 100%);
}

/* 信息行 */
.info-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid rgba(164, 216, 152, 0.22);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  flex-shrink: 0;
  margin-right: 16px;
  font-size: 14px;
  color: #6b7280;
}

.info-value {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #1f2937;
  text-align: right;
}

/* 功能菜单 */
.menu-item {
  display: flex;
  align-items: center;
  min-height: 60px;
  padding: 13px 14px;
  border-radius: 12px;
}

.menu-icon {
  width: 42px;
  height: 42px;
  margin-right: 12px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(164, 216, 152, 0.20);
}

.menu-glyph {
  font-size: 20px;
  color: #368f6f;
}

.menu-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.menu-desc {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #6b7280;
}

.menu-arrow {
  font-size: 16px;
  color: #c4d0cb;                   /* 浅灰箭头 */
}

.menu-hover {
  background-color: rgba(164, 216, 152, 0.14);
}

/* 退出登录 */
.logout-row {
  display: flex;
  align-items: center;
  padding: 14px 16px;
}

.logout-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(239, 68, 68, 0.10);
}

.logout-glyph {
  font-size: 20px;
  color: #ef4444;
}

.logout-text {
  font-size: 16px;
  font-weight: 600;
  color: #dc2626;
}

.logout-arrow {
  font-size: 16px;
  color: #fca5a5;
}

.logout-hover {
  background-color: rgba(239, 68, 68, 0.06);
}
</style>
