<template>
  <div class="pdf-container">
    <client-only>
      <div v-if="loading" class="loading-container">
        <van-loading type="spinner" size="24px">{{ $t('common.loading') }}</van-loading>
      </div>
      <VuePdfEmbed
        v-if="pdfUrl"
        :source="pdfUrl"
        @rendered="handleRendered"
      />
    </client-only>
  </div>
</template>

<script setup>
import VuePdfEmbed from 'vue-pdf-embed'

const props = defineProps({
  pdfName: {
    type: String,
    required: true
  },
  type: {
    type: String,
    default: 'local', // 'local' 或 'remote'
  },
  isActive: {
    type: Boolean,
    default: false
  }
})

const loading = ref(true)
const pdfUrl = computed(() => {
  if (!props.pdfName) return ''
  return props.type === 'local' ? `/pdfs/${props.pdfName}.pdf` : props.pdfName
})

watch(() => props.isActive, (newVal) => {
  if (newVal) {
    loading.value = true
  }
})

const handleRendered = () => {
  loading.value = false
}
</script>

<style scoped>
.pdf-container {
  position: relative;
  min-height: 200px;
  width: 100%;
}

.loading-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

:deep(embed) {
  width: 100% !important;
}
</style>