<template>
  <div class="user-settings-container">
    <a-card class="settings-card" title="基本信息">
      <a-descriptions :column="2" layout="inline-horizontal" :label-style="{width: '100px'}">
        <a-descriptions-item label="用户名">
          {{ userStore.user?.Name || userStore.user?.Username || 'Admin' }}
        </a-descriptions-item>
        <a-descriptions-item label="账号ID">
           {{ userStore.user?.ID || 'Unknown' }}
        </a-descriptions-item>
        <a-descriptions-item label="手机号码">
           {{ userStore.user?.PhoneNumber || '未设置' }}
        </a-descriptions-item>
        <a-descriptions-item label="注册时间">
           {{ userStore.user?.CreatedAt ? new Date(userStore.user.CreatedAt).toLocaleString() : '未知' }}
        </a-descriptions-item>
      </a-descriptions>
    </a-card>

    <a-card class="settings-card" title="安全设置" style="margin-top: 20px">
       <div class="security-item">
         <span class="label">登录密码</span>
         <span class="desc">已设置。密码至少6位字符，支持数字、字母和除空格外的特殊字符，且必须同时包含数字和大小写字母。</span>
         <a-button type="text" @click="visible = true">修改</a-button>
       </div>
    </a-card>

    <!-- Password Reset Modal -->
    <a-modal v-model:visible="visible" title="修改密码" @ok="handlePasswordReset" @cancel="handleCancel">
      <a-form :model="pwdForm" layout="vertical">
        <a-form-item field="oldPassword" label="旧密码">
          <a-input-password v-model="pwdForm.oldPassword" placeholder="请输入旧密码" />
        </a-form-item>
        <a-form-item field="newPassword" label="新密码">
          <a-input-password v-model="pwdForm.newPassword" placeholder="请输入新密码" />
        </a-form-item>
        <a-form-item field="confirmPassword" label="确认新密码">
          <a-input-password v-model="pwdForm.confirmPassword" placeholder="请再次输入新密码" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { useUserStore } from '../../stores/user';
import { Message } from '@arco-design/web-vue';
import api from '../../api';

const userStore = useUserStore();
const visible = ref(false);

const pwdForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
});

onMounted(() => {
  userStore.getInfo();
});

const handlePasswordReset = async () => {
  if (!pwdForm.oldPassword || !pwdForm.newPassword) {
    Message.warning('请输入密码');
    return;
  }
  if (pwdForm.newPassword !== pwdForm.confirmPassword) {
    Message.error('两次输入的密码不一致');
    return;
  }
  
  try {
    await api.put('/system/user/profile/updatePwd', pwdForm);
    Message.success('密码修改成功');
    visible.value = false;
    handleCancel();
  } catch(e: any) {
    Message.error(e.response?.data?.error || '修改失败');
  }
};

const handleCancel = () => {
  pwdForm.oldPassword = '';
  pwdForm.newPassword = '';
  pwdForm.confirmPassword = '';
}
</script>

<style scoped>
.user-settings-container {
  padding: 20px;
}
.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.label {
  font-weight: 500;
  width: 100px;
  margin-right: 20px;
}
.desc {
  flex: 1;
  color: #86909c;
}
</style>

