<template>
  <div class="captcha-wrapper">
    <Captcha
      ref="captchaRef"
      :width="300"
      :height="100"
      :borderColor="'#e2e8f0'"
      :bgColor="'#ffffff'"
      :clickRefresh="true"
      :failRefresh="false"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Captcha, { CaptchaInstance } from 'vue3-captcha'

// 验证码组件引用
const captchaRef = ref<CaptchaInstance>(null)

/**
 * 验证用户输入的验证码
 * @param userInput - 用户输入的值
 * @returns boolean - 验证是否成功
 */
const validate = (userInput: string): boolean => {
  return captchaRef.value?.check(userInput) ?? false
}

/**
 * 手动刷新验证码
 */
const refresh = () => {
  captchaRef.value?.refresh()
}

// 暴露方法给父组件
defineExpose({ 
  validate, 
  refresh,
  captchaRef 
})
</script>

<style scoped>
.captcha-wrapper {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}

/* 验证码图片样式 */
:c-deep(.captcha-canvas) {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 刷新按钮样式 */
:c-deep(.captcha-refresh) {
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

:c-deep(.captcha-refresh:hover) {
  opacity: 1;
}
</style>
