<template>
  <el-dialog
    :visible.sync="visible"
    width="500px"
    center
    append-to-body
    :modal="true"
    :show-close="canClose"
    :close-on-click-modal="false"
    custom-class="update-password-dialog"
    style="margin-top: 15vh;"
    @closed="onClosed"
    title=" "
  >
    <edit-password-form @success="onPasswordUpdated" />
  </el-dialog>
</template>

<script>
// 可以导入现有的修改密码表单组件
import EditPasswordForm from './EditPasswordForm.vue'

export default {
  name: 'UpdatePasswordDialog',
  components: {
    EditPasswordForm
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    canClose: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    onClosed() {
      this.$emit('update:visible', false)
    },
    onPasswordUpdated() {
      this.$emit('update:visible', false)
      this.$emit('success')
    }
  }
}
</script>

<style lang="scss" scoped>
:deep(.update-password-dialog) {
  height: auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
  
  .el-dialog__header {
    padding: 0;
    height: 0;
    position: relative;
    
    .el-dialog__title {
      display: none;
    }
  }
  
  .el-dialog__body {
    padding: 0; /* 移除内边距，让表单组件自己控制内边距 */
  }
  
  .el-dialog__headerbtn {
    top: 15px;
    right: 15px;
    z-index: 10;
    
    .el-dialog__close {
      color: #606262;
      font-size: 18px;
      
      &:hover {
        color: #0076f6;
      }
    }
  }
}

/* 添加进入和离开动画 */
.el-dialog__wrapper {
  :deep(.el-dialog) {
    transform: translateY(0);
    transition: transform 0.3s ease-out, opacity 0.3s ease;
    opacity: 1;
  }
}

.el-dialog__wrapper.dialog-fade-enter-active {
  :deep(.el-dialog) {
    transform: translateY(-20px);
    opacity: 0;
  }
}

.el-dialog__wrapper.dialog-fade-leave-active {
  :deep(.el-dialog) {
    transform: translateY(20px);
    opacity: 0;
  }
}
</style>