<template>
  <div class="user-profile-container">
    <el-card class="profile-card">
      <div class="profile-header">
        <el-avatar :size="100" :src="userInfo.avatar" class="profile-avatar"></el-avatar>
        <div class="upload-avatar">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-change="handleAvatarChange"
            :auto-upload="false"
          >
            <el-button type="primary" size="small">更换头像</el-button>
          </el-upload>
        </div>
      </div>

      <el-divider content-position="center">基本信息</el-divider>

      <el-form :model="userInfo" label-width="100px" :rules="rules" ref="userForm">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userInfo.username" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="userInfo.realName" placeholder="请输入真实姓名"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="userInfo.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
            <el-radio label="other">其他</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="电子邮箱" prop="email">
          <el-input v-model="userInfo.email" placeholder="请输入电子邮箱"></el-input>
        </el-form-item>

        <el-form-item label="电话号码" prop="phone">
          <el-input v-model="userInfo.phone" placeholder="请输入电话号码"></el-input>
        </el-form-item>

        <el-form-item label="出生日期">
          <el-date-picker
            v-model="userInfo.birthday"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
          ></el-date-picker>
        </el-form-item>

        <el-divider content-position="center">隐私设置</el-divider>

        <el-form-item label="匿名分享圈">
          <el-switch
            v-model="userInfo.anonymousShare"
            active-text="使用真实姓名"
            inactive-text="使用匿名"
            :active-value="false"
            :inactive-value="true"
          ></el-switch>
        </el-form-item>

        <el-form-item label="个人资料可见性">
          <el-select v-model="userInfo.profileVisibility" placeholder="请选择">
            <el-option label="所有人可见" value="public"></el-option>
            <el-option label="仅我的关注者可见" value="followers"></el-option>
            <el-option label="仅自己可见" value="private"></el-option>
          </el-select>
        </el-form-item>

        <el-divider content-position="center">安全设置</el-divider>

        <el-form-item>
          <el-button type="primary" @click="changePassword">修改密码</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="saveProfile">保存资料</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'UserProfile',
  data () {
    // 电子邮箱验证规则
    const validateEmail = (rule, value, callback) => {
      const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
      if (value && !emailRegex.test(value)) {
        callback(new Error('请输入有效的电子邮箱'))
      } else {
        callback()
      }
    }

    // 手机号验证规则
    const validatePhone = (rule, value, callback) => {
      const phoneRegex = /^1[3-9]\d{9}$/
      if (value && !phoneRegex.test(value)) {
        callback(new Error('请输入有效的手机号码'))
      } else {
        callback()
      }
    }

    return {
      userInfo: {
        avatar: require('@/assets/user/1.jpg'),
        username: 'Infinity',
        realName: '张三',
        gender: 'male',
        email: 'user@example.com',
        phone: '13800138000',
        birthday: '',
        anonymousShare: true,
        profileVisibility: 'followers'
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入电子邮箱', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleAvatarChange (file) {
      this.userInfo.avatar = URL.createObjectURL(file.raw)
      // 这里应该添加上传逻辑
      this.$message.success('头像更新成功')
    },
    saveProfile () {
      this.$refs.userForm.validate((valid) => {
        if (valid) {
          // 这里应该添加保存到服务器的逻辑
          this.$message({
            message: '个人资料保存成功',
            type: 'success'
          })
        } else {
          this.$message.error('请正确填写表单')
          return false
        }
      })
    },
    resetForm () {
      this.$refs.userForm.resetFields()
    },
    changePassword () {
      this.$prompt('请输入当前密码', '修改密码', {
        confirmButtonText: '下一步',
        cancelButtonText: '取消',
        inputType: 'password',
        inputPlaceholder: '当前密码'
      }).then(({ value }) => {
        if (value) {
          this.$prompt('请输入新密码', '修改密码', {
            confirmButtonText: '下一步',
            cancelButtonText: '取消',
            inputType: 'password',
            inputPlaceholder: '新密码'
          }).then(({ value: newPassword }) => {
            if (newPassword) {
              this.$prompt('请再次输入新密码', '修改密码', {
                confirmButtonText: '确认修改',
                cancelButtonText: '取消',
                inputType: 'password',
                inputPlaceholder: '确认新密码'
              }).then(({ value: confirmPassword }) => {
                if (newPassword === confirmPassword) {
                  // 这里应该添加修改密码的逻辑
                  this.$message.success('密码修改成功')
                } else {
                  this.$message.error('两次输入的密码不一致')
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.user-profile-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.profile-card {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.profile-avatar {
  border: 4px solid #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.upload-avatar {
  margin-top: 10px;
}

.el-divider {
  margin: 25px 0;
}

@media (max-width: 768px) {
  .user-profile-container {
    padding: 10px;
  }

  .el-form-item {
    margin-bottom: 18px;
  }
}
</style>
