<template>
  <div class="session-list">
    <ul>
      <li
        v-for="(item, index) in sessionList"
        :key="index"
        v-lazy:background-image="bannerImg(item.banner)"
        @click="jumpToLottery(item.id)"
      >
        <div class="session-status" :class="`session-status--${getStatus(item)}`">
          <template v-if="getStatus(item) === 'teaser'">未开始</template>
          <template v-if="getStatus(item) === 'end'">已结束</template>
          <template v-if="getStatus(item) === 'start'">进行中</template>
        </div>
        <div class="session-time">
          第{{ index + 1 }}场：
          {{ (item.startTime * 1000) | formatDate('MM/DD H:mm') }}
          ~
          {{ (item.endTime * 1000) | formatDate('MM/DD H:mm') }}
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import CONFIG from '@/config'
import { LOTTERY_STATE } from '@/utils/const'
import Bus from '@/utils/Bus'
import UserAgents from '@/utils/UserAgents'

export default {
  name: 'SessionList',
  data() {
    return {
      CONFIG,
      LOTTERY_STATE,
      nowTime: new Date().getTime()
    }
  },
  computed: {
    ...mapGetters(['sessionList', 'wxShareInfo'])
  },
  mounted() {
    // 初始化事件中心
    this.eventHubInit()
    this.dataInit()
  },
  destroyed() {
    Bus.$off('LotteryInfoUpdate')
  },
  methods: {
    ...mapActions({
      getSessionList: 'getSessionList',
      initWXShare: 'initWXShare'
    }),
    dataInit() {
      // 微信分享初始化
      if (UserAgents.isWx) {
        this.initWXShare({
          info: this.wxShareInfo,
          params: {
            uin: this.$route.query.uin
          }
        })
      }
    },
    getStatus(item) {
      const { nowTime } = this
      if (nowTime < item.startTime * 1000) {
        return 'teaser'
      }
      if (nowTime > item.endTime * 1000) {
        return 'end'
      }
      return 'start'
    },
    bannerImg(url) {
      const img = url || CONFIG.defBanner
      return img
    },
    jumpToLottery(sessionId) {
      this.$router.push({ path: '/index', query: { ...this.$route.query, sessionId } })
    },
    eventHubInit() {
      // 数据更新
      Bus.$on('LotteryInfoUpdate', data => {
        const { id } = data
        const { uin, id: currentId } = this.$route.query
        if (parseInt(id, 10) === parseInt(currentId, 10)) {
          this.getSessionList({ id, uin })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.session-list {
  width: 100%;
  height: 100%;
  > ul {
    width: 100%;
    height: 100%;
    padding: 15px;
    li {
      width: 100%;
      height: 150px;
      border-radius: 6px;
      background-size: cover;
      background-position: center;
      font-size: 0;
      margin-top: 15px;
      position: relative;
      &:first-child {
        margin-top: 0px;
      }
      .session-status {
        position: absolute;
        top: 10px;
        left: 6px;
        min-width: 72px;
        height: 24px;
        line-height: 24px;
        border-radius: 12px;
        background: rgba(0, 0, 0, 0.2);
        text-align: center;
        font-size: 12px;
        padding: 0 5px;
        &--teaser {
          color: #ffaa00;
        }
        &--start {
          color: #6abf47;
        }
        &--end {
          color: #dfdfdf;
        }
      }
      .session-time {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 32px;
        line-height: 32px;
        border-radius: 0 0 6px 6px;
        background: rgba(0, 0, 0, 0.2);
        color: #fff;
        padding: 0 12px;
        font-size: 14px;
      }
    }
  }
}
</style>
