<template>
  <div class="user-container">
    <el-card class="user-card">
      <div class="title">个人信息</div>
      <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-form :model="sysUser" label-width="96px" class="form-block">
        <el-form-item label="用户账号">
          <el-input v-model="sysUser.username" disabled />
        </el-form-item>
        <el-form-item label="用户昵称">
          <el-input v-model="sysUser.nickname" />
        </el-form-item>
      </el-form>
      <el-form :model="sysUser.tourist" label-width="96px" class="form-block">
        <el-form-item label="真实姓名">
          <el-input v-model="sysUser.tourist.realName" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="sysUser.tourist.idCard" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="sysUser.tourist.phone" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="sysUser.tourist.email" />
        </el-form-item>
      </el-form>
      <div class="actions">
        <el-button type="primary" @click="updateSysUserInfo">更新个人信息</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import { getCurrentSysUser, updateSysUser } from '@/api/sysUser'
import { getToken } from '@/utils/token'
import Cookies from 'js-cookie'

const { proxy } = getCurrentInstance()
const getFilePrefix = proxy.getFilePrefix

const sysUser = ref({ tourist: {} })
const createTimeText = ref('')
const updateTimeText = ref('')

const headers = ref({ Authorization: getToken() })

function formatDate(val) {
  if (!val) return ''
  const d = new Date(val)
  if (isNaN(d.getTime())) return ''
  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}`
}

function getCurrentSysUserInfo() {
  getCurrentSysUser().then(res => {
    if (res.code === 200) {
      const d = res.data || {}
      if (!d.tourist) d.tourist = {}
      sysUser.value = d
      createTimeText.value = formatDate(d.createTime)
      updateTimeText.value = formatDate(d.updateTime)
    } else {
      proxy.$message.error(res.msg)
    }
  })
}

function handleAvatarSuccess(response) {
  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() {}

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

getCurrentSysUserInfo()
</script>

<style scoped>
.user-container { width: 80%; margin: 24px auto 40px; padding-top: 16px; }
.user-card { padding: 14px 16px; }
.title { font-size: 22px; font-weight: 800; color: #2c1f1f; text-align: center; margin-bottom: 8px; }
.sub-title { font-size: 16px; font-weight: 800; color: #2c1f1f; margin: 12px 0 8px; }
.form-block { max-width: 520px; margin: 0 auto; }
.avatar-div { margin: 10px auto 18px; 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; }
.actions { display: flex; justify-content: center; margin-top: 12px; }
</style>
