<template>
  <div>
    <el-card class="userInfoCard">
      <h2 style="text-align: center">个人信息</h2>
      <br>
      <div class="avatar-div">
        <el-upload
          action="/api/files/upload"
          :show-file-list="false"
          :headers="headers"
          name="file"
          :data="{filePath: 'avatar'}"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <div
          class="avatar-uploader">
            <img v-if="sysUser.avatar" :src="getFilePrefix + sysUser.avatar" style="width: 100%;"/>
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </div>
        </el-upload>
      </div>
      <el-descriptions
        class="margin-top"
        :column="1"
        border
      >
        <el-descriptions-item label="用户账号">
          <el-input v-model="sysUser.username" disabled/>
        </el-descriptions-item>
        <el-descriptions-item label="用户昵称">
          <el-input v-model="sysUser.nickname" />
        </el-descriptions-item>
        <el-descriptions-item label="用户角色">
          <el-tag v-if="sysUser.role === '1'" type="danger">超级管理员</el-tag>
          <el-tag v-else type="info">普通用户</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="帐号状态">
          <el-tag v-if="sysUser.status === 0" type="success">正常</el-tag>
          <el-tag v-else-if="sysUser.status === 1" type="warning">停用</el-tag>
          <el-tag v-else type="info">待审核</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注">
          <el-input v-model="sysUser.remark" type="textarea" />
        </el-descriptions-item>
       </el-descriptions>
      <br>
      <div style="text-align: center;">
        <el-button type="primary" @click="updateSysUserInfo">更新个人信息</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance } from 'vue';

import { getCurrentSysUser, updateSysUser } from '@/api/sysUser';
import { getToken } from '@/utils/token';

import Cookies from 'js-cookie';

const { proxy } = getCurrentInstance();

const sysUser = ref({})

// 请求头信息
const headers = ref({
  Authorization: getToken()
})

const getFilePrefix = proxy.getFilePrefix;

// 获取当前登录用户详情
function getCurrentSysUserInfo() {
  getCurrentSysUser().then(res => {
    if (res.code === 200) {
      sysUser.value = res.data
    } else {
      proxy.$message.error(res.msg)
    }
  })
}

// 头像上传成功后
function handleAvatarSuccess(response, uploadFile, uploadFiles) {
  sysUser.value.avatar = response
  Cookies.set('avatar', response)
  updateSysUser(sysUser.value).then(res => {
    if (res.code === 200) {
      proxy.$message.success('头像更新成功')
    } else {
      proxy.$message.error(res.msg)
    }
  })
}

function beforeAvatarUpload(file) {
  const ok = file.size / 1024 / 1024 <= 5;
  if (!ok) {
    proxy.$message({
      message: '图片大小不能超过5MB',
      type: 'error'
    });
  }
  return ok;
}

// 更新个人信息
function updateSysUserInfo() {
  updateSysUser(sysUser.value).then(res => {
    if (res.code === 200) {
      proxy.$message.success('个人信息更新成功')
    } else {
      proxy.$message.error(res.msg)
    }
  })
}

function formatDate(val) {
  if (!val) return '';
  const d = new Date(val);
  const yyyy = d.getFullYear();
  const MM = String(d.getMonth() + 1).padStart(2, '0');
  const DD = String(d.getDate()).padStart(2, '0');
  const HH = String(d.getHours()).padStart(2, '0');
  const mm = String(d.getMinutes()).padStart(2, '0');
  const ss = String(d.getSeconds()).padStart(2, '0');
  return `${yyyy}-${MM}-${DD} ${HH}:${mm}:${ss}`;
}

getCurrentSysUserInfo()
</script>

<style scoped>
.userInfoCard {
  width: 500px;
  margin: 0 auto;
}

.avatar-div {
  margin: 20px auto;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #ccc;
  line-height: 100px;
}

.avatar-uploader {
  width: 100px;
  height: 100px;
  display:flex;
  justify-content: center;
  align-items: center;
}


</style>
