<template>
  <div style="width: 50%">
    <div class="card">
      <el-form
        ref="formRef"
        :model="data.user"
        label-width="80px"
        style="padding: 20px 30px"
        status-icon
      >
        <el-form-item label="账号" prop="username">
          <el-input
            v-model="data.user.username"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称" prop="name">
          <el-input
            v-model="data.user.name"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="data.user.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机" prop="phone">
          <el-input
            v-model="data.user.phone"
            placeholder="请输入手机"
          ></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="professional">
          <el-input
            v-model="data.user.professional"
            placeholder="请输入专业"
          ></el-input>
        </el-form-item>
        <el-form-item label="擅长" prop="skilled">
          <el-input
            v-model="data.user.skilled"
            placeholder="请输入擅长领域"
            type="textarea"
            :rows="3"
          ></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="description">
          <el-input
            v-model="data.user.description"
            placeholder="请输入个人简介"
            type="textarea"
            :rows="4"
          ></el-input>
        </el-form-item>
        <el-form-item label="头像" prop="avatar">
          <div class="avatar-preview" v-if="data.user.avatar">
            <img :src="data.user.avatar" style="width: 100px; height: 100px; border-radius: 50%;" />
          </div>
          <el-upload
            class="avatar-uploader"
            :action="'http://localhost:9090/files/upload'"
            :on-success="avatarSuccessUpload"
            list-type="picture"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="update">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import request from "@/utils/request";
import { ElMessage } from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
  loading: false
});

const emit = defineEmits(["updateUser"]);

// 获取当前用户详细信息
const fetchUserInfo = () => {
  data.loading = true;
  request.get(`/doctor/${data.user.id}`).then((res) => {
    if (res.code === "200") {
      // 更新用户信息，保留当前用户的role和token等
      const role = data.user.role;
      const token = data.user.token;
      data.user = { ...res.data, role, token };
    }
  }).finally(() => {
    data.loading = false;
  });
};

const update = () => {
  // 确保设置了用户ID
  if (!data.user.id) {
    data.user.id = JSON.parse(localStorage.getItem("xm-user") || "{}").id;
  }
  
  request.put("/doctor/update", data.user).then((res) => {
    if (res.code === "200") {
      ElMessage.success("更新成功");
      // 更新localStorage中的用户信息
      const storageUser = JSON.parse(localStorage.getItem("xm-user") || "{}");
      const updatedUser = { 
        ...storageUser, 
        name: data.user.name,
        avatar: data.user.avatar
      };
      localStorage.setItem("xm-user", JSON.stringify(updatedUser));
      emit("updateUser");
    } else {
      ElMessage.error(res.msg || "更新失败");
    }
  });
};

const avatarSuccessUpload = (res) => {
  data.user.avatar = res.data;
};

onMounted(() => {
  fetchUserInfo();
});
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.avatar-preview {
  margin-bottom: 10px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
</style> 