<template>
  <div class="personal-center">
    <div class="page-header">
      <h1>个人中心</h1>
      <p>管理个人信息和账户设置</p>
    </div>

    <div class="content">
      <a-row :gutter="24">
        <!-- 个人信息卡片 -->
        <a-col :span="8">
          <a-card title="个人信息" :bordered="false">
            <div class="profile-card">
              <div class="avatar-section">
                <a-avatar :size="80" :src="userInfo.avatar">
                  {{ userInfo.name.charAt(0) }}
                </a-avatar>
                <a-button type="link" @click="handleChangeAvatar">
                  更换头像
                </a-button>
              </div>
              <div class="user-info">
                <h3>{{ userInfo.name }}</h3>
                <p>{{ userInfo.position }} - {{ userInfo.department }}</p>
                <a-tag :color="getStatusColor(userInfo.status)">
                  {{ getStatusText(userInfo.status) }}
                </a-tag>
              </div>
            </div>
          </a-card>
        </a-col>

        <!-- 账户信息 -->
        <a-col :span="16">
          <a-card title="账户信息" :bordered="false">
            <a-descriptions :column="2" bordered>
              <a-descriptions-item label="用户名">
                {{ userInfo.username }}
              </a-descriptions-item>
              <a-descriptions-item label="邮箱">
                {{ userInfo.email }}
              </a-descriptions-item>
              <a-descriptions-item label="手机号">
                {{ userInfo.phone }}
              </a-descriptions-item>
              <a-descriptions-item label="工号">
                {{ userInfo.employeeId }}
              </a-descriptions-item>
              <a-descriptions-item label="入职日期">
                {{ userInfo.hireDate }}
              </a-descriptions-item>
              <a-descriptions-item label="最后登录">
                {{ userInfo.lastLogin }}
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
        </a-col>
      </a-row>

      <!-- 功能菜单 -->
      <div class="function-menu">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-card hoverable @click="handleEditProfile">
              <div class="menu-item">
                <UserOutlined class="menu-icon" />
                <div class="menu-content">
                  <h4>编辑资料</h4>
                  <p>修改个人信息</p>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card hoverable @click="handleChangePassword">
              <div class="menu-item">
                <LockOutlined class="menu-icon" />
                <div class="menu-content">
                  <h4>修改密码</h4>
                  <p>更改登录密码</p>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card hoverable @click="handleSecuritySettings">
              <div class="menu-item">
                <SafetyOutlined class="menu-icon" />
                <div class="menu-content">
                  <h4>安全设置</h4>
                  <p>账户安全配置</p>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="6">
            <a-card hoverable @click="handleNotificationSettings">
              <div class="menu-item">
                <BellOutlined class="menu-icon" />
                <div class="menu-content">
                  <h4>通知设置</h4>
                  <p>消息通知配置</p>
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </div>

      <!-- 最近活动 -->
      <div class="recent-activities">
        <a-card title="最近活动" :bordered="false">
          <a-timeline>
            <a-timeline-item
              v-for="activity in recentActivities"
              :key="activity.id"
              :color="getActivityColor(activity.type)"
            >
              <div class="activity-item">
                <div class="activity-header">
                  <span class="activity-title">{{ activity.title }}</span>
                  <span class="activity-time">{{ activity.time }}</span>
                </div>
                <div class="activity-description">{{ activity.description }}</div>
              </div>
            </a-timeline-item>
          </a-timeline>
        </a-card>
      </div>
    </div>

    <!-- 编辑资料模态框 -->
    <a-modal
      v-model:open="editModalVisible"
      title="编辑资料"
      @ok="handleEditSubmit"
      @cancel="handleEditCancel"
    >
      <a-form :model="editForm" layout="vertical">
        <a-form-item label="姓名" required>
          <a-input v-model:value="editForm.name" />
        </a-form-item>
        <a-form-item label="邮箱" required>
          <a-input v-model:value="editForm.email" />
        </a-form-item>
        <a-form-item label="手机号" required>
          <a-input v-model:value="editForm.phone" />
        </a-form-item>
        <a-form-item label="个人简介">
          <a-textarea v-model:value="editForm.bio" :rows="3" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 修改密码模态框 -->
    <a-modal
      v-model:open="passwordModalVisible"
      title="修改密码"
      @ok="handlePasswordSubmit"
      @cancel="handlePasswordCancel"
    >
      <a-form :model="passwordForm" layout="vertical">
        <a-form-item label="原密码" required>
          <a-input-password v-model:value="passwordForm.oldPassword" />
        </a-form-item>
        <a-form-item label="新密码" required>
          <a-input-password v-model:value="passwordForm.newPassword" />
        </a-form-item>
        <a-form-item label="确认新密码" required>
          <a-input-password v-model:value="passwordForm.confirmPassword" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { 
  UserOutlined, 
  LockOutlined, 
  SafetyOutlined, 
  BellOutlined 
} from '@ant-design/icons-vue'
import api from '@/utils/api'

// 响应式数据
const editModalVisible = ref(false)
const passwordModalVisible = ref(false)
const editForm = ref({
  name: '',
  email: '',
  phone: '',
  bio: ''
})
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 用户信息
const userInfo = ref({
  name: '张三',
  username: 'zhangsan',
  email: 'zhangsan@bank.com',
  phone: '13800138000',
  employeeId: 'EMP001',
  position: '经理',
  department: '行政部',
  status: 'active',
  hireDate: '2020-03-15',
  lastLogin: '2024-01-18 09:30:00',
  avatar: null,
  bio: '具有5年银行管理经验，擅长团队管理和业务规划'
})

