<template>
  <view class="entry">
    <view class="entry-item">
      <image class="item-img item-img-01" src="/static/img/index/entry01.png" mode="aspectFill" />
    </view>
    <view class="entry-item">
      <image class="item-img item-img-02" src="/static/img/index/entry02.png" mode="aspectFill" @tap.stop="navTo('/pages/index/apply?type=0',0)" />
    </view>
    <view class="entry-item">
      <image class="item-img item-img-03" src="/static/img/index/entry03.png" mode="aspectFill" @tap.stop="navTo('/pages/index/apply?type=1',1)" />
    </view>

    <zd-modal-fail @emitClose="failModelClose" :route="'/pages/apply/list'" :failModel="failModel"></zd-modal-fail>

  </view>
</template>

<script>
import zdModalFail from '@/components/zd-modal-fail';
import { mapState } from 'vuex';

export default {
  data() {
    return {
      failModel: false,
    }
  },
  components: {
    zdModalFail
  },
  computed: {
    ...mapState({
      signUp: 'signUp'
    })
  },
  onLoad() {
    console.log('onLoad', this.signUp);
  },
  methods: {
    navTo(route, type) {
      const navType = type
      if (this.signUp && this.signUp.signUpType == navType) {
        // 已报名
        this.failModel = true;
        // this.$mRouter.push({route})
      } else if (this.signUp && this.signUp.signUpType != navType) {
        if(type == 0) {
          this.$mHelper.toast('已在专柜报名');
        } else {
          this.$mHelper.toast('已在园所端报名');
        }
      } else {
        this.$mRouter.push({route})
      }
    },
    failModelClose() {
      this.failModel = false;
    },
  }
}
</script>

<style lang="scss">
page {
  // background: $color-white;110,212,86
  background: rgba(109, 213, 86, 1);
  // background: linear-gradient(180deg, #66DF5C, #72CF53 );
  height: 100%;
}
.entry {
  .entry-item {
    position: relative;
    font-size: 0;
    .entry-btn {
      position: absolute;
      width: 220upx;
      height: 60upx;
      background: #FEEB56;
      box-shadow: 0px -2px 2px 0px #FE9F2E;
      border-radius: 118px;
      opacity: 0;
      &.entry-btn-01 {
        left: 88upx;
        bottom: 76upx;
      }
      &.entry-btn-02 {
        right: 92upx;
        bottom: 98upx;
      }
    }
    image {
      width: 100%;
    }
    .item-img-01 {
      height: 534upx;
    }
    .item-img-02 {
      height: 366upx;

    }
    .item-img-03 {
      height: 366upx;
    }
  }
}
</style>
