<template>
  <Dialog v-model="dialogVisible" title="个人空间">
    <el-card class="user" shadow="hover" style="border: none;">
      <div @click.stop="change" class="setting">
        <el-icon size="20" color="rgb(220 223 231)" class="mt-5px">
          <Setting />
        </el-icon>
      </div>
      <ProfileUser />
    </el-card>
  </Dialog>
  <ChangeAllInfo ref="ChangeAllInfoRef"  />

</template>
<script lang="ts" setup>
import {  ProfileUser } from './components'
import ChangeAllInfo from './components/ChangeAllInfo.vue'
import { Setting } from '@element-plus/icons-vue'
const ChangeAllInfoRef = ref()

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const { t } = useI18n()
defineOptions({ name: 'Profile' })
/** 被父组件打开弹窗 */
const open = async () => {
  dialogVisible.value = true
}
// 打开子组件弹窗
const change = () => {
  ChangeAllInfoRef.value?.open()

}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗


</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;
  }
}

.user {
  width: 100%;
  max-height: 960px;
  position: relative;

  /* padding: 15px 20px 20px; */
  &:hover {
    .setting {
      display: block;
    }
  }
}

.setting {
  width: 30px;
  top: 0px;
  right: 0px;
  position: absolute;
  cursor: pointer;
  height: 30px;
  line-height: 30px;
  text-align: center;
  display: none;
}

.setting:hover {
  background: #666
}

.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>
