<template>
  <a-modal
    :width="500"
    :visible="visible"
    :footer="null"
    title="邀请注册"
    @update:visible="updateVisible"
  >
    <div style="text-align: center">
      <div style="margin-bottom: 20px">
        <a-typography-title :level="4">邀请新成员注册</a-typography-title>
        <a-typography-text type="secondary">
          分享以下链接或二维码，邀请新管理人员注册(非普通用户)
        </a-typography-text>
      </div>

      <!-- 邀请链接 -->
      <div style="margin-bottom: 20px">
        <a-input :value="invitationLink" readonly style="margin-bottom: 8px">
          <template #addonAfter>
            <a-button type="link" size="small" @click="copyLink">
              复制链接
            </a-button>
          </template>
        </a-input>
      </div>

      <!-- 二维码选择 -->
      <div style="margin-bottom: 16px">
        <a-radio-group v-model:value="qrCodeType" @change="onQRCodeTypeChange">
          <a-radio-button value="web">网页二维码</a-radio-button>
          <a-radio-button value="miniprogram">小程序码</a-radio-button>
        </a-radio-group>
      </div>

      <!-- 二维码显示 -->
      <div style="margin-bottom: 20px">
        <div
          style="
            display: inline-block;
            padding: 10px;
            background: white;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          "
        >
          <!-- 网页二维码 -->
          <ele-qr-code-svg
            v-if="qrCodeType === 'web'"
            :value="invitationLink"
            :size="200"
          />
          <!-- 小程序码 -->
          <div
            v-else-if="qrCodeType === 'miniprogram'"
            style="
              width: 200px;
              height: 200px;
              display: flex;
              align-items: center;
              justify-content: center;
            "
          >
            <img
              v-if="miniProgramCodeUrl"
              :src="miniProgramCodeUrl"
              style="width: 180px; height: 180px; object-fit: contain"
              alt="小程序码"
              @error="onMiniProgramCodeError"
              @load="onMiniProgramCodeLoad"
            />
            <a-spin v-else-if="loadingMiniCode" tip="正在生成小程序码..." />
            <div v-else style="color: #999; text-align: center">
              <div>小程序码加载失败</div>
              <a-button size="small" @click="loadMiniProgramCode"
                >重新加载</a-button
              >
            </div>
          </div>
        </div>
      </div>

      <!-- 使用说明 -->
      <div
        style="
          text-align: left;
          background: #f5f5f5;
          padding: 12px;
          border-radius: 4px;
          margin-bottom: 20px;
        "
      >
        <div style="font-weight: 500; margin-bottom: 8px">使用说明：</div>
        <div style="font-size: 12px; color: #666; line-height: 1.5">
          <template v-if="qrCodeType === 'web'">
            1. 复制邀请链接发送给用户，或让用户扫描网页二维码<br />
            2. 用户点击链接或扫码进入注册页面<br />
            3. 用户完成注册后，系统自动建立推荐关系<br />
            4. 您可以在"推荐关系管理"中查看邀请结果
          </template>
          <template v-else>
            1. 让用户扫描小程序码进入小程序<br />
            2. 小程序会自动识别邀请信息<br />
            3. 用户在小程序内完成注册后，系统自动建立推荐关系<br />
            4. 您可以在"推荐关系管理"中查看邀请结果
          </template>
        </div>
      </div>

      <!-- 调试信息 -->
      <div
        v-if="showDebugInfo"
        style="
          margin-bottom: 16px;
          padding: 8px;
          background: #f0f0f0;
          border-radius: 4px;
          font-size: 12px;
        "
      >
        <div><strong>调试信息:</strong></div>
        <div>邀请人ID: {{ inviterId }}</div>
        <div>邀请链接: {{ invitationLink }}</div>
        <div v-if="qrCodeType === 'miniprogram'"
          >小程序码URL: {{ miniProgramCodeUrl }}</div
        >
        <div>BaseUrl: {{ baseUrl }}</div>
      </div>

      <!-- 操作按钮 -->
      <div>
        <a-space>
          <a-button @click="downloadQRCode">下载二维码</a-button>
          <a-button type="primary" @click="copyLink">复制链接</a-button>
        </a-space>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, watch } from 'vue';
  import { message } from 'ant-design-vue/es';
  import { useRouter } from 'vue-router';
  import { generateInviteCode } from '@/api/miniprogram';

  const emit = defineEmits<{
    (e: 'update:visible', visible: boolean): void;
  }>();

  const props = defineProps<{
    visible: boolean;
    inviterId?: number; // 邀请人ID（当前登录用户ID）
  }>();

  // 二维码类型
  const qrCodeType = ref<'web' | 'miniprogram'>('web');
  // 小程序码URL
  const miniProgramCodeUrl = ref<string>('');
  // 小程序码加载状态
  const loadingMiniCode = ref(false);
  // 显示调试信息
  const showDebugInfo = ref(false);
  // 基础URL（用于调试）
  const baseUrl = ref('');

  // 获取邀请人ID
  const inviterId = computed(() => {
    return props.inviterId || Number(localStorage.getItem('UserId'));
  });

  // 邀请链接需要带上 tenantId，避免未登录用户打开链接时后端无法识别租户，导致角色/权限初始化失败
  const tenantId = computed(() => {
    const tid = localStorage.getItem('TenantId');
    return tid ? Number(tid) : undefined;
  });

  // 生成邀请链接
  const invitationLink = computed(() => {
    const baseUrl = window.location.origin;
    const params = new URLSearchParams();
    params.set('inviter', String(inviterId.value));
    if (tenantId.value) {
      params.set('tenantId', String(tenantId.value));
    }
    return `${baseUrl}/dealer/register?${params.toString()}`;
  });

  // 复制链接
  const copyLink = async () => {
    try {
      await navigator.clipboard.writeText(invitationLink.value);
      message.success('邀请链接已复制到剪贴板');
    } catch (e) {
      // 降级方案
      const textArea = document.createElement('textarea');
      textArea.value = invitationLink.value;
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand('copy');
      document.body.removeChild(textArea);
      message.success('邀请链接已复制到剪贴板');
    }
  };

  // 加载小程序码
  const loadMiniProgramCode = async () => {
    const currentInviterId = inviterId.value;
    if (!currentInviterId) {
      console.error('邀请人ID不存在');
      message.error('邀请人ID不存在');
      return;
    }

    console.log('开始加载小程序码，邀请人ID:', currentInviterId);
    loadingMiniCode.value = true;

    try {
      const codeUrl = await generateInviteCode(currentInviterId);
      console.log('小程序码生成成功:', codeUrl);
      miniProgramCodeUrl.value = codeUrl;
      message.success('小程序码加载成功');
    } catch (e: any) {
      console.error('加载小程序码失败:', e);
      message.error(`小程序码加载失败: ${e.message}`);
    } finally {
      loadingMiniCode.value = false;
    }
  };

  // 小程序码加载错误
  const onMiniProgramCodeError = () => {
    console.error('小程序码图片加载失败');
    message.error('小程序码显示失败');
  };

  // 小程序码加载成功
  const onMiniProgramCodeLoad = () => {
    console.log('小程序码图片加载成功');
  };

  // 二维码类型切换
  const onQRCodeTypeChange = () => {
    if (qrCodeType.value === 'miniprogram' && !miniProgramCodeUrl.value) {
      loadMiniProgramCode();
    }
  };

  // 下载二维码
  const downloadQRCode = () => {
    try {
      if (qrCodeType.value === 'web') {
        // 下载网页二维码 - 查找SVG元素
        const svgElement = document.querySelector(
          '.ant-modal-body svg'
        ) as SVGElement;
        if (svgElement) {
          // 将SVG转换为Canvas再下载
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          const img = new Image();

          // 获取SVG的XML字符串
          const svgData = new XMLSerializer().serializeToString(svgElement);
          const svgBlob = new Blob([svgData], {
            type: 'image/svg+xml;charset=utf-8'
          });
          const url = URL.createObjectURL(svgBlob);

          img.onload = () => {
            canvas.width = img.width || 200;
            canvas.height = img.height || 200;
            ctx?.drawImage(img, 0, 0);

            const link = document.createElement('a');
            link.download = `邀请注册二维码.png`;
            link.href = canvas.toDataURL('image/png');
            link.click();

            URL.revokeObjectURL(url);
            message.success('二维码已下载');
          };

          img.onerror = () => {
            URL.revokeObjectURL(url);
            message.error('二维码下载失败');
          };

          img.src = url;
        } else {
          message.error('未找到二维码，请稍后重试');
        }
      } else {
        // 下载小程序码
        if (miniProgramCodeUrl.value) {
          const link = document.createElement('a');
          link.download = `邀请小程序码.png`;
          link.href = miniProgramCodeUrl.value;
          link.target = '_blank';
          link.click();
          message.success('小程序码已下载');
        } else {
          message.error('小程序码未加载');
        }
      }
    } catch (e) {
      console.error('下载失败:', e);
      message.error('下载失败');
    }
  };

  // 更新visible
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };

  // 监听弹窗显示状态
  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        // 重置状态
        qrCodeType.value = 'web';
        miniProgramCodeUrl.value = '';
        loadingMiniCode.value = false;
        showDebugInfo.value = false;

        // 获取调试信息
        import('@/config/setting').then(({ SERVER_API_URL }) => {
          baseUrl.value = SERVER_API_URL;
        });
      }
    }
  );
</script>

<style lang="less" scoped>
  :deep(.ant-typography-title) {
    margin-bottom: 8px !important;
  }

  :deep(.ant-input-group-addon) {
    padding: 0;
  }
</style>
