<template>
  <el-container class="accounts">
    <!-- 页面头部 -->
    <el-header>
      <h3 class="header-title">账户设置</h3>
    </el-header>

    <el-main>
      <el-row justify="center" class="button-row">
        <!-- 注销账号按钮 -->
        <el-col :span="24" class="action-col">
          <el-button type="danger" size="large" @click="showLogoutConfirm" class="action-btn">注销账号</el-button>
        </el-col>

        <!-- 修改密码按钮 -->
        <el-col :span="24" class="action-col">
          <el-button type="primary" size="large" @click="navigateToResetPassword" class="action-btn">修改密码</el-button>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import { useRouter } from 'vue-router'; // 如果是Vue 3

export default {
  setup() {
    const router = useRouter(); // 如果是Vue 3

    const showLogoutConfirm = () => {
      ElMessageBox.confirm(
        '您确定要注销您的账号吗？<br>此操作是不可逆的，并且会删除所有与该账号相关联的数据。<br>请谨慎操作。',
        '警告',
        {
          dangerouslyUseHTMLString: true, // 允许HTML字符串
          confirmButtonText: '取消', // 位置互换
          cancelButtonText: '我已阅读并同意注销', // 位置互换
          type: 'warning',
          center: true,
          showClose: false, // 隐藏右上角的关闭按钮
          beforeClose: (action, instance, done) => {
            if (action === 'cancel') { // 注意这里 action 是 'cancel' 表示确认
              // 用户点击“我已阅读并同意注销”后的逻辑，例如发送注销请求
              console.log('用户确认了注销');
              // 这里可以加入注销账号的API调用
              // 模拟异步操作
              setTimeout(() => {
                done(); // 关闭弹窗
                // 注销成功后的处理
              }, 1000);
            } else {
              done(); // 用户点击取消或关闭时直接关闭弹窗
            }
          },
        }
      ).catch(() => {
        // 用户取消注销
        console.log('用户取消了注销');
      });
    };

    const navigateToResetPassword = () => {
      router.push('/reset-password');
    };

    return {
      showLogoutConfirm,
      navigateToResetPassword,
    };
  },
};
</script>

<style scoped>
.accounts {
  padding: 30px;
  background-color: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.el-header {
  text-align: center;
  font-size: 26px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

.header-title {
  color: #409EFF;
  font-family: 'Helvetica', sans-serif;
}

.button-row {
  margin-top: 20px;
  text-align: center;
}

.action-col {
  margin-bottom: 20px;
}

.action-btn {
  width: 200px;
  height: 50px;
  font-size: 16px;
  border-radius: 25px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.action-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.custom-dialog .el-dialog__header {
  background-color: #409EFF;
  color: white;
}

.password-form .el-form-item {
  margin-bottom: 20px;
}

.input-field {
  border-radius: 25px;
  font-size: 14px;
  height: 40px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.el-form-item label {
  font-size: 14px;
  color: #555;
}

.dialog-footer {
  text-align: right;
}

.dialog-footer .el-button {
  border-radius: 20px;
}

.el-button--primary {
  background-color: #409EFF;
  border-color: #409EFF;
  transition: background-color 0.3s ease;
}

.el-button--primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}

</style>