<template>
  <Dialog v-model="dialogVisible" title="个人空间">
    
    <div class="left">
      <UserAvatar :img="formData.avatar"/>
      <!-- <SPuUploadImg v-model="formData.avatar" :disabled="!basicInfoChange" /> -->
      <el-tabs v-model="activeName" class="child-tabs"  tab-position="left"  @tab-click="handleClick">
        <el-tab-pane :label="t('profile.info.basicInfo')" name="basicInfo" />
        <el-tab-pane :label="t('profile.info.resetPwd')" name="resetPwd"/>
      </el-tabs>
    </div>
    
    <div class="right">
      <BasicInfo ref="BasicInfoRef" v-if="activeName == 'basicInfo'" :change="basicInfoChange"/>
      <ResetPwd ref="ResetPwdRef" v-if="activeName == 'resetPwd'"/>
    </div>
    <div style="clear: both;"></div>
    <!-- 底部对话框操作按钮 -->
    <template #footer>
      <el-button  v-show="activeName == 'basicInfo' && !basicInfoChange" @click="baseInfoChange()">变动</el-button>
      <el-button type="primary" v-show="activeName == 'basicInfo' && basicInfoChange" @click="baseInfoChange()">取消</el-button>
      <XButton :title="t('common.save')"  v-if="activeName == 'basicInfo' && basicInfoChange"  type="primary" @click="basicInfoSubmit()" />
      <XButton :title="t('common.reset')"  v-if="activeName == 'basicInfo' && basicInfoChange"  type="danger" @click="basicInfoInit()" />

      <XButton :title="t('common.save')" v-if="activeName == 'resetPwd'" type="primary" @click="resetPwdSubmit()" />
      <XButton :title="t('common.reset')" v-if="activeName == 'resetPwd'" type="danger" @click="resetPwdReset()" />
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import UserAvatar from './UserAvatar.vue'

import { BasicInfo, ResetPwd } from './'
const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
import { getUserProfile, ProfileVO } from '@/api/system/user/profile'
const message = useMessage() // 消息弹窗
const formData = ref({})

const getUserInfo = async () => {
  const data = await getUserProfile()
  formData.value = data

}
const handleClick = (tab) => {
  basicInfoChange.value = false
}

const basicInfoChange = ref(false)
const BasicInfoRef = ref()
const ResetPwdRef = ref()
// 调用基本资料里面的函数
const baseInfoChange = () => {
  basicInfoChange.value = !basicInfoChange.value
}
const basicInfoSubmit = () => {
  BasicInfoRef.value.submit()
  basicInfoChange.value = false
}
const basicInfoInit = () => {
  BasicInfoRef.value.init()
}
// 调用修改密码里面的函数和数据
const resetPwdSubmit = () => {
  ResetPwdRef.value.submit(ResetPwdRef.value.formRef)
}
const resetPwdReset = () => {
  ResetPwdRef.value.reset(ResetPwdRef.value.formRef)
}

onMounted(async () => {
  await getUserInfo()
})
watch(() => formData.value.avatar, (newVal, oldVal) => {
}, { deep: true });
const { t } = useI18n()
defineOptions({ name: 'ChangeAllInfo' })

const activeName = ref('basicInfo')
/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

</script>
<style scoped>

.left {
	width: 106px;
	float: left;
}
.child-tabs {
		border-top: 2px solid #e4e7ef;
		margin-top: -4px;
	}
	::v-deep .child-tabs .el-tabs__item {
		width: 106px;
		justify-content: center;
	}
.right {
	padding: 10px 0 60px 10px;
	border-left: 2px solid #e4e7ee;
	margin-left: -2px;
	float: left;
	width: calc(100% - 120px);
}

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