// 最近活动
const recentActivities = ref([
  {
    id: 1,
    type: 'login',
    title: '登录系统',
    description: '在总行办公室登录系统',
    time: '2024-01-18 09:30:00'
  },
  {
    id: 2,
    type: 'profile',
    title: '更新个人信息',
    description: '修改了个人简介',
    time: '2024-01-17 16:45:00'
  },
  {
    id: 3,
    type: 'password',
    title: '修改密码',
    description: '成功修改登录密码',
    time: '2024-01-16 14:20:00'
  },
  {
    id: 4,
    type: 'system',
    title: '系统通知',
    description: '收到新的系统更新通知',
    time: '2024-01-15 10:15:00'
  }
])

// 方法
const handleChangeAvatar = () => {
  message.info('更换头像功能开发中...')
}

const handleEditProfile = () => {
  editForm.value = {
    name: userInfo.value.name,
    email: userInfo.value.email,
    phone: userInfo.value.phone,
    bio: userInfo.value.bio
  }
  editModalVisible.value = true
}

const handleChangePassword = () => {
  passwordForm.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  }
  passwordModalVisible.value = true
}

const handleSecuritySettings = () => {
  message.info('安全设置功能开发中...')
}

const handleNotificationSettings = () => {
  message.info('通知设置功能开发中...')
}

const handleEditSubmit = () => {
  if (!editForm.value.name || !editForm.value.email || !editForm.value.phone) {
    message.error('请填写完整信息')
    return
  }

  userInfo.value.name = editForm.value.name
  userInfo.value.email = editForm.value.email
  userInfo.value.phone = editForm.value.phone
  userInfo.value.bio = editForm.value.bio

  editModalVisible.value = false
  message.success('个人信息更新成功')
}

const handleEditCancel = () => {
  editModalVisible.value = false
}

const handlePasswordSubmit = async () => {
  if (!passwordForm.value.oldPassword || !passwordForm.value.newPassword || !passwordForm.value.confirmPassword) {
    message.error('请填写完整信息')
    return
  }

  if (passwordForm.value.newPassword !== passwordForm.value.confirmPassword) {
    message.error('两次输入的新密码不一致')
    return
  }

  if (passwordForm.value.newPassword.length < 6) {
    message.error('新密码长度不能少于6位')
    return
  }

  try {
    const response = await api.auth.changePassword({
      oldPassword: passwordForm.value.oldPassword,
      newPassword: passwordForm.value.newPassword
    })

    if (response.success) {
      passwordModalVisible.value = false
      message.success('密码修改成功')
      // 重置表单
      passwordForm.value = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    } else {
      message.error(response.message || '密码修改失败')
    }
  } catch (error) {
    console.error('修改密码失败:', error)
    message.error('密码修改失败')
  }
}

const handlePasswordCancel = () => {
  passwordModalVisible.value = false
}

const getStatusColor = (status) => {
  const colors = {
    active: 'green',
    inactive: 'red',
    suspended: 'orange'
  }
  return colors[status] || 'default'
}

const getStatusText = (status) => {
  const texts = {
    active: '在职',
    inactive: '离职',
    suspended: '停职'
  }
  return texts[status] || status
}

const getActivityColor = (type) => {
  const colors = {
    login: 'green',
    profile: 'blue',
    password: 'orange',
    system: 'purple'
  }
  return colors[type] || 'default'
}

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const response = await api.auth.getCurrentUser()
    if (response.success) {
      const user = response.data
      userInfo.value = {
        name: user.real_name || user.username || '用户',
        username: user.username || '15004901368',
        email: user.email || '',
        phone: user.phone || '15004901368',
        employeeId: user.employee_id || 'EMP001',
        position: user.position || '员工',
        department: user.department || '银行',
        status: user.status || 'active',
        hireDate: user.created_at ? new Date(user.created_at).toLocaleDateString() : '2020-03-15',
        lastLogin: user.last_login ? new Date(user.last_login).toLocaleString() : '2024-01-18 09:30:00',
        avatar: user.avatar || null,
        bio: user.bio || '银行员工'
      }
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    // 使用默认值
  }
}

// 生命周期
onMounted(() => {
  fetchUserInfo()
})
</script>

<style scoped>
.personal-center {
  padding: 24px;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}

.content {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
}

.profile-card {
  text-align: center;
}

.avatar-section {
  margin-bottom: 16px;
}

.user-info h3 {
  margin: 0 0 8px 0;
  font-size: 18px;
  font-weight: 600;
}

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

.function-menu {
  margin: 24px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 0;
}

.menu-icon {
  font-size: 24px;
  color: #1890ff;
  margin-right: 16px;
}

.menu-content h4 {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 600;
}

.menu-content p {
  margin: 0;
  color: #666;
  font-size: 12px;
}

.recent-activities {
  margin-top: 24px;
}

.activity-item {
  padding: 8px 0;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}

.activity-title {
  font-weight: 600;
  font-size: 14px;
}

.activity-time {
  color: #999;
  font-size: 12px;
}

.activity-description {
  color: #666;
  font-size: 12px;
}
</style>