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

import { Page } from '@vben/common-ui';
import { useUserStore } from '@vben/stores';

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

import UpdateAvatar from './components/update-avatar.vue';
import UpdateInfo from './components/update-info.vue';
import UpdatePassword from './components/update-password.vue';

const userStore = useUserStore();
const updatePasswordRef = ref();

const handleChange = (key: any) => {
  if (key === '2') {
    // 重置校验
    updatePasswordRef.value?.getFormApi()?.resetValidate();
  }
};
</script>

<template>
  <Page>
    <div class="grid grid-cols-3 gap-4">
      <Card class="col-span-1">
        <div class="flex justify-center">
          <UpdateAvatar :avatar="userStore.userInfo?.avatar" />
        </div>
        <div class="flex justify-center p-[8px]">
          {{ userStore.userInfo?.realName }}
        </div>
      </Card>
      <Card class="col-span-2">
        <Tabs @change="handleChange">
          <TabPane key="1" tab="基本设置">
            <UpdateInfo />
          </TabPane>
          <TabPane key="2" tab="修改密码">
            <UpdatePassword ref="updatePasswordRef" />
          </TabPane>
        </Tabs>
      </Card>
    </div>
  </Page>
</template>
