<template>
	<div class="home">
		<div class="title"></div>
		<div class="sys-btn btn-margin" @click="toSign">立即报名</div>
		<div class="rule"></div>
		<div class="prize"></div>
		<div class="leap-01"></div>
		<div class="leap-02"></div>
		<div class="leap-03"></div>
		<div class="remain"></div>

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

<script>
let urls = {
  index: "/jiajiaCHApi/app/index"
};

import { httpGet } from "@/api/fetch-api";

import BottomTool from "@/components/bottom-tools/bottom-tools";
import BizModel from "@/components/biz-model/biz-model";

import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);

export default {
  name: "home",
  data() {
    return {
      activityIndex: 1,
      model: {
        show: false,
        title: "",
        content: "",
        index: "",
        // index : "submit",
        btnShow: true,
        btnText: "",
        confirmHandler: null,
        labelBtnShow: false,
        labelBtnText: "",
        labelBtnHandler: null
      }
    };
  },
  methods: {
    toSign() {
      Toast.loading({
        mask: true,
        message: "请稍等..."
      });

      httpGet({ url: urls.index }).then(res => {
        Toast.clear();
        if (res.isSubcribe == 1) {
          this.$router.push("/sign");
        } else {
          this.showSubcribeModel();
        }
      });
    },
    showAwardModel() {
      this.model.show = true;
      this.model.title = "活动结束";
      this.model.content = "";
      this.model.btnShow = true;
      this.model.btnText = "前往填写";
      this.model.index = "award";
      this.model.confirmHandler = this.toAward;
      this.model.labelBtnShow = false;
      this.model.labelBtnText = "";
      this.model.labelBtnHandler = null;
    },
    showSubcribeModel() {
      this.model.show = true;
      this.model.title = "";
      this.model.content = "";
      this.model.btnShow = false;
      this.model.btnText = "";
      this.model.index = "subcribe-02";
      this.model.confirmHandler = null;
      this.model.labelBtnShow = false;
      this.model.labelBtnText = "";
      this.model.labelBtnHandler = null;
    },
    toAward() {
      console.log("toAward");
      this.model.show = false;
      this.$router.push({
        path: "award"
      });
    }
  },
  components: {
    BottomTool,
    BizModel
  },
  created() {
    if (!this.$root.isInit) {
      this.$root.isInit = true;
      this.showAwardModel();
    }
  }
};
</script>

<style lang="scss" scoped>
.title {
  width: 750px;
  height: 955px;
  background: url(../../assets/imgs/idx-head.jpg);
  background-size: 100%;
}
.rule {
  width: 689px;
  height: 675px;
  background: url("../../assets/imgs/rule.png?v20190929");
  background-size: 100%;
  margin: auto;
  margin-top: 26px;
}
.prize {
  width: 684px;
  height: 1570px;
  background: url(../../assets/imgs/prize.png);
  background-size: 100%;
  margin: auto;
  margin-top: 40px;
}
.btn-margin {
  margin-top: 10px;
}
.leap-01 {
  width: 87px;
  height: 216px;
  background: url(../../assets/imgs/leap-01.png);
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 990px;
}
.leap-02 {
  width: 138px;
  height: 290px;
  background: url(../../assets/imgs/leap-02.png);
  background-size: 100%;
  position: absolute;
  right: 0;
  top: 1695px;
}
.leap-03 {
  width: 750px;
  height: 355px;
  background: url(../../assets/imgs/leap-03.png);
  background-size: 100%;
  position: absolute;
  bottom: 0px;
}
.remain {
  height: 0px;
}
</style>