<template>
  <div class="fileOnlineView">
    <el-dialog
      title="文件在线预览"
      :show-close="true"
      :modal="false"
      :append-to-body="false"
      :destroy-on-close="true"
      :before-close="closeMapDispatch"
      :visible.sync="mapDispatchDialog"
    >
      <div style="width: 100%; height: 100%" id="handout_wrap_inner">
        <vue-office-excel :src="value" @rendered="rendered" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
export default {
  components: {
    VueOfficeExcel
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      excel: '',
      mapDispatchDialog: false
    }
  },
  watch: {
    value(newVal) {
      this.$nextTick(() => {
        this.mapDispatchDialog = newVal ? true : false
      })
    }
  },
  methods: {
    rendered() {
      console.log('渲染完成')
    },
    closeMapDispatch() {
      this.$emit('input', '')
    }
  }
}
</script>

<style lang="scss">
.fileOnlineView {
  .el-dialog__wrapper {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
  }
  .el-dialog {
    margin: 0 !important;
    width: 100%;
    height: 100%;
  }
  .el-dialog__body {
    padding: 0 !important;
    width: 100%;
    height: calc(100% - 58px);
    position: relative;
  }
}
</style>
