<template>
  <div class="container width1200">
    <div class="content">
      <img src="../../assets/images/arrow.png"/>
      <div class="items">
        <img
          class="animate__animated animate__fadeInDown"
          :src="require(`./images/${index + 1}.png`)"
          v-for="(item, index) in items" :key="index"
          :style="{top: item[0] + 'px', left: item[1] + 'px', 'animation-delay': (!inited ? (index * 0.3) + 's' : '0s')}"
        />
      </div>
    </div>
  </div>
</template>
<script>
const items = [
  [80, -120, false],
  [-50, 130, false],
  [-50, 400, false],
  [80, 620, false],
  [240, 400, false],
  [240, 130, false],
]
export default {
  name: 'lifecycle',
  data() {
    return {
      items,
      inited: false,
    }
  },
  mounted() {
    let timer = null
    timer = setTimeout(() => {
      this.inited = true
      clearTimeout(timer)
    }, 2500)
  },
  methods: {
    mouseenter(index) {
      let timer = null
      const _items = [...this.items]
      if (_items[index][2] === true) {
        return
      }
      _items[index][2] = true
      this.items = _items
      setTimeout(() => {
        this.mouseleave(index)
        clearTimeout(timer)
      }, 600)
    },
    mouseleave(index) {
      const _items = [...this.items]
      _items[index][2] = false
      this.items = _items
    }
  }
}
</script>
<style lang="less" scoped>
  .container{
    .content{
      position: relative;
      width: 637px;
      margin: 100px auto;
      >img{
        max-width: 100%;
      }
      .items{
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        >img{
          width: 120px;
          position: absolute;
          transition: all .3s ease-in-out;
          &:hover{
            margin-top: -10px;
          }
        }
      }
    }
  }
</style>
