<template>
  <div class="home">
    <head-view></head-view>
    <div class="btn-back" @click="backHandler"></div>
    <div class="btn-prize-list" @click="prizeListHandler"></div>

    <div class="sys-container-panel content">
      <div class="container-title">{{title}}</div>
      <div class="head-line"></div>
      <div class="remain-tip">
        您现在还有
        <b>{{remainDrawTime}}</b>次抽奖机会
      </div>

      <van-row>
        <van-col span="8" v-for="(item,index) in cardStrs" :key="index">
          <div
            class="card"
            :class="{rotate180 : rotate.target == 'all' || rotate.target==item, rotate0 : rotate.target != 'all' && rotate.target!=item}"
            @click="drawHandler(item)"
            :ref="item"
          >
            <div class="card-bg">
              <div v-bind:class="item" class="card-logo"></div>
            </div>
            <div class="card-front-bg">
              <div class="prize-name">{{model.drawResult.prizeName}}</div>
              <div
                class="prize-logo"
                v-bind:style="{backgroundImage:'url(' + model.drawResult.thumb + ')'}"
              ></div>
            </div>
          </div>
        </van-col>
      </van-row>

      <div class="draw-tip">请选择任意一张翻牌开启奖品</div>

      <div class="btn-view-prize" @click="model.show =true"></div>
    </div>

    <div class="bottom-line"></div>

    <bottom-tool v-model="activityIndex"></bottom-tool>
    <draw-model v-model="model"></draw-model>
  </div>
</template>



<script>
let urls = {
  remainTime: "/jiajiaCHApi/app/draw/times",
  draw: "/jiajiaCHApi/app/draw"
};

import { httpGet } from "@/api/fetch-api";
import BottomTool from "@/components/bottom-tools/bottom-tools";
import DrawModel from "@/components/biz-model/draw-model";

import HeadView from "@/components/plugins/head";

import Vue from "vue";
import { Row, Col } from "vant";
import { Toast } from "vant";
import { setTimeout } from "timers";

Vue.use(Toast);
Vue.use(Row).use(Col);

export default {
  name: "home",
  data() {
    return {
      cardStrs: [
        "logo-01",
        "logo-02",
        "logo-03",
        "logo-04",
        "logo-05",
        "logo-06",
        "logo-07",
        "logo-08",
        "logo-09"
      ],
      init: false,
      activityIndex: 4,
      title: "幸运大抽奖",
      remainDrawTime: 0,
      model: {
        show: false,
        drawResult: {}
      },
      rotate: {
        target: "",
        isRotate: false
      },
      indexForm: {}
    };
  },
  methods: {
    initActivity() {
      httpGet({ url: urls.remainTime, data: null }).then(res => {
        this.init = true;
        let remainDrawTime = res.times;
        remainDrawTime = !remainDrawTime ? 0 : remainDrawTime;
        this.remainDrawTime = remainDrawTime;
        this.rotate.target = "";
      });
    },
    drawHandler(ref) {
      if (!this.init || this.remainDrawTime <= 0) {
        return;
      }
      Toast.loading({
        mask: true,
        forbidClick: true,
        message: "加载中..."
      });
      httpGet({ url: urls.draw, data: null }).then(res => {
        Toast.clear();
        let that = this;
        setTimeout(function() {
          that.rotate.target = ref;
          that.model.drawResult = res;
        }, 200);

        setTimeout(this.showModelHandler, 2300);
      });
    },
    showModelHandler() {
      let that = this;
      this.model.show = true;
      this.model.confirmHandler = function() {
        that.init = false;
        setTimeout(function() {
          that.initActivity();
        }, 500);
      };
    },
    backHandler(){
      window.history.go(-1);
    },
    prizeListHandler(){
      this.$router.push("/prize");
    }
  },
  components: {
    BottomTool,
    DrawModel,
    HeadView
  },
  mounted() {
    this.initActivity();
  }
};
</script>


