<template>
  <div class="qr-login-demo">
    <a-card title="二维码登录演示" :bordered="false">
      <div class="demo-content">
        <!-- 二维码登录组件 -->
        <QrLogin
          @loginSuccess="handleLoginSuccess"
          @loginError="handleLoginError"
        />

        <!-- 演示控制面板 -->
        <div class="demo-controls">
          <h4>演示控制</h4>
          <a-space direction="vertical" style="width: 100%">
            <a-button @click="simulateScanned" type="primary" ghost>
              模拟扫码
            </a-button>
            <a-button @click="simulateConfirmed" type="primary">
              模拟确认登录
            </a-button>
            <a-button @click="simulateExpired" type="default">
              模拟过期
            </a-button>
            <a-button @click="simulateError" danger> 模拟错误 </a-button>
          </a-space>
        </div>

        <!-- 状态显示 -->
        <div class="demo-status">
          <h4>当前状态</h4>
          <a-descriptions :column="1" size="small">
            <a-descriptions-item label="二维码Key">
              {{ currentQrKey || '未生成' }}
            </a-descriptions-item>
            <a-descriptions-item label="状态">
              <a-tag :color="getStatusColor(currentStatus)">
                {{ getStatusText(currentStatus) }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="剩余时间">
              {{ remainingTime }}秒
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
    </a-card>

    <!-- 日志显示 -->
    <a-card title="操作日志" :bordered="false" style="margin-top: 16px">
      <div class="demo-logs">
        <div
          v-for="(log, index) in logs"
          :key="index"
          class="log-item"
          :class="log.type"
        >
          <span class="log-time">{{ log.time }}</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import QrLogin from './index.vue';

  // 响应式数据
  const currentQrKey = ref<string>('');
  const currentStatus = ref<string>('loading');
  const remainingTime = ref<number>(300);
  const logs = ref<Array<{ time: string; message: string; type: string }>>([]);

  // 添加日志
  const addLog = (
    message: string,
    type: 'info' | 'success' | 'error' | 'warning' = 'info'
  ) => {
    const now = new Date();
    const time = now.toLocaleTimeString();
    logs.value.unshift({ time, message, type });

    // 限制日志数量
    if (logs.value.length > 50) {
      logs.value = logs.value.slice(0, 50);
    }
  };

  // 获取状态颜色
  const getStatusColor = (status: string) => {
    const colors = {
      loading: 'blue',
      active: 'green',
      scanned: 'orange',
      expired: 'red',
      error: 'red'
    };
    return colors[status] || 'default';
  };

  // 获取状态文本
  const getStatusText = (status: string) => {
    const texts = {
      loading: '正在生成',
      active: '等待扫码',
      scanned: '已扫码',
      expired: '已过期',
      error: '生成失败'
    };
    return texts[status] || status;
  };

  // 处理登录成功
  const handleLoginSuccess = (token: string) => {
    addLog(`登录成功，获得token: ${token.substring(0, 20)}...`, 'success');
    message.success('二维码登录成功！');
  };

  // 处理登录错误
  const handleLoginError = (error: string) => {
    addLog(`登录失败: ${error}`, 'error');
    message.error(`登录失败: ${error}`);
  };

  // 模拟扫码
  const simulateScanned = () => {
    currentStatus.value = 'scanned';
    addLog('模拟用户扫码', 'info');
    message.info('模拟扫码成功');
  };

  // 模拟确认登录
  const simulateConfirmed = () => {
    const mockToken = 'mock_token_' + Date.now();
    handleLoginSuccess(mockToken);
  };

  // 模拟过期
  const simulateExpired = () => {
    currentStatus.value = 'expired';
    remainingTime.value = 0;
    addLog('模拟二维码过期', 'warning');
    message.warning('二维码已过期');
  };

  // 模拟错误
  const simulateError = () => {
    currentStatus.value = 'error';
    addLog('模拟生成二维码失败', 'error');
    handleLoginError('网络连接失败');
  };

  // 组件挂载
  onMounted(() => {
    addLog('二维码登录演示组件已加载', 'info');

    // 模拟生成二维码
    setTimeout(() => {
      currentQrKey.value = 'demo_qr_' + Date.now();
      currentStatus.value = 'active';
      addLog(`生成二维码成功，Key: ${currentQrKey.value}`, 'success');

      // 开始倒计时
      const timer = setInterval(() => {
        if (remainingTime.value > 0) {
          remainingTime.value--;
        } else {
          clearInterval(timer);
          if (currentStatus.value === 'active') {
            simulateExpired();
          }
        }
      }, 1000);
    }, 1000);
  });
</script>

<style lang="less" scoped>
  .qr-login-demo {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }

  .demo-content {
    display: grid;
    grid-template-columns: 1fr 200px 200px;
    gap: 24px;
    align-items: start;
  }

  .demo-controls {
    h4 {
      margin-bottom: 12px;
      color: #333;
    }
  }

  .demo-status {
    h4 {
      margin-bottom: 12px;
      color: #333;
    }
  }

  .demo-logs {
    max-height: 300px;
    overflow-y: auto;
    background: #f8f9fa;
    border-radius: 4px;
    padding: 12px;
  }

  .log-item {
    display: flex;
    margin-bottom: 8px;
    font-size: 12px;
    line-height: 1.4;

    &:last-child {
      margin-bottom: 0;
    }

    .log-time {
      color: #999;
      margin-right: 8px;
      min-width: 80px;
    }

    .log-message {
      flex: 1;
    }

    &.info .log-message {
      color: #333;
    }

    &.success .log-message {
      color: #52c41a;
    }

    &.error .log-message {
      color: #ff4d4f;
    }

    &.warning .log-message {
      color: #faad14;
    }
  }

  @media (max-width: 768px) {
    .demo-content {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }
</style>
