<template>
  <div class="session-list">
    <ul class="session-list__wrapper">
      <li v-for="(item, index) in sessionList" :key="index" @click="jumpToLottery(item.id)">
        <div v-lazy:background-image="bannerImg(item)" class="session-list__item-wrap">
          <div class="session-list__status" :class="`session-list__status--${getStatus(item).className}`">
            {{ getStatus(item).label }}
          </div>
          <div class="session-list__time">
            第{{ index + 1 }}场<span v-if="getStatus(item).label === '已结束'"
              >：
              {{ (item.startTime * 1000) | formatDate('MM/DD HH:mm') }}
              —
              {{ (item.endTime * 1000) | formatDate('MM/DD HH:mm') }}</span
            >
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { LOTTERY_STATUS, LOTTERY_STATUS_TXT } from '@/utils/constant'
import CONFIG from '@/config'
import Bus from '@/utils/Bus'

export default {
  name: 'List',
  layout: 'miniNavBar',
  data() {
    return {
      nowTime: new Date().getTime()
    }
  },
  computed: {
    ...mapGetters({
      sessionList: 'lottery/sessionList',
      lotteryInfo: 'lottery/lotteryInfo',
      premise: 'lottery/premise'
    })
  },
  watch: {
    premise(nVal, oVal) {
      if (this.lotteryInfo.forceWrite && nVal === 0 && this.lotteryInfo.newPremise.length) {
        if (window.self === window.top) {
          Bus.$emit('showForce')
        } else {
          Bus.$emit('showConfig')
        }
      }
    },
    'lotteryInfo.forceWrite': {
      handler(val) {
        if (val && this.premise === 0) {
          if (window.self === window.top) {
            Bus.$emit('showForce')
          } else {
            Bus.$emit('showConfig')
          }
        }
      },
      deep: true
    }
  },
  mounted() {
    // 初始化事件中心
    this.eventHubInit()
    this.dataInit()
  },
  destroyed() {
    Bus.$off('LotteryInfoUpdate')
  },
  methods: {
    ...mapActions({
      getSessionList: 'lottery/getSessionList',
      checkPrecondition: 'lottery/check_precondition'
    }),
    dataInit() {
      const { id, uin } = this.$route.query
      this.getSessionList({ id, uin })
        .then(res => {
          // 判断是否自动进入抽奖页
          if (res.data.playConfig.length < 2) {
            this.$router.replace({
              path: '/mini/index',
              query: { ...this.$route.query, sessionId: res.data.playConfig[0].id, only: true }
            })
          }
          // 抽奖前置活动
          this.checkPrecondition({
            id: res.data.bindServiceId,
            uin,
            referralUrl: window.location.href,
            includeId: id,
            type: 'draw',
            checkType: res.data.bindService
          }).then(response => {
            if (!response.isJoin && this.premise && !!res.data.bindServiceForceOpen) {
              Bus.$emit('showPrecondition')
            }
          })
        })
        .catch(() => {
          this.$router.replace({path: '/error'})
        })
    },
    getStatus(item) {
      const { nowTime } = this
      if (nowTime < item.startTime * 1000) {
        return LOTTERY_STATUS_TXT[LOTTERY_STATUS.teaser]
      }
      if (nowTime > item.endTime * 1000) {
        return LOTTERY_STATUS_TXT[LOTTERY_STATUS.end]
      }
      return LOTTERY_STATUS_TXT[LOTTERY_STATUS.start]
    },
    bannerImg(item) {
      if (item.isShowBanner) {
        const img = item.banner || CONFIG.defBanner
        return `${img}${CONFIG.ossImageServe}`
      } else {
        return `${CONFIG.defBanner}${CONFIG.ossImageServe}`
      }
    },
    jumpToLottery(sessionId) {
      const params = new URLSearchParams({ ...this.$route.query, sessionId }).toString()
      window.location.href = `${window.location.origin}/lottery/mini/index?${params}`
    },
    eventHubInit() {
      // 数据更新
      Bus.$on('LotteryInfoUpdate', data => {
        const { id } = data
        const { uin, id: currentId } = this.$route.query
        if (Number(id) === Number(currentId)) {
          this.getSessionList({ id, uin })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.session-list {
  width: 100%;
  height: 100%;
  background-color: #fff;
  &__wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden auto;
    padding: 22px;
    li {
      width: 100%;
      height: 0px;
      position: relative;
      font-size: 0;
      margin-top: 20px;
      padding-top: 115 / 330 * 100%;
      &:first-child {
        margin-top: 0px;
      }
    }
  }
  &__item-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
  }
  &__status {
    position: absolute;
    top: 10px;
    left: 6px;
    height: 20px;
    line-height: 20px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.2);
    text-align: center;
    font-size: 12px;
    padding: 0 5px;
    &--teaser {
      color: #fffeab;
    }
    &--start {
      color: #58d719;
    }
    &--end {
      color: #ffffff;
    }
  }
  &__time {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 32px;
    line-height: 32px;
    border-radius: 0 0 6px 6px;
    color: #fff;
    padding: 0 17px;
    font-size: 14px;
  }
}
</style>
