<script setup>
import {ref} from 'vue';
import {ElButton, ElForm, ElFormItem, ElInput, ElMessage, ElRadio, ElRadioGroup, ElTabPane, ElTabs} from 'element-plus';
import 'element-plus/dist/index.css';

const nickname = ref('');
const phoneNumber = ref('');
const email = ref('');
const gender = ref('');
const oldPassword = ref('');
const newPassword = ref('');
const confirmPassword = ref('');

const handleSaveProfile = () => {
  console.log('Saving profile with', {
    nickname: nickname.value,
    phoneNumber: phoneNumber.value,
    email: email.value,
    gender: gender.value
  });
  // 处理保存资料逻辑
  ElMessage.success('资料保存成功');
};

const handleChangePassword = () => {
  if (newPassword.value !== confirmPassword.value) {
    ElMessage.error('新密码和确认密码不一致');
    return;
  }
  console.log('Changing password with', {oldPassword: oldPassword.value, newPassword: newPassword.value});
  // 处理修改密码逻辑
  ElMessage.success('密码修改成功');
};
</script>

<template>
  <div class="profile-container">
    <div class="profile-box">
      <h2>基本资料</h2>
      <ElTabs>
        <ElTabPane label="基本资料">
          <ElForm @submit.prevent="handleSaveProfile" label-width="100px">
            <ElFormItem label="用户昵称">
              <ElInput v-model="nickname" type="text" placeholder="请输入用户昵称" required/>
            </ElFormItem>
            <ElFormItem label="手机号码">
              <ElInput v-model="phoneNumber" type="text" placeholder="请输入手机号码" required/>
            </ElFormItem>
            <ElFormItem label="邮箱">
              <ElInput v-model="email" type="email" placeholder="请输入邮箱" required/>
            </ElFormItem>
            <ElFormItem label="性别">
              <ElRadioGroup v-model="gender">
                <ElRadio label="男">男</ElRadio>
                <ElRadio label="女">女</ElRadio>
              </ElRadioGroup>
            </ElFormItem>
            <ElFormItem>
              <ElButton type="primary" @click="handleSaveProfile">保存</ElButton>
              <ElButton type="danger">取消</ElButton>
            </ElFormItem>
          </ElForm>
        </ElTabPane>
        <ElTabPane label="修改密码">
          <ElForm @submit.prevent="handleChangePassword" label-width="100px">
            <ElFormItem label="旧密码">
              <ElInput v-model="oldPassword" type="password" placeholder="请输入旧密码" required/>
            </ElFormItem>
            <ElFormItem label="新密码">
              <ElInput v-model="newPassword" type="password" placeholder="请输入新密码" required/>
            </ElFormItem>
            <ElFormItem label="确认密码">
              <ElInput v-model="confirmPassword" type="password" placeholder="请输入确认密码" required/>
            </ElFormItem>
            <ElFormItem>
              <ElButton type="primary" @click="handleChangePassword">修改密码</ElButton>
            </ElFormItem>
          </ElForm>
        </ElTabPane>
      </ElTabs>
    </div>
  </div>
</template>

<style scoped>
.profile-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: white;
}

.profile-box {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 90%;
  max-width: 600px;
}

h2 {
  margin-bottom: 1rem;
}

.el-form-item {
  margin-bottom: 1rem;
  text-align: left;
}

.el-form-item label {
  display: block;
  margin-bottom: 0.5rem;
}

.el-input {
  width: 100%;
}

.el-button--primary {
  background-color: #007bff;
  color: white;
}

.el-button--primary:hover {
  background-color: #0056b3;
}
</style>
