<template>
  <div>
    <PageWrapper :title="`用户资料`" contentBackground @back="goBack">
      <Description size="middle" @register="register" />
    </PageWrapper>
  </div>
</template>

<script>
  import { defineComponent } from 'vue';
  import { useRoute } from 'vue-router';
  import { PageWrapper } from '/@/components/Page';
  import { useGo } from '/@/hooks/web/usePage';
  import { Description } from '/@/components/Description';
  import { getAccountInfo } from '/@/api/system/system';
  import { accountSchema } from './account.detail.data';
  import { useDescription } from '/@/components/Description';
  import { useTabs } from '/@/hooks/web/useTabs';
  const accountData = {};
  export default defineComponent({
    name: 'AccountDetail',
    components: { PageWrapper, Description },
    setup() {
      const route = useRoute();
      const go = useGo();
      const { setTitle, close } = useTabs();
      const [register, { setDescProps }] = useDescription({
        title: '账号基础信息',
        data: accountData,
        schema: accountSchema,
        column: 3,
      });
      getAccountInfo(route.params?.id).then((result) => {
        Reflect.set(accountData, 'remark', result.remark);
        Reflect.set(accountData, 'realName', result.realName);
        Reflect.set(accountData, 'phoneNumber', result.phoneNumber);
        Reflect.set(accountData, 'email', result.email);
        Reflect.set(accountData, 'username', result.username);
        Reflect.set(
          accountData,
          'enabled',
          result.enabled ? '正常' : !result.enabled ? '禁用' : '已过期'
        );
        Reflect.set(accountData, 'accountExpireTime', result.accountExpireTime);
        Reflect.set(accountData, 'createTime', result.createTime);
        Reflect.set(accountData, 'updateTime', result.updateTime);
        // 设置Tab的标题（不会影响页面标题）
        setTitle('详情：用户' + result.realName);
        setDescProps(accountData);
      });
      // 页面左侧点击返回链接时的操作
      function goBack() {
        // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
        close();
        go('/system/account');
      }
      return { goBack, accountSchema, accountData, register };
    },
  });
</script>

<style scoped>
  .vben-collapse-container {
    background-color: white !important;
  }
</style>