<template>
  <div class="container">
    <el-row class="top">
      <el-col :span="20" class="col">个人信息</el-col>
    </el-row>

    <el-row class="body">
      <el-col :span="6" class="avatar-col">
        <el-image
            class="user-img"
            :src="userImgSrc"
            @error="handleImageError"
            fit="cover"
        ></el-image>
        <el-button class="upload-btn" type="text" @click="triggerFileUpload">更换头像</el-button>
        <input type="file" @change="handleFileUpload" style="display: none;" />
      </el-col>

      <el-col :span="14" class="form-col">
        <el-tag class="phone">{{ phoneNumber }}</el-tag>
        <el-form label-width="auto" class="user-form" style="max-width: 600px">
          <el-form-item label="昵称">
            <el-input v-model="form.nickname" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="form.sex" placeholder="选择性别">
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生日">
            <el-date-picker
                v-model="form.birthday"
                type="date"
                placeholder="Pick a day"
                style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="地区">
            <el-input v-model="form.region" placeholder="请输入地区"></el-input>
          </el-form-item>
          <el-form-item label="电话号码">
            <el-input v-model="form.phoneNumber" type="tel" placeholder="请输入电话号码"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" class="save-btn" @click="saveForm">保存</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userImgSrc: '/user.png', // 默认头像
      form: {
        nickname: '',
        sex: '',
        birthday: null,
        region: '',
        profileImage: null,
        phoneNumber: '' // 新增电话号码字段
      },
    };
  },
  computed: {
    phoneNumber() {
      return this.form.phoneNumber;
    }
  },
  created() {
    this.fetchUserInfo();
  },
  methods: {
    // 从 localStorage 中读取表单数据
    fetchUserInfo() {
      const storedForm = localStorage.getItem('userInfo');
      if (storedForm) {
        const parsedForm = JSON.parse(storedForm);
        this.form = parsedForm;
        this.userImgSrc = parsedForm.profileImage || '/user.png';
      }
    },

    // 处理文件上传
    handleFileUpload(event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = (e) => {
          this.userImgSrc = e.target.result;
          this.form.profileImage = e.target.result;
        };
        reader.readAsDataURL(file);
      }
    },

    // 手动触发文件上传
    triggerFileUpload() {
      const fileInput = document.querySelector('input[type="file"]');
      fileInput?.click();
    },

    // 保存表单数据
    saveForm() {
      localStorage.setItem('userInfo', JSON.stringify(this.form));
      this.$message({
        message: '保存成功',
        type: 'success'
      });
    },

    // 处理头像加载失败
    handleImageError() {
      this.userImgSrc = '/user.png'; // 使用默认头像
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 30px;
  background-color: #f4f7f6;
  min-height: 100vh;
}

.top {
  margin-bottom: 30px;
  text-align: center;
  font-size: 24px;
  font-weight: 600;
}

.col {
  font-size: 30px;
  text-align: center;
}

.body {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
}

.avatar-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.user-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin-bottom: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.upload-btn {
  font-size: 12px;
  color: #409eff;
  margin-top: 10px;
}

.form-col {
  flex: 1;
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.phone {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}

.user-form .el-form-item {
  margin-bottom: 15px;
}

.user-form .el-input, .user-form .el-select, .user-form .el-date-picker {
  border-radius: 8px;
}

.save-btn {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
}

.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}
</style>
