<!--
 * @Author: 赵丽婷
 * @Date: 2025-12-14 13:43:43
 * @LastEditors: 赵丽婷
 * @LastEditTime: 2025-12-14 15:55:39
 * @FilePath: \LinkMed\linkmed-vue3\src\components\Settings\BindEmailConfirm.vue
 * @Description: 
 * Copyright (c) 2025 by 北京连心医疗科技有限公司, All Rights Reserved. 
-->
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { service as http } from "@/utils/request";

type Status = "loading" | "success" | "error";

const route = useRoute();
const router = useRouter();

const status = ref<Status>("loading");
const message = ref("正在确认邮箱绑定，请稍候…");

onMounted(async () => {
  const token = route.query.token as string;
  const email = route.query.email as string;

  if (!token || !email) {
    status.value = "error";
    message.value = "绑定链接无效（参数缺失）";
    return;
  }

  try {
    await http.post("/users/bind-email/confirm", null, {
      params: { token, email },
    });
    status.value = "success";
    message.value = "邮箱绑定成功";
    // 延迟1.5秒后重定向到设置页面
    setTimeout(() => {
      router.push("/app/settings");
    }, 1500);
  } catch (err: any) {
    status.value = "error";
    message.value =
      err?.response?.data?.message || "绑定失败，链接可能已失效或邮箱已被使用";
  }
});
</script>

<template>
  <div class="bind-email-page">
    <p v-if="status === 'loading'">
      {{ message }}
    </p>
    <p v-if="status === 'success'" class="success">
      {{ message }}
    </p>
    <p v-if="status === 'error'" class="error">
      {{ message }}
    </p>
  </div>
</template>

<style scoped>
.bind-email-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f8fa;
}

.success {
  color: #2ecc71;
}

.error {
  color: #e74c3c;
}
</style>