<template>
  <div>
    <BasicModal
      width="650px"
      v-bind="$attrs"
      @register="registerModal"
      :title="getTitle"
      @ok="handleSubmit"
    >
      <PageWrapper :title="`用户资料`" contentBackground @back="goBack">
        <Description size="middle" @register="register" />
      </PageWrapper>
    </BasicModal>
  </div>
</template>

<script>
  import { defineComponent, ref } from 'vue';
  // import { useRoute } from 'vue-router';
  import { PageWrapper } from '/@/components/Page';
  import { useGo } from '/@/hooks/web/usePage';
  import { Description } from '../../../components/Description';
  import { useTabs } from '/@/hooks/web/useTabs';
  import { getAccountInfo } from '../../../api/system/system';
  import { accountSchema } from './account.detail.data';
  import { useDescription } from '../../../components/Description';
  import { BasicModal, useModalInner } from '/@/components/Modal';

  const accountData = {};
  export default defineComponent({
    name: 'AccountDetail',
    components: { PageWrapper, Description, BasicModal },
    setup() {
      // const route = useRoute();
      const go = useGo();
      const { setTitle } = useTabs();
      const getId = ref('');
      const getTitle = ref('');
      const [register, methods] = useDescription({
        title: '账号基础信息',
        data: accountData,
        bordered: false,
        schema: accountSchema,
        column: 3,
      });

      const [registerModal] = useModalInner(async (data) => {
        getId.value = await data.record.id;
        getAccountInfo(getId.value).then((result) => {
          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);
          Reflect.set(accountData, 'deptId', result.deptId);
          // 设置Tab的标题（不会影响页面标题）
          setTitle('详情：用户' + result.realName);
          getTitle.value = '详情：用户' + result.realName;
          methods.setDescProps(accountData);
        });
      });
      // 页面左侧点击返回链接时的操作
      function goBack() {
        // 本例的效果时点击返回始终跳转到账号列表页，实际应用时可返回上一页
        go('/system/account');
      }
      return { goBack, accountSchema, accountData, register, registerModal, getTitle };
    },
  });
</script>

<style></style>