<template>
  <div class="projectIndex">
    <img src="../assets/images/bg.jpg" class="centerLabel cover bg" alt>
    <div class="content flex-h">
      <div class="flex-item">
        <div :hidden="!showSlide">
          <swiper :options="swiperOption" ref="mySwiper" class="hj-swiper">
            <swiper-slide class="swiper-slide" v-for="(item, index) in showPage" :key="index">
              <img
                v-if="item.showType === 'image'"
                class="centerLabel"
                width="100%"
                :src="'api' + item.showContent"
                alt
              >
              <video v-if="item.showType === 'video'" width="100%" height="100%" id="hj-vdo" autoplay muted loop>
                <source :src="'api' + item.showContent" type="video/mp4" />
              </video>
            </swiper-slide>
          </swiper>
        </div>
        <div :hidden="showSlide">
          <ul class="centerLabel userList">
            <li v-for="(item, index) in userList" :key="index" :class="{'active': item.show}">
              <span>{{item.firstName}}</span>
              <span>{{item.words}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex'
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
const { mapActions: mapUserActions } = createNamespacedHelpers('user')
const { mapState: mapPageState, mapActions: mapPageActions } = createNamespacedHelpers('page')
const { mapState: mapNewsState, mapActions: mapNewsActions } = createNamespacedHelpers('news')
export default {
  name: 'projectIndex',
  data () {
    return {
      userList: [{
        firstName: '111',
        gender: '1',
        show: false
      }, {
        firstName: '111',
        gender: '1',
        show: false
      }, {
        firstName: '111',
        gender: '1',
        show: false
      }],
      showSlide: true,
      currentTimeTamp: Date.now(),
      activeIndex: 0,
      timer: null,
      timeNum: 0,
      swiperOption: {
        speed: 1000,
        autoplay: {
          delay: 6000,
          disableOnInteraction: false
        }
      },
      num: 1,
      personDelay: null
    }
  },
  computed: {
    ...mapPageState({
      pages: x => x.pages
    }),
    ...mapNewsState({
      news: x => x.news
    }),
    showNew () {
      return ((this.news.data || {}).records || []).filter(x => x.status === 1)[0] || {}
    },
    showPage () {
      return ((this.pages.data || {}).records || []).filter(x => x.status === 1) || []
    },
    mySwiper () {
      return this.$refs.mySwiper.swiper
    }
  },
  components: {
    swiper,
    swiperSlide
  },
  created () {
    this.init()
    window.setInterval(() => {
      this.init()
    }, 1000)
    this.getInitData()
    window.setInterval(() => {
      this.getInitData()
    }, 1000 * 60 * 60)
    this.getPersonList()
  },
  updated () {
    this.$nextTick(() => {
      const vdo = window.document.getElementById('hj-vdo')
      if (vdo) {
        vdo.play()
      }
    })
  },
  methods: {
    ...mapUserActions([
      'getPersonB'
    ]),
    ...mapPageActions([
      'getPagesList'
    ]),
    ...mapNewsActions([
      'getNewsList'
    ]),
    returnUserList (item) { // 返回用户信息
      this.showSlide = false
      window.clearInterval(this.timer)
      this.timeNum = 0
      window.setTimeout(() => {
        item.show = true
      }, 100)
      if (this.userList.length > 2) {
        this.userList.splice(0, 1)
        this.userList.push(item)
      } else {
        this.userList.push(item)
      }
      this.timer = window.setInterval(() => {
        if (this.timeNum - 0 >= 5000) {
          this.timeNum = 0
          window.clearInterval(this.timer)
          this.showSlide = true
          this.userList = []
        } else {
          this.timeNum += 100
        }
      }, 100)
    },
    videoLoad (e) {
      e.target.play()
    },
    init () { // 初始化
      if (!new Date().getMinutes()) { // 整点更新时间
        this.currentTimeTamp = Date.now()
      }
    },
    getInitData () {
      this.getPagesList({
        pageNum: 1,
        pageSize: 100
      })
      this.getNewsList({
        pageNum: 1,
        pageSize: 100
      })
    },
    getPersonList () {
      this.getPersonB().then(res => {
        if (res && res.isShow) {
          const sex = res.sex === '1' ? '先生' : '女士'
          const wds = (res.words || '').replace('{{name}}', res.personName).replace('{{sex}}', sex)

          this.returnUserList({
            firstName: (res.classId || res.classId === 1) ? '' : res.personName,
            words: wds,
            show: false,
            audio: `http://ycapi.jcjyhn.com/welcome-api/?t=${wds}`
          })
        }

        if (this.personDelay) {
          window.clearTimeout(this.personDelay)
        }

        this.personDelay = setTimeout(() => {
          this.getPersonList()
        }, 500)
      }).catch(r => {
        if (this.personDelay) {
          window.clearTimeout(this.personDelay)
        }

        this.personDelay = setTimeout(() => {
          this.getPersonList()
        }, 30000)
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.projectIndex {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .bg {
    z-index: 1;
  }
  > div {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: relative;
    overflow: hidden;
    > .flex-item {
      height: 100%;
      position: relative;

      > div {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        border-radius: 6px;
        .userList {
          width: calc(100% - 80px);
          overflow: hidden;
          transition: all 0.3s linear;
          -webkit-transition: all 0.3s linear;
          text-align: center;
          font-size: 0;
          > li {
            width: 0;
            display: inline-block;
            margin-left: 40px;
            position: relative;
            overflow: hidden;
            background: rgba(255, 255, 255, 0.15);
            padding: 9vh 0;
            transition: all 0.3s linear;
            -webkit-transition: all 0.3s linear;
            &:first-child {
              margin-left: 0;
            }
            &.active {
              width: calc((100% - 80PX) / 3);
            }
            span {
              width: 100%;
              display: block;
              color: #fff;
              text-align: center;
              line-height: 1.45;
              font-size: 2.3vw;
              &:first-child {
                font-size: 2.8vw;
                line-height: 1.3;
              }
            }
          }
        }
      }

      .hj-swiper {
        height: 100%;
      }
    }
  }
}
</style>
