<template>
  <div class="index-box">
    <popup :show="showPopup" @cancel="cancelFrom" :current-month="currentMonth" />

    <div>
      <div>
        <img class="topImage" src="../assets/hareTop.png" alt />
      </div>
    </div>
    <div class="outer6-wrapper">
      <div class="outer6 flex-col">
        <div v-for="month in list" :key="month.id" class="section-item">
          <div @click="handleMonthClick(month)">
            <!-- <img class="section-item-image" src="../assets/coverIndex.jpg" /> -->
            <img
              :class="`section-item-image ${rotateY?'backImag':''}` "
              src="../assets/popupImg/backImag.jpg"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useModel } from '@/store'
import { drawLottery, getPrizeList } from '@/services/person'
import { rand, shuffle } from '@/utils/math'
import { hideLoading } from '@/utils'

// 月份信息
const monthList = [
  {
    id: 1,
    posterImg: '',
    popImg: '',
    shareImg: '',
    screenImg: '',
    calendarImg: ''
  },
  {
    id: 2,
    posterImg: '',
    popImg: '',
    shareImg: '',
    screenImg: '',
    calendarImg: ''
  },
  {
    id: 3,
    posterImg: '',
    popImg: '',
    shareImg: '',
    screenImg: '',
    calendarImg: ''
  },
  {
    id: 4,
    posterImg: '',
    popImg: '',
    shareImg: '',
    screenImg: '',
    calendarImg: ''
  },
  {
    id: 5,
    posterImg: '',
    popImg: '',
    shareImg: '',
    screenImg: '',
    calendarImg: ''
  },
  {
    id: 6,
    posterImg: '',
    popImg: '',
    shareImg: '',
    screenImg: '',
    calendarImg: ''
  },
  {
    id: 7,
    posterImg: '',
    popImg: '',
    shareImg: '',
    screenImg: '',
    calendarImg: ''
  },
  {
    id: 8,
    posterImg: '',
    popImg: '',
    shareImg: '',
    screenImg: '',
    calendarImg: ''
  },
  {
    id: 9,
    posterImg: '',
    popImg: '',
    shareImg: '',
    screenImg: '',
    calendarImg: ''
  },
  {
    id: 10,
    posterImg: '',
    popImg: '',
    shareImg: '',
    screenImg: '',
    calendarImg: ''
  },
  {
    id: 11,
    posterImg: '',
    popImg: '',
    shareImg: '',
    screenImg: '',
    calendarImg: ''
  },
  {
    id: 12,
    posterImg: '',
    popImg: '',
    shareImg: '',
    screenImg: '',
    calendarImg: ''
  }
]

export default {
  name: 'Honghe',
  components: {
    Popup: () => import('@/components/Popup.vue')
  },
  data() {
    return {
      list: shuffle(monthList),
      currentMonth: null,
      showPopup: false,
      prizeList: [],
      clickNum: 0,
      bingoClickNum: rand(0, 12)
    }
  },
  computed: {
    person: {
      get() {
        return useModel('person')[0]
      },
      set(val) {
        useModel('person')[1](val)
      }
    }
  },
  created() {
    this.getPrizes()
  },
  methods: {
    //关闭
    cancelFrom() {
      this.showPopup = false
    },
    handleMonthClick(month) {
      this.currentMonth = month

      // 如果点击可以抽奖
      if (this.clickNum === this.bingoClickNum) {
        if (!this.person.personId) {
          // 报错, 提示刷新页面
        } else {
          // 如果还没有参与
          if (!this.person.isJoined) {
            this.drawLots()
          } else {
            this.showPopup = true
          }
        }
      } else {
        this.showPopup = true
      }

      if (this.clickNum < this.bingoClickNum) {
        this.clickNum += 1
      }
    },
    // 抽奖
    drawLots() {
      drawLottery(this.person).then((res) => {
        // 更新人员信息
        this.person = res

        // 其他动作
      })
    },
    // 获取奖品列表
    getPrizes() {
      getPrizeList().then((list) => {
        this.prizeList = list

        const t = setTimeout(() => {
          hideLoading()
          clearTimeout(t)
        }, 1000)
      })
    }
  }
}
</script>

<style lang="less" scoped>
.flex-col {
  display: flex;
  flex-direction: column;
}
.index-box {
  // background: url('../assets/backgroung.jpg') no-repeat;
  background-color: #c1172d;
  background-size: 100% 100%;
  width: 100%;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;

  .topImage {
    width: 90%;
    z-index: 8;
    overflow-wrap: break-word;
    text-align: center;
    white-space: nowrap;
    align-self: center;
    margin-top: 20px;
    background-size: 100% auto;
    background-repeat: no-repeat;
  }
  .outer6-wrapper {
    width: 92vw;
    border: 1px solid #d0b69a;
    margin: 16px auto 0;
    margin-bottom: 2em;

    .outer6 {
      flex-flow: row wrap;
      align-content: flex-start;
      z-index: 2;
      background-color: #9c0014;
      align-self: center;
      width: 90vw;
      margin: 3px auto;
      border-right: 1px solid #d0b69a;
      border-bottom: 1px solid #d0b69a;
      overflow: hidden;
      .section-item {
        width: 22vw;
        border-left: 1px solid #d0b69a;
        border-top: 1px solid #d0b69a;
        display: inline-flex;
        overflow: hidden;
        &-image {
          width: 22vw;

          background-size: 100% 100%;
        }
        .backImag {
          // position: relative;
          width: 22vw;
          animation: change 0.8s linear forwards;
        }
        @keyframes change {
          from {
            width: 44vw;
            transform: rotateY(180deg);
          }
          to {
            width: 22vw;
          }
        }
      }
    }
  }
}
</style>
