<script setup lang="ts">
import { ref } from 'vue';

import { Card, Tabs } from 'ant-design-vue';

import { getUserInfo } from '#/api';
import BasicForm from '#/views/person/modules/basic-form.vue';
import PasswordForm from '#/views/person/modules/password-form.vue';
import UserPanel from '#/views/person/modules/user-panel.vue';

const userInfo = ref();
const permissions = ref();
getUserInfo().then((res) => {
  userInfo.value = res.user;
  permissions.value = res.permissions;
});
</script>

<template>
  <div class="flex flex-col gap-4 p-4" style="height: 75vh">
    <Card>
      <UserPanel :user-info="userInfo" :permissions="permissions" />
    </Card>

    <Card>
      <!-- 使用 Tabs 切换组件 -->
      <Tabs default-active-key="BasicForm" class="px-4">
        <Tabs.TabPane key="BasicForm" tab="用户信息">
          <BasicForm :user-info="userInfo" />
        </Tabs.TabPane>
        <Tabs.TabPane key="PasswordForm" tab="修改密码">
          <PasswordForm />
        </Tabs.TabPane>
      </Tabs>
    </Card>
  </div>
</template>

<style scoped>
:deep(.ant-card-body) {
  padding: 0;
}

:deep(.ant-tabs-content) {
  padding: 16px;
}
</style>
