<template>
  <div class="ebook" ref="ebookView">
    <ebook-bookmark></ebook-bookmark>
    <ebook-header></ebook-header>
    <!-- <ebook-title></ebook-title> -->
    <ebook-reader v-bind = "$attrs"></ebook-reader>
    <!-- <router-view></router-view> -->
    <ebook-menu></ebook-menu>
    <ebook-footer></ebook-footer>
  </div>
</template>

<script> 
  // import EbookTitle from './ebook/EbookTitle'
  import EbookMenu from './components/EbookMenu'
  import { ebookMixin } from './utils/mixin'
  import { getReadTime, saveReadTime, saveLocale, getLocation } from './utils/localStorage'
  import EbookHeader from './components/EbookHeader'
  import EbookFooter from './components/EbookFooter'
  import EbookReader from './components/EbookReader'
  import EbookBookmark from './components/EbookBookmark'

  export default {
    name: 'exe-epub-render',
    mixins: [ebookMixin],
    components: {
      EbookBookmark,
      EbookFooter,
      EbookHeader,
      EbookReader,
      // EbookTitle,
      EbookMenu
    },
    watch: {
      offsetY(v) {
        if (this.isPaginating !== null && this.isPaginating === false && !this.menuVisible) {
          if (v === 0) {
            this.restore()
          } else if (v > 0) {
            this.move(v)
          }
        }
      }
    },
    methods: {
      restore() {
        this.$refs.ebookView.style.top = 0
        this.$refs.ebookView.style.transition = 'all .2s linear'
        setTimeout(() => {
          this.$refs.ebookView.style.transition = ''
        }, 200)
      },
      move(offsetY) {
        this.$refs.ebookView.style.top = offsetY + 'px'
      },
      startLoopReadTime() {
        let readTime = getReadTime(this.fileName)
        if (!readTime) {
          readTime = 0
        }
        this.task = setInterval(() => {
          readTime++
          if (readTime % 30 === 0) {
            saveReadTime(this.fileName, readTime)
          }
        }, 1000)
      },
      // 获取阅读信息
      getReadInfo() {
        return new Promise((res, rej) => {
            this.timer = setInterval(() => {
              if(this.section && this.progress) {
                res({
                  section: this.section,
                  progress: this.progress,
                  chapter: getLocation(this.fileName),
                  readTime: getReadTime(this.fileName)
                })
                clearInterval(this.timer)
              }
            }, 1000);
        })
      }
    },
    created() {
      this.setGlobalTheme()
    },
    mounted() {
      this.startLoopReadTime()
      // 设置语言
      if(this.$attrs && this.$attrs.lang) {
        this.$i18n.locale = this.$attrs.lang
        saveLocale(this.$attrs.lang)
      }

      // 设置全局字体大小
      document.addEventListener('DOMContentLoaded', () => {
          let fontSize = window.innerWidth / 10
          fontSize = fontSize > 50 ? 50 : fontSize
          const html = document.querySelector('html')
          html.style.fontSize = fontSize + 'px'
      })
    },
    beforeDestroy() {
      if (this.task) {
        clearInterval(this.task)
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss">
  @import "./assets/styles/global";
  @import './assets/styles/icon.css';

  .ebook {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
  }
</style>
