<template>
  <div ref="excelBox">
    <file-review
      v-loading="showExcel"
      v-if="dataSource"
      ref="excel"
      :style="`height: ${ExcelHeight}px;`"
      :src="dataSource"
      @click:bottom-bar="handleClickBottomBar"
      @rendered="handleRendered"
      @error="handleError"
    ></file-review>
    <template v-else>
      <none-page></none-page>
    </template>
  </div>
</template>

<script>
import FileReview from '@/components/FileReview'
import NonePage from '@/components/Common/empty.vue'

export default {
  name: 'ExcelIndex',
  components: {
    FileReview,
    NonePage
  },
  props: {
    dataSource: {
      type: [String, File, ArrayBuffer],
      default: null
    },
    renderSheet: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      ExcelHeight: 0,
      ExcelWidth: 0,
      showExcel: false
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (this.$refs.excelBox) {
        this.ExcelHeight = this.$refs.excelBox.clientHeight
        this.ExcelWidth = this.$refs.excelBox.clientWidth
      }
    })
  },
  watch: {
    dataSource: {
      handler (val) {
        if (val) {
          this.showExcel = true
        }
      },
      immediate: true
    }
  },
  methods: {
    handleRendered () {
      this.showExcel = false
      if (!this.renderSheet) {
        return
      }
      // 渲染完毕，触发父组件的 initMap
      this.$emit('rendered')
    },
    handleClickBottomBar () {
      // 点击底部栏时触发父组件的 initMap
      this.$emit('click:bottom-bar')
    },
    handleError () {
      this.showExcel = false
      this.$emit('error')
    },
    // 暴露给父组件的方法，用于获取 Excel 行数据
    getRow (index) {
      return this.$refs.excel?.getRow(index)
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
