<template>
  <el-dialog
    v-model="visible"
    :title="dialogTitle"
    width="420px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <div class="captcha-content">
      <!-- 短信验证码 -->
      <template v-if="type === 'sms'">
        <el-icon class="captcha-icon"><Message /></el-icon>
        <p class="captcha-desc">
          为确保是本人操作抖音账号，请输入手机号 
          <span class="phone">{{ phone || '***' }}</span> 
          收到的短信验证码
        </p>
        <p class="captcha-tip">验证码已发送，请注意查收短信</p>
      </template>
      
      <!-- 图形验证码 -->
      <template v-else-if="type === 'image'">
        <el-icon class="captcha-icon"><Picture /></el-icon>
        <p class="captcha-desc">
          为保护帐号安全，请根据图片输入验证码
        </p>
        <div class="captcha-image-wrapper" v-if="imageBase64">
          <img :src="imageBase64" alt="验证码" class="captcha-image" />
          <el-button 
            text 
            type="primary" 
            size="small" 
            class="refresh-btn"
            @click="$emit('refresh')"
          >
            <el-icon><Refresh /></el-icon>
            看不清？刷新
          </el-button>
        </div>
        <div v-else class="captcha-browser-notice">
          <el-icon class="browser-icon"><Monitor /></el-icon>
          <p class="notice-title">请在浏览器窗口中完成验证</p>
          <p class="notice-desc">系统已打开浏览器窗口，请直接在浏览器中输入验证码</p>
          <p class="notice-tip">完成后此弹框会自动关闭</p>
        </div>
      </template>
      
      <!-- 只有在有图片或者是短信验证码时才显示输入框 -->
      <template v-if="type === 'sms' || imageBase64">
        <el-input
          v-model="captchaCode"
          :placeholder="inputPlaceholder"
          :maxlength="type === 'sms' ? 6 : 10"
          class="captcha-input"
          @keyup.enter="handleSubmit"
        >
          <template #prefix>
            <el-icon><Lock /></el-icon>
          </template>
        </el-input>
      </template>
    </div>
    
    <template #footer>
      <!-- 浏览器窗口模式只显示关闭按钮 -->
      <template v-if="type === 'image' && !imageBase64">
        <el-button @click="handleCancel">关闭提示</el-button>
      </template>
      <template v-else>
        <el-button @click="handleCancel">取消</el-button>
        <el-button 
          type="primary" 
          @click="handleSubmit"
          :disabled="!captchaCode || captchaCode.length < minCodeLength"
        >
          确认
        </el-button>
      </template>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { Message, Lock, Picture, Refresh, Monitor } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const props = defineProps<{
  modelValue: boolean;
  captchaTaskId: string;
  type?: 'sms' | 'image';
  phone?: string;
  imageBase64?: string;
}>();

const emit = defineEmits<{
  (e: 'update:modelValue', value: boolean): void;
  (e: 'submit', captchaTaskId: string, code: string): void;
  (e: 'cancel'): void;
  (e: 'refresh'): void;
}>();

const visible = ref(false);
const captchaCode = ref('');

const captchaType = computed(() => props.type || 'sms');

const dialogTitle = computed(() => {
  return captchaType.value === 'sms' ? '短信验证码' : '图形验证码';
});

const inputPlaceholder = computed(() => {
  return captchaType.value === 'sms' ? '请输入短信验证码' : '请输入图片中的验证码';
});

const minCodeLength = computed(() => {
  return captchaType.value === 'sms' ? 4 : 1;
});

watch(() => props.modelValue, (val) => {
  visible.value = val;
  if (val) {
    captchaCode.value = '';
  }
});

watch(visible, (val) => {
  emit('update:modelValue', val);
});

function handleSubmit() {
  if (!captchaCode.value || captchaCode.value.length < minCodeLength.value) {
    ElMessage.warning('请输入正确的验证码');
    return;
  }
  
  emit('submit', props.captchaTaskId, captchaCode.value);
  visible.value = false;
}

function handleCancel() {
  emit('cancel');
  visible.value = false;
}
</script>

<style lang="scss" scoped>
.captcha-content {
  text-align: center;
  padding: 20px 0;
  
  .captcha-icon {
    font-size: 48px;
    color: var(--el-color-primary);
    margin-bottom: 16px;
  }
  
  .captcha-desc {
    font-size: 14px;
    color: #666;
    margin-bottom: 16px;
    line-height: 1.6;
    
    .phone {
      font-weight: bold;
      color: var(--el-color-primary);
    }
  }
  
  .captcha-image-wrapper {
    margin: 16px 0;
    
    .captcha-image {
      max-width: 100%;
      max-height: 150px;
      border: 1px solid #e4e7ed;
      border-radius: 4px;
      display: block;
      margin: 0 auto;
    }
    
    .refresh-btn {
      margin-top: 8px;
    }
  }
  
  .captcha-browser-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 30px 0;
    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
    border-radius: 8px;
    margin: 16px 0;
    
    .browser-icon {
      font-size: 48px;
      color: var(--el-color-primary);
    }
    
    .notice-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin: 8px 0 0 0;
    }
    
    .notice-desc {
      font-size: 14px;
      color: #666;
      margin: 4px 0 0 0;
    }
    
    .notice-tip {
      font-size: 12px;
      color: #999;
      margin: 8px 0 0 0;
    }
  }
  
  .captcha-input {
    width: 220px;
    margin-top: 16px;
    
    :deep(.el-input__inner) {
      text-align: center;
      font-size: 18px;
      letter-spacing: 4px;
    }
  }
  
  .captcha-tip {
    font-size: 12px;
    color: #999;
    margin-top: 12px;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
