<template>
  <div class="user-center">
    <!-- 顶部导航 -->
    <div class="header">
      <span class="header-title">用户中心</span>
      <el-icon class="header-icon" @click="handleMessage">
        <ChatDotSquare />
      </el-icon>
    </div>

    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="avatar-wrapper">
        <el-avatar :size="80" :src="userInfo.avatar || defaultAvatar" class="user-avatar" />
      </div>
      <div class="user-name">{{ userInfo.nickname || '用户' }}</div>
      <el-tag type="primary" round class="company-tag">
        {{ userInfo.dept?.name || '未设置部门' }}
      </el-tag>
    </div>

    <!-- 菜单列表 -->
    <div class="menu-list">
      <div class="menu-item" @click="handleProfile">
        <div class="menu-item-left">
          <el-icon class="menu-icon"><UserFilled /></el-icon>
          <span>个人中心</span>
        </div>
        <el-icon class="menu-arrow"><ArrowRight /></el-icon>
      </div>

      <div class="menu-item" @click="handleVersionInfo">
        <div class="menu-item-left">
          <el-icon class="menu-icon"><InfoFilled /></el-icon>
          <span>版本信息</span>
        </div>
        <el-icon class="menu-arrow"><ArrowRight /></el-icon>
      </div>

      <div class="menu-item" @click="handleChangePassword">
        <div class="menu-item-left">
          <el-icon class="menu-icon"><Lock /></el-icon>
          <span>修改密码</span>
        </div>
        <el-icon class="menu-arrow"><ArrowRight /></el-icon>
      </div>

<!--      <div class="menu-item" @click="handleWechatAuth">-->
<!--        <div class="menu-item-left">-->
<!--          <el-icon class="menu-icon"><CircleCheck /></el-icon>-->
<!--          <span>公众号授权</span>-->
<!--        </div>-->
<!--        <el-icon class="menu-arrow"><ArrowRight /></el-icon>-->
<!--      </div>-->

<!--      <div class="menu-item" @click="handleCheckIn">-->
<!--        <div class="menu-item-left">-->
<!--          <el-icon class="menu-icon"><Calendar /></el-icon>-->
<!--          <span>签到打卡</span>-->
<!--        </div>-->
<!--        <el-icon class="menu-arrow"><ArrowRight /></el-icon>-->
<!--      </div>-->

      <div class="menu-item" @click="handleLogout">
        <div class="menu-item-left">
          <el-icon class="menu-icon"><SwitchButton /></el-icon>
          <span>退出登录</span>
        </div>
        <el-icon class="menu-arrow"><ArrowRight /></el-icon>
      </div>

      <div class="menu-item" @click="handleLanguage">
        <div class="menu-item-left">
          <el-icon class="menu-icon"><Setting /></el-icon>
          <span>语言</span>
        </div>
        <el-icon class="menu-arrow"><ArrowRight /></el-icon>
      </div>
    </div>

    <!-- 修改密码对话框 -->
    <el-dialog v-model="passwordDialogVisible" title="修改密码" width="400px" center>
      <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-width="80px">
        <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password placeholder="请输入旧密码" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password placeholder="请确认新密码" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="passwordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPassword">确定</el-button>
      </template>
    </el-dialog>

    <!-- 版本信息对话框 -->
    <el-dialog v-model="versionDialogVisible" title="版本信息" width="350px" center>
      <div class="version-info">
        <p>应用名称：MOM管理系统</p>
        <p>当前版本：v1.0.1</p>
      </div>
      <template #footer>
        <el-button type="primary" @click="versionDialogVisible = false">确定</el-button>
      </template>
    </el-dialog>

    <!-- 底部导航栏 -->
    <div class="bottom-nav">
      <div class="nav-item" @click="handleNavClick('home')">
        <el-icon :size="22"><HomeFilled /></el-icon>
        <span>首页</span>
      </div>
      <div class="nav-item" @click="handleNavClick('workspace')">
        <el-icon :size="22"><TrendCharts /></el-icon>
        <span>工作台</span>
      </div>
      <div class="nav-item" @click="handleNavClick('function')">
        <el-icon :size="22"><Grid /></el-icon>
        <span>功能</span>
      </div>
      <div class="nav-item active" @click="handleNavClick('mine')">
        <el-icon :size="22"><User /></el-icon>
        <span>我的</span>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getUserProfile, updateUserPassword } from '@/api/system/user/profile'
