<template>
  <el-dialog
    v-model="visible"
    title="安全验证"
    width="400px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="!loading"
  >
    <div class="captcha-container">
      <p class="captcha-desc">{{ description }}</p>
      <div class="captcha-image-wrapper">
        <img
          v-if="captchaImage"
          :src="captchaImage"
          alt="验证码"
          class="captcha-image"
          @click="refreshCaptcha"
          title="点击刷新"
        />
        <el-skeleton v-else :rows="3" animated />
      </div>
      <el-input
        v-model="captchaCode"
        placeholder="请输入验证码"
        maxlength="4"
        size="large"
        @keyup.enter="handleConfirm"
      >
        <template #append>
          <el-button @click="refreshCaptcha" :icon="RefreshRight" />
        </template>
      </el-input>
    </div>
    <template #footer>
      <el-button @click="handleCancel" :disabled="loading">取消</el-button>
      <el-button type="primary" @click="handleConfirm" :loading="loading">
        确认
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { RefreshRight } from '@element-plus/icons-vue';
import { getCaptcha } from '@/api/CommonApi.js';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  description: {
    type: String,
    default: '请完成安全验证以继续操作'
  }
});

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel']);

const visible = ref(false);
const captchaId = ref('');
const captchaImage = ref('');
const captchaCode = ref('');
const loading = ref(false);

// 监听 modelValue 变化
watch(() => props.modelValue, (val) => {
  visible.value = val;
  if (val) {
    refreshCaptcha();
  }
});

// 监听 visible 变化
watch(() => visible.value, (val) => {
  emit('update:modelValue', val);
  if (!val) {
    captchaCode.value = '';
  }
});

// 刷新验证码
const refreshCaptcha = async () => {
  try {
    const res = await getCaptcha();
    if (res && res.captchaId && res.captchaImage) {
      captchaId.value = res.captchaId;
      captchaImage.value = res.captchaImage;
      captchaCode.value = '';
    }
  } catch (error) {
    // 错误已在 axios 拦截器中显示，这里不再重复显示
    console.error('获取验证码失败:', error);
  }
};

// 确认
const handleConfirm = () => {
  if (!captchaCode.value || captchaCode.value.length < 4) {
    ElMessage.warning('请输入完整的验证码');
    return;
  }
  emit('confirm', {
    captchaId: captchaId.value,
    captchaCode: captchaCode.value
  });
};

// 取消
const handleCancel = () => {
  visible.value = false;
  emit('cancel');
};

// 暴露方法
defineExpose({
  refreshCaptcha
});
</script>

<style scoped>
.captcha-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.captcha-desc {
  color: #606266;
  font-size: 14px;
  margin: 0;
}

.captcha-image-wrapper {
  width: 200px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;
  border-radius: 4px;
  overflow: hidden;
}

.captcha-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  transition: opacity 0.2s;
}

.captcha-image:hover {
  opacity: 0.8;
}

:deep(.el-input) {
  width: 200px;
}
</style>
