<!-- src/components/FeishuLogin.vue -->
<template>
  <div class="feishu-login-container">
    <el-button type="primary" :loading="loading" @click="startFeishuLogin">
      <!-- <template #icon>
        <img src="@/assets/feishu-icon.png" alt="飞书" class="feishu-icon" />
      </template> -->
      飞书扫码登录
    </el-button>

    <el-dialog v-model="dialogVisible" title="飞书扫码登录" width="360px">
      <div class="qrcode-container" v-loading="qrLoading">
        <div v-if="qrCodeUrl" class="qrcode-wrapper">
          <!-- <qrcode-vue :value="qrCodeUrl" :size="200" level="H" /> -->
          <Qrcode :text="qrCodeUrl" :logo="logoImg" />
          <p class="scan-tip">请使用飞书APP扫码登录</p>
        </div>
        <div v-else class="error-tip">
          <el-alert type="error" :title="errorMsg" show-icon />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
// import QrcodeVue from 'qrcode.vue'
import { ElMessage } from 'element-plus'
import logoImg from '@/assets/imgs/logo.png'
import axios from 'axios'

const props = defineProps({
  redirectUri: {
    type: String,
    default: () => import.meta.env.VITE_FEISHU_REDIRECT_URI || 'http://122.152.216.7/business-app'
  },
  appId: {
    type: String,
    default: () => import.meta.env.VITE_FEISHU_APP_ID || 'cli_a834fd65ed3e100e'
  }
})

const loading = ref(false)
const dialogVisible = ref(false)
const qrLoading = ref(false)
const qrCodeUrl = ref('')
const errorMsg = ref('')
const pollTimer = ref(null)
const state = ref('') // 用于防止CSRF攻击的随机字符串

// 生成随机state
const generateState = () => {
  return Math.random().toString(36).substring(2, 15)
}

// 开始飞书登录流程
const startFeishuLogin = async () => {
  try {
    loading.value = true
    state.value = generateState()

    // 1. 获取扫码登录URL（通常需要后端支持，这里模拟前端直接获取）
    // 实际项目中，应该调用后端API获取，因为需要服务器端生成二维码内容
    // 这里简化处理，直接构造URL（注意：生产环境不推荐前端直接处理）
    const loginUrl = `https://passport.feishu.cn/suite/passport/oauth/authorize?
      client_id=${props.appId}&
      redirect_uri=${encodeURIComponent(props.redirectUri)}&
      response_type=code&
      state=${state.value}&
      scope=contact:contact.base:readonly`

    // 2. 显示二维码对话框
    dialogVisible.value = true
    qrLoading.value = true

    // 模拟获取二维码（实际应该调用后端API）
    // 这里我们直接使用登录URL作为二维码内容（实际应该使用后端生成的ticket）
    setTimeout(() => {
      qrCodeUrl.value = 'http://122.152.216.7/admin-api/oauthApi/authCode' //loginUrl
      qrLoading.value = false
      startPolling() // 开始轮询检查登录状态
    }, 500)
  } catch (error) {
    errorMsg.value = '初始化登录失败，请重试'
    ElMessage.error(errorMsg.value)
  } finally {
    loading.value = false
  }
}

// 轮询检查登录状态
const startPolling = () => {
  clearInterval(pollTimer.value)

  pollTimer.value = setInterval(async () => {
    try {
      // 这里应该调用后端API检查登录状态
      // 模拟检查
      const response = await axios.get('/api/feishu/check-login', {
        params: { state: state.value }
      })

      if (response.data.code === 0 && response.data.data.loggedIn) {
        clearInterval(pollTimer.value)
        dialogVisible.value = false
        ElMessage.success('登录成功')
        // 处理登录成功后的逻辑，如跳转页面
      }
    } catch (error) {
      console.error('轮询检查登录状态失败:', error)
    }
  }, 2000)
}

// 组件卸载时清除定时器
onBeforeUnmount(() => {
  clearInterval(pollTimer.value)
})
</script>

<style scoped>
.feishu-login-container {
  display: inline-block;
}

.feishu-icon {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}

.qrcode-container {
  padding: 20px 0;
  text-align: center;
}

.qrcode-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scan-tip {
  margin-top: 15px;
  font-size: 14px;
  color: #666;
}

.error-tip {
  padding: 20px;
}
</style>
