<template>
  <view class="popup-mask" v-if="visible" @click="handleClose">
    <view class="popup-content" @click.stop>
      <text class="popup-title">{{ t('qrcode.title') }}</text>
      <view class="qrcode-area">
        <!-- 二维码Canvas绘制区域 -->
        <canvas
          v-if="canvasReady"
          canvas-id="qrcodeCanvas"
          class="qrcode-canvas"
          :style="{ width: '400rpx', height: '400rpx' }"
        />
        <text v-if="loading" class="loading-text">{{ t('qrcode.refreshing') }}</text>
      </view>
      <view class="countdown-area" v-if="remainingTime > 0">
        <text class="countdown-text">{{ t('qrcode.expireIn', { time: formatTime(remainingTime) }) }}</text>
      </view>
      <view class="close-btn" @click="handleClose">
        <text class="close-text">{{ t('common.confirm') }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { watch, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { useQRCode } from '../utils/qrcode.js'
import { useUserStore } from '../stores/user.js'

const { t } = useI18n()
const userStore = useUserStore()

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close'])

const canvasReady = ref(false)

// 获取token的函数
async function getToken() {
  return userStore.token
}

// 使用二维码组合式函数，5分钟有效期
const { qrcodeData, remainingTime, loading, refresh, destroy } = useQRCode(getToken, 300000)

/**
 * 格式化剩余时间为 mm:ss 格式
 * @param {number} seconds - 剩余秒数
 * @returns {string} 格式化后的时间字符串
 */
function formatTime(seconds) {
  const min = Math.floor(seconds / 60)
  const sec = seconds % 60
  return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`
}

// 监听弹窗显示状态，打开时刷新二维码
watch(() => props.visible, (newVal) => {
  if (newVal) {
    canvasReady.value = true
    refresh()
  } else {
    canvasReady.value = false
  }
})

function handleClose() {
  emit('close')
}
</script>

<style scoped>
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.popup-content {
  width: 600rpx;
  background-color: #ffffff;
  border-radius: 24rpx;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.popup-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
  text-align: center;
  display: block;
  margin-bottom: 30rpx;
}

.qrcode-area {
  width: 400rpx;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.qrcode-canvas {
  width: 400rpx;
  height: 400rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
  position: absolute;
}

.countdown-area {
  margin-bottom: 30rpx;
}

.countdown-text {
  font-size: 26rpx;
  color: #ff6600;
}

.close-btn {
  width: 100%;
  height: 80rpx;
  background-color: #007aff;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-text {
  font-size: 28rpx;
  color: #ffffff;
}
</style>