import { useUserStore } from '@/store/modules/user'
import {
  ChatDotSquare,
  InfoFilled,
  Lock,
  CircleCheck,
  Calendar,
  SwitchButton,
  Setting,
  ArrowRight,
  HomeFilled,
  TrendCharts,
  Grid,
  User,
  UserFilled
} from '@element-plus/icons-vue'

defineOptions({ name: 'UserCenter' })

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

const defaultAvatar = 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif'

const userInfo = ref<any>({})

const passwordDialogVisible = ref(false)
const versionDialogVisible = ref(false)
const passwordFormRef = ref()
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const validateConfirmPassword = (_rule: any, value: string, callback: any) => {
  if (value !== passwordForm.newPassword) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const passwordRules = {
  oldPassword: [{ required: true, message: '请输入旧密码', trigger: 'blur' }],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    { validator: validateConfirmPassword, trigger: 'blur' }
  ]
}

/** 获取用户信息 */
const getUserInfo = async () => {
  try {
    const data = await getUserProfile()
    userInfo.value = data
  } catch (e) {
    console.error(e)
  }
}

/** 个人中心 */
const handleProfile = () => {
  router.push('/user/profile-mobile')
}

/** 版本信息 */
const handleVersionInfo = () => {
  versionDialogVisible.value = true
}

/** 修改密码 */
const handleChangePassword = () => {
  passwordForm.oldPassword = ''
  passwordForm.newPassword = ''
  passwordForm.confirmPassword = ''
  passwordDialogVisible.value = true
}

/** 提交密码修改 */
const submitPassword = async () => {
  const valid = await passwordFormRef.value?.validate()
  if (!valid) return
  try {
    await updateUserPassword(passwordForm.oldPassword, passwordForm.newPassword)
    message.success('密码修改成功')
    passwordDialogVisible.value = false
  } catch (e) {
    console.error(e)
  }
}

/** 公众号授权 */
const handleWechatAuth = () => {
  message.info('公众号授权功能开发中')
}

/** 签到打卡 */
const handleCheckIn = () => {
  message.info('签到打卡功能开发中')
}

/** 退出登录 */
const handleLogout = async () => {
  try {
    await message.confirm('确定要退出登录吗？')
    await userStore.loginOut()
    router.push('/login')
  } catch {
    // 取消退出
  }
}

/** 语言 */
const handleLanguage = () => {
  message.info('语言切换功能开发中')
}

/** 消息 */
const handleMessage = () => {
  router.push('/user/notify-message')
}

/** 底部导航 */
const handleNavClick = (tab: string) => {
  switch (tab) {
    case 'home':
      router.push('/')
      break
    case 'workspace':
      message.info('工作台功能开发中')
      break
    case 'function':
      message.info('功能页面开发中')
      break
    case 'mine':
      break
  }
}

onMounted(() => {
  getUserInfo()
})
</script>

<style lang="scss" scoped>
.user-center {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 70px;
  max-width: 450px;
  margin: 0 auto;
  position: relative;
}

/* 顶部导航 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #fff;

  .header-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .header-icon {
    font-size: 22px;
    color: #333;
    cursor: pointer;
  }
}

/* 用户信息卡片 */
.user-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px 24px;
  background: linear-gradient(180deg, #fff 0%, #f5f7fa 100%);

  .avatar-wrapper {
    .user-avatar {
      border: 3px solid #409eff;
    }
  }

  .user-name {
    margin-top: 12px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .company-tag {
    margin-top: 8px;
    font-size: 13px;
    padding: 4px 16px;
    border-radius: 20px;
  }
}

/* 菜单列表 */
.menu-list {
  margin: 12px 16px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  .menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    transition: background-color 0.2s;

    &:not(:last-child) {
      border-bottom: 1px solid #f0f0f0;
    }

    &:hover {
      background-color: #f9fafb;
    }

    &:active {
      background-color: #f0f2f5;
    }

    .menu-item-left {
      display: flex;
      align-items: center;
      gap: 12px;

      .menu-icon {
        font-size: 20px;
        color: #666;
      }

      span {
        font-size: 15px;
        color: #333;
      }
    }

    .menu-arrow {
      font-size: 14px;
      color: #ccc;
    }
  }
}

/* 底部导航栏 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 450px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #fff;
  padding: 8px 0 12px;
  border-top: 1px solid #eee;
  z-index: 100;

  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    color: #999;
    transition: color 0.2s;

    span {
      font-size: 11px;
    }

    &.active {
      color: #f56c6c;
    }

    &:hover:not(.active) {
      color: #666;
    }
  }
}

/* 版本信息 */
.version-info {
  text-align: center;
  line-height: 2;
  color: #666;
  font-size: 14px;
}
</style>
