<template>
  <div class="bottom-panel">
    <div class="bottom-tool-container">
      <div class="item" v-bind:class="{activity : activityIndex == 1}" @click="itemSelect(1)">
        <div class="white-bg">
          <div class="icon icon-01"></div>
        </div>
        <div class="name">大赛介绍</div>
      </div>
      <div class="item" v-bind:class="{activity : activityIndex == 2}" @click="itemSelect(2)">
        <div class="white-bg">
          <div class="icon icon-02"></div>
        </div>
        <div class="name">我要报名</div>
      </div>
      <div class="item" v-bind:class="{activity : activityIndex == 3}" @click="itemSelect(3)">
        <div class="white-bg">
          <div class="icon icon-03"></div>
        </div>
        <div class="name">人气评选</div>
      </div>
      <div class="item" v-bind:class="{activity : activityIndex == 4}" @click="itemSelect(4)">
        <div class="white-bg">
          <div class="icon icon-04"></div>
        </div>
        <div class="name">更多福利</div>
      </div>
    </div>

    <biz-model v-model="model"></biz-model>
  </div>
</template>

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

import { httpGet } from "@/api/fetch-api";
import BizModel from "@/components/biz-model/biz-model";

export default {
  props: ["value"],
  data() {
    return {
      init: false,
      activityIndex: this.value,
      model: {
        show: false,
        title: "",
        content: "",
        index: "subcribe-02",
        btnShow: false,
        btnText: "",
        confirmHandler: null,
        labelBtnShow: false,
        labelBtnText: "",
        labelBtnHandler: null
      },
      indexData: {
        isSubcribe: 0
      }
    };
  },
  methods: {
    itemSelect(index) {
      if (this.activityIndex == index) {
        return;
      }
      this.activityIndex = index;
      switch (this.activityIndex) {
        case 1:
          this.$router.push("/");
          break;
        case 2:
          if (this.init) {
            if (this.indexData.isSubcribe == 1) {
              this.$router.push("/sign");
            } else {
              this.model.show = true;
            }
          } else {
            httpGet({ url: urls.index }).then(res => {
              this.indexData = res;
              if (this.indexData.isSubcribe == 1) {
                this.$router.push("/sign");
              } else {
                this.model.show = true;
              }
            });
          }
          break;
        case 3:
          this.$router.push("/list");
          break;
        case 4:
          this.$router.push("/welfare");
          break;
      }
      this.$emit("selectChange", this.activityIndex);
    }
  },
  created() {
    httpGet({ url: urls.index }).then(res => {
      this.indexData = res;
      this.init = true;
    });
  },
  components: {
    BizModel
  }
};
</script>

<style lang="less" scoped>
.bottom-panel {
  z-index: 1100;
  position: fixed;
  bottom: 0;
  height: 165px;
  width: 750px;
  background: url(../../assets/imgs/bottom-grassland.png) no-repeat;
  background-size: 100% auto;
  background-position: bottom;
}
.bottom-tool-container {
  margin: auto;
  width: 680px;
  display: flex;
  justify-content: space-between;
}

.item {
  width: 140px;
  .icon {
    margin: auto;
    width: 86px;
    height: 86px;
  }

  .icon-01 {
    background: url(../../assets/imgs/icon-01.png);
    background-size: 100%;
  }
  .icon-02 {
    background: url(../../assets/imgs/icon-02.png);
    background-size: 100%;
  }
  .icon-03 {
    background: url(../../assets/imgs/icon-03.png);
    background-size: 100%;
  }
  .icon-04 {
    background: url(../../assets/imgs/icon-04.png);
    background-size: 100%;
  }

  .name {
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 24px;
  }
  .white-bg {
    margin: auto;
    padding-top: 7px;
    background-color: transparent;
    width: 110px;
    height: 103px;
    border-radius: 55px;
  }
}

.activity {
  .white-bg {
    background-color: #fff !important;
  }
}
</style>