<template>
  <PageWrapper dense contentFullHeight contentClass="flex">
    <a-card class="w-1/2 xl:w-1/2">
      <List>
        <h1>11111</h1>
        <ListItem>11111</ListItem>
        <ListItem>22222</ListItem>
        <ListItem>33333</ListItem>
        <ListItem>44444</ListItem>
      </List>
    </a-card>
    <a-card
      class="w-1/2 xl:w-1/2"
      :active-tab-key="noTitleKey"
      :tab-list="tabListNoTitle"
      @tabChange="key => onTabChange(key, 'noTitleKey')"
    >
      <p v-if="noTitleKey === 'basicInformation'">
        <basicInformation />
      </p>
      <p v-if="noTitleKey === 'editPws'">
        <editPws />
      </p>
      <p v-if="noTitleKey === 'socialContact'">
        <socialContact />
      </p>
    </a-card>
  </PageWrapper>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { List, ListItem } from 'ant-design-vue';
  import { PageWrapper } from '/@/components/Page';
  // import { userAccountInfo } from '/@/api/sys/userAccountApi';
  import basicInformation from './basicInformation.vue';
  import editPws from './editPws.vue';
  import socialContact from './socialContact.vue';
  // onMounted(async () => {
  //   const res = await userAccountInfo();
  //   console.log(res);
  // });

  const key = ref('basicInformation');
  const noTitleKey = ref('basicInformation');
  // :tab-list="tabListNoTitle"
  const tabListNoTitle = [
    {
      key: 'basicInformation',
      tab: '基本资料',
    },
    {
      key: 'editPws',
      tab: '修改密码',
    },
    {
      key: 'socialContact',
      tab: '社交信息',
    },
  ];

  const onTabChange = (value, type) => {
    if (type === 'key') {
      key.value = value;
    } else if (type === 'noTitleKey') {
      noTitleKey.value = value;
    }
  };
</script>
<style lang="less"></style>