<style lang="scss" scoped>
.content {
  margin: 85px auto 60px auto;
  padding-bottom: 60px;
}

.container-title {
  font-size: 30px;
}

.head-line {
  height: 60px;
}

.bottom-line {
  height: 150px;
  background-color: transparent;
}

.remain-tip {
  font-size: 30px;
  font-weight: 600;

  b {
    color: #f00;
    font-size: 36px;
    padding: 0 10px;
  }
}

.van-row {
  width: 650px;
  margin: auto;
  margin-top: 10px;
}

.card {
  width: 214px;
  height: 268px;
  position: relative;
  transition: transform 2s;
  transform-style: preserve-3d;
}

.card-bg {
  width: 214px;
  height: 268px;
  position: absolute;
  background: url(../../assets/imgs/draw-card-bg.png);
  background-size: 100%;
  display: flex;
  align-items: center;
  backface-visibility: hidden;
}

.rotate180 {
  transform: rotateY(180deg);
}

.rotate0 {
  transform: rotateY(0deg);
}

.card-logo {
  margin: 40px auto 0 auto;
}

.logo-01 {
  width: 111px;
  height: 18px;
  background: url(../../assets/imgs/draw-logo-01.png) no-repeat;
  background-size: 100%;
}
.logo-02 {
  width: 65px;
  height: 32px;
  background: url(../../assets/imgs/draw-logo-02.png) no-repeat;
  background-size: 100%;
}
.logo-03 {
  width: 62px;
  height: 51px;
  background: url(../../assets/imgs/draw-logo-03.png) no-repeat;
  background-size: 100%;
}
.logo-04 {
  width: 70px;
  height: 30px;
  background: url(../../assets/imgs/draw-logo-04.png) no-repeat;
  background-size: 100%;
}
.logo-05 {
  width: 89px;
  height: 35px;
  background: url(../../assets/imgs/draw-logo-05.png) no-repeat;
  background-size: 100%;
}
.logo-06 {
  width: 73px;
  height: 74px;
  background: url(../../assets/imgs/draw-logo-06.png) no-repeat;
  background-size: 100%;
}
.logo-07 {
  width: 66px;
  height: 59px;
  background: url(../../assets/imgs/draw-logo-07.png) no-repeat;
  background-size: 100%;
}
.logo-08 {
  width: 81px;
  height: 46px;
  background: url(../../assets/imgs/draw-logo-08.png) no-repeat;
  background-size: 100%;
}
.logo-09 {
  width: 109px;
  height: 27px;
  background: url(../../assets/imgs/draw-logo-09.png) no-repeat;
  background-size: 100%;
}

.draw-tip {
  font-size: 24px;
  text-align: center;
  margin: 30px auto 0 auto;
  color: #06b686;
}
.btn-view-prize {
  width: 283px;
  height: 65px;
  background: url(../../assets/imgs/draw-btn-viewprize.png) no-repeat;
  background-size: 100%;
  margin: 30px auto 0 auto;
}

.card-front-bg {
  position: absolute;
  width: 214px;
  height: 268px;
  background: url(../../assets/imgs/draw-card-frontbg.png);
  background-size: 100%;
  display: flex;
  align-items: center;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  flex-direction: column;
}

.prize-name {
  width: 168px;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin: 40px auto 0 auto;
}

.prize-logo {
  width: 128px;
  height: 128px;
  background-size: 100%;
  margin: 10px auto;
  background-repeat: no-repeat;
}

.btn-back {
  width: 170px;
  height: 52px;
  background: url(../../assets/imgs/list-btn-back.png) no-repeat;
  background-size: 100%;
  position: fixed;
  left: 0;
  top: 30px;
  z-index: 8000;
}
.btn-prize-list{
  width: 166px;
  height: 52px;
  background: url(../../assets/imgs/draw-btn-prizelist.png) no-repeat;
  background-size: 100%;
  position: fixed;
  right: 0;
  top: 30px;
  z-index: 8000;
}
</style>