<template>
  <div class="office-viewer">
    <iframe
      :src="officeUrl"
      frameborder="0"
      width="100%"
      height="100%"
    />
    <div v-if="loading" class="loading-mask">
      <i class="el-icon-loading" /> 正在加载文档...
    </div>
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      required: true
    },
    webUrl: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      loading: true
    }
  },
  computed: {
    officeUrl() {
      // 使用微软Office Online预览服务
      return `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(this.url)}`
    }
  },
  mounted() {
    const iframe = this.$el.querySelector('iframe')
    iframe.onload = () => {
      this.loading = false
    }
  }
}
</script>

<style scoped>
.office-viewer {
  position: relative;
  height: 100%;
}

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
</style>
