mp-10550/src/components/QRLoginScanner.tsx

import React from 'react';
import { View, Text } from '@tarojs/components';
import { Button, Loading } from '@nutui/nutui-react-taro';
import { Scan, Success, Failure } from '@nutui/icons-react-taro';
import { useQRLogin, ScanLoginState } from '@/hooks/useQRLogin';

export interface QRLoginScannerProps {
  /** 扫码成功回调 */
  onSuccess?: (result: any) => void;
  /** 扫码失败回调 */
  onError?: (error: string) => void;
  /** 自定义样式类名 */
  className?: string;
  /** 按钮文本 */
  buttonText?: string;
  /** 是否显示状态信息 */
  showStatus?: boolean;
}

/**
 * 扫码登录组件
 */
const QRLoginScanner: React.FC<QRLoginScannerProps> = ({
  onSuccess,
  onError,
  className = '',
  buttonText = '扫码登录',
  showStatus = true
}) => {
  const {
    state,
    error,
    result,
    isLoading,
    startScan,
    cancel,
    reset,
    canScan
  } = useQRLogin();

  // 处理扫码成功
  React.useEffect(() => {
    if (state === ScanLoginState.SUCCESS && result) {
      onSuccess?.(result);
    }
  }, [state, result, onSuccess]);

  // 处理扫码失败
  React.useEffect(() => {
    if (state === ScanLoginState.ERROR && error) {
      onError?.(error);
    }
  }, [state, error, onError]);

  // 获取状态显示内容
  const getStatusContent = () => {
    switch (state) {
      case ScanLoginState.SCANNING:
        return (
          <View className="flex items-center justify-center text-blue-500">
            <Loading className="mr-2" />
            <Text>请扫描登录二维码...</Text>
          </View>
        );
      
      case ScanLoginState.CONFIRMING:
        return (
          <View className="flex items-center justify-center text-orange-500">
            <Loading className="mr-2" />
            <Text>正在确认登录...</Text>
          </View>
        );
      
      case ScanLoginState.SUCCESS:
        return (
          <View className="flex items-center justify-center text-green-500">
            <Success className="mr-2" />
            <Text>登录确认成功！</Text>
          </View>
        );
      
      case ScanLoginState.ERROR:
        return (
          <View className="flex items-center justify-center text-red-500">
            <Failure className="mr-2" />
            <Text>{error || '扫码登录失败'}</Text>
          </View>
        );
      
      default:
        return null;
    }
  };

  // 获取按钮状态
  const getButtonProps = () => {
    const disabled = !canScan() || isLoading;
    
    switch (state) {
      case ScanLoginState.SCANNING:
      case ScanLoginState.CONFIRMING:
        return {
          loading: true,
          disabled: true,
          text: state === ScanLoginState.SCANNING ? '扫码中...' : '确认中...',
          onClick: cancel
        };
      
      case ScanLoginState.SUCCESS:
        return {
          loading: false,
          disabled: false,
          text: '重新扫码',
          onClick: reset
        };
      
      case ScanLoginState.ERROR:
        return {
          loading: false,
          disabled: false,
          text: '重试',
          onClick: startScan
        };
      
      default:
        return {
          loading: false,
          disabled,
          text: disabled ? '请先登录' : buttonText,
          onClick: startScan
        };
    }
  };

  const buttonProps = getButtonProps();

  return (
    <View className={`qr-login-scanner ${className}`}>
      {/* 扫码按钮 */}
      <Button
        type="primary"
        size="large"
        loading={buttonProps.loading}
        disabled={buttonProps.disabled}
        onClick={buttonProps.onClick}
        className="w-full"
      >
        {!buttonProps.loading && (
          <Scan className="mr-2" />
        )}
        {buttonProps.text}
      </Button>

      {/* 状态显示 */}
      {showStatus && (
        <View className="mt-4 text-center">
          {getStatusContent()}
        </View>
      )}

      {/* 成功结果显示 */}
      {state === ScanLoginState.SUCCESS && result && (
        <View className="mt-4 p-4 bg-green-50 rounded-lg">
          <Text className="text-sm text-green-700">
            已为用户 {result.userInfo?.nickname || result.userInfo?.userId} 确认登录
          </Text>
        </View>
      )}

      {/* 使用说明 */}
      {state === ScanLoginState.IDLE && (
        <View className="mt-4 text-center">
          <Text className="text-xs text-gray-500">
            扫描网页端显示的登录二维码即可快速登录
          </Text>
        </View>
      )}
    </View>
  );
};

export default QRLoginScanner;