<template>
  <div class="flex">
    <el-card class="user mobile-card" shadow="hover">
        
      <div class="mobile-card-title"><Icon  icon="ep:user" />{{ t('profile.user.title') }}</div>
      <ProfileUser />
    </el-card>
     <!-- <el-card class="user ml-3 w-2/3" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>{{ t('profile.info.title') }}</span>
        </div>
      </template>
      <div>
        <el-tabs v-model="activeName" class="profile-tabs" style="height: 400px" tab-position="top">
          <el-tab-pane :label="t('profile.info.basicInfo')" name="basicInfo">
            <BasicInfo />
          </el-tab-pane>
          <el-tab-pane :label="t('profile.info.resetPwd')" name="resetPwd">
            <ResetPwd />
          </el-tab-pane>
           <el-tab-pane :label="t('profile.info.userSocial')" name="userSocial">
            <UserSocial v-model:activeName="activeName" />
          </el-tab-pane> 
        </el-tabs>
      </div>
    </el-card> -->
  </div>
  
</template>
<script lang="ts" setup>
import { BasicInfo, ProfileUser, ResetPwd, UserSocial } from './components'
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const { t } = useI18n()
defineOptions({ name: 'Profile' })
const activeName = ref('basicInfo')
/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
}
onMounted(() => {
  // 当子组件挂载时，改变父组件的样式
  document.getElementsByTagName('section')[1].style.padding = '0px';
  document.getElementsByTagName('section')[1].style.width = '100%';
  document.getElementsByTagName('section')[1].querySelector('div').style.border = 'none';
  document.getElementsByTagName('section')[1].style.background = '#f5f7f9';
});
onUnmounted(() => {
  // 当子组件卸载时，恢复父组件的原始样式
  document.getElementsByTagName('section')[1].style.width = 'auto';
  document.getElementsByTagName('section')[1].style.padding = '20px';
  document.getElementsByTagName('section')[1].style.background = 'var(--el-color-white)';
});

</script>
<style scoped>
/* 卡片 */
.mobile-card{
  background-color: white; 
  margin: 1rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  & ::v-deep .el-row:last-child .el-col:last-child .el-form-item{
    border-bottom: none;
  }
  & ::v-deep .el-form{
    border-bottom: 1px solid #ebeef5;
  }
  & ::v-deep .el-form:last-child{
    border-bottom: none;
  }
  .upload-box{
    display: flex;
    align-items: center;
    padding: .5rem 0;
  }
  .mobile-card-title{
    font-size: 1rem;
    font-weight: 600;
    padding: 1rem 0;
    border-bottom: 1px solid #ebeef5;
    display: flex;
    align-items: center;
  }
}
.user {
  width: 100%;
  max-height: 960px;
  /* padding: 15px 20px 20px; */
}
.user ::v-deep .el-card__body{
  padding: unset;
}
.card-header {
  display: flex;
  justify-content: center;
  align-items: center;
}

:deep(.el-card .el-card__header, .el-card .el-card__body) {
  padding: 15px !important;
}

.profile-tabs > .el-tabs__content {
  padding: 32px;
  font-weight: 600;
  color: #6b778c;
}

.el-tabs--left .el-tabs__content {
  height: 100%;
}
</style>
