<template>
<div>
  <img src="../assets/images/bg.jpg" class="centerLabel cover bg" alt>
  <div style="position: relative;z-index: 101;color: #fff;" @click="newData(newinfo)"><span>增加新用户</span></div>
  <div style="position: relative;z-index: 101;color: #fff;" @click="newData(vipAinfo)"><span>增加张先生</span></div>
  <div style="position: relative;z-index: 101;color: #fff;" @click="newData(vipBinfo)"><span>增加王女士</span></div>
  <div style="position: relative;z-index: 101;color: #fff;" @click="newData(vipCinfo)"><span>增加许女士</span></div>
  <div v-if="users.length>0"  style="position: relative;z-index: 101;">
    <ul class="centerLabel userList">
      <!-- <userList :user-list='users'></userList> -->
      <div v-for="(user, k) in users" :key="k" :item="user">
        <span>{{user.firstName}}</span>
        <span>{{user.words}}</span>
      </div>
    </ul>
  </div>
  <div v-if="audios.length>0" style="position: relative;z-index: 101;">
    <audio v-for="(audio, k) in audios" v-if="audio.isShow" :key="k" @ended="audioEnd(k)">
      <source :src="audio.url" />
    </audio>
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      users: [],
      audios: [],
      diffM: 5000,
      newinfo: {
        firstName: '',
        classId: '1',
        words: '欢迎光临',
        url: 'aa'
      },
      vipAinfo: {
        firstName: '张先生',
        classId: '2',
        words: '您好',
        url: 'bb'
      },
      vipBinfo: {
        firstName: '王女士',
        classId: '2',
        words: '您好~',
        url: 'cc'
      },
      vipCinfo: {
        firstName: '许女士',
        classId: '2',
        words: 'hello',
        url: 'dd'
      }
    }
  },
  methods: {
    newData (info) {
      if (info.classId === '1' && this.users.filter(x => x.classId === '1').length > 0) {
        this.users = this.users.map((x) => {
          if (x.classId === '1') {
            return {...x, createdata: Date.parse(new Date())}
          } else {
            return x
          }
        })
      } else {
        if (this.users.length >= 3) {
          this.users.splice(0, 1)
        }
        this.users = [...this.users, {...info, createdata: Date.parse(new Date())}]
        this.audios = [...this.audios, {...info, isShow: true, createdata: Date.parse(new Date())}]
      }
    },
    audioEnd (index) {
      let as = this.audios
      this.audios = as.map((x, i) => {
        if (i === index) {
          x.isShow = false
        }
      })
    }
  },
  created () {
    const _that = this
    window.setInterval(() => {
      let dels = _that.users.filter(x => Date.parse(new Date()) - x.createdata > this.diffM)
      dels.map(x => {
        _that.users.splice(this.users.findIndex(i => i.createdata === x.createdata), 1)
      })
      let delaudios = _that.audios.filter(x => Date.parse(new Date()) - x.createdata > this.diffM)
      delaudios.map(x => {
        _that.audios.splice(this.audios.findIndex(i => i.createdata === x.createdata), 1)
      })
    }, 100)
  }
}
</script>

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