<script setup lang="ts">
import { CircleCheck } from "@lucide/vue";
import AppDialog from "./AppDialog.vue";

defineProps<{
  mode: "sms" | "login";
  contact?: string;
}>();

defineEmits<{ close: [] }>();
</script>

<template>
  <AppDialog
    :title="mode === 'sms' ? '收不到验证码？' : '登录遇到问题'"
    :labelled-by="mode === 'sms' ? 'sms-help-title' : 'login-help-title'"
    @close="$emit('close')"
  >
    <ul class="help-list">
      <li><CircleCheck :size="18" aria-hidden="true" /><span>确认输入的是后台登记的本人手机号。</span></li>
      <li v-if="mode === 'sms'"><CircleCheck :size="18" aria-hidden="true" /><span>检查短信拦截、骚扰信息和手机信号。</span></li>
      <li><CircleCheck :size="18" aria-hidden="true" /><span>等待倒计时结束后再重新发送，避免频繁操作。</span></li>
      <li><CircleCheck :size="18" aria-hidden="true" /><span>网络异常时切换稳定网络后重试。</span></li>
    </ul>
    <p v-if="contact" class="support-contact">仍未解决，请联系工作人员：{{ contact }}</p>
    <p v-else class="support-contact">仍未解决，请联系大本营工作人员核对学员信息。</p>
    <template #footer>
      <button type="button" class="dialog-confirm" @click="$emit('close')">知道了</button>
    </template>
  </AppDialog>
</template>
