<template>
  <div>
    <div v-if="!complete">
      loading...
      {{ completeDownload }}
      {{ downloadTotal }}
    </div>
    <slot v-else/>
  </div>
</template>

<script>
export default {
  props: {
    iamges: {
      type: Array,
      default: () => {
        return []
      }
    },
  },
  data() {
    return {
      loading: true,
      downloadImage: 0,
      downloadAudio: 0,
      downloadTotal: 0,
    }
  },
  computed: {
    // 总共完成加载数量
    completeDownload() {
      const { downloadImage, downloadAudio } = this
      return (downloadImage + downloadAudio)
    },
    complete() {
      const { completeDownload, downloadTotal } = this
      return completeDownload === downloadTotal
    },
  },
  watch: {},
  methods: {
    loadResources() {
      const { imagesSrcList, audioSrcList } = this
      const imagesLength = imagesSrcList.length
      const audioLength = 0 // audioSrcList.length // 先不判断音频数量
      this.downloadTotal = imagesLength + audioLength
      imagesSrcList.forEach(src => {
        const img = new Image()
        img.src = src
        if (img.complete) {
          this.downloadImage++
        } else {
          img.onload = () => {
            this.downloadImage++
          }
          img.onerror = () => {
            this.downloadImage++
          }
        }
      })
      audioSrcList.forEach(src => {
        const audio = new Audio()
        audio.src = src
        // audio.addEventListener('canplay', () => {
        //   this.downloadAudio++
        // })
      })
    },
  },
}
</script>
