<template>
  <div class="Load-main">
    <div class="Load-container">
      <div class="Load-box">
        <template v-for="(item,idx) in _loadTxt">
          <span class="Load-txt op0" v-html="item" :style="'--delayTime:'+idx*0.5+'s'"></span>
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
/**
 *
 * Load:
 * @author:黄勇文
 * @example:
 * <Load
 *  :loadTxt='这是你要传入的动画文本'
 *  :speed='这是你要传入的文本显示时间'
 *  :chockTime='这是等待文本隐藏的间隔时间'
 * />
 * */

const props = defineProps({
  loadTxt:{
    type:String,
    default:'Aerwen 工具箱'
  },
  speed:{
    type:Number,
    default:150,
  },
  chockTime:{
    type:Number,
    default:2000
  }
})

/**配置项**/

/**动画文本**/
let loadTxt = props.loadTxt || 'Aerwen 工具箱'
/**动画速度**/
let speed = props.speed || 150
/**等待文本隐藏时间**/
let chockTime = props.chockTime || 2000

/**格式优化**/
let _loadTxt = (()=>{
  let res = [],
      _i = 0
  for (let i = 0; i < loadTxt.length; i++) {
    let item = loadTxt[i]
    let _item = item === ' ' ? '&nbsp;' : item
    if(_item === '&nbsp;'){
      res[_i] += _item
    }else{
      _i = i
      res.push(_item)
    }
  }
  return res
})()

onMounted(()=>{
  document.body.style.overflowY='hidden'
  /**动画显示执行**/
  ;(()=>{

    ;[...document.getElementsByClassName('Load-txt')].map((item,idx)=>{
      setTimeout(()=>{
        item.classList.remove('op0')
      },idx*speed)
    })
  })();
  
  /**动画隐藏执行**/
  let hideAnimation = (async ()=>{
    /**阻塞动画**/
    await chockAnimation()
    let oTxt = [...document.getElementsByClassName('Load-txt')]
    let b = 0
    await new Promise(r=>{
      for (let i = oTxt.length-1; i >= 0; i--) {
        b+=1
        let item = oTxt[i]
        setTimeout((b)=>{
          item.classList.add('op0')
          if(b===oTxt.length){
            r(true)
          }
        },b*speed,b)
      }
    })
    /**显示页面**/
    await new Promise(r=>{
      setTimeout(()=>{
        r(true)
      },1000)
    })
    ;(()=>{
      document.getElementsByClassName('Load-box')[0].style.background = 'rgba(255,255,255,0)'
      setTimeout(()=>{
        document.getElementsByClassName('Load-box')[0].style.display = 'none'
        document.body.style.overflowY='auto'
      },400)
    })()
  })();


  function chockAnimation(){
    return new Promise(r=>{
      setTimeout(()=>{
        r(true)
      },chockTime)
    })
  }
})
</script>

<style scoped src="~/assets/css/Load/index.scss"></style>
<style scoped src="~/assets/css/Load/media.scss"></style>