<template>
  <div class="modal-open">
    <!-- 动画遮罩层 -->
    <div class="plan-cover cover_company_166" :class="animateFlagTopDown == true ? ['zIndex'] : ''">
      <div class="plan-cover-top" :class="animateFlagTopDown == true ? ['coverFadeOutUp'] : ''">
        <img class="plan-cover-logo" src="@/assets/images/planBook/company.png" alt="" />
        <div class="plan-cover-slogan">
          <img src="@/assets/images/planBook/slogan_taikang.png" alt="" />
        </div>
      </div>
      <div class="plan-cover-center">
        <div :class="animateFlag == true ? 'colorNone' : ''" class="line"></div>
        <div class="btn" :class="animateFlag == true ? ['animated', 'coverZoomOut'] : ''" @click="openDetail">亲启</div>
      </div>
      <div class="plan-cover-bottom" :class="animateFlagTopDown == true ? ['coverFadeOutDown'] : ''">
        <span class="customer-info"
          >敬呈
          <span v-show="!showNameflag">亲爱的</span>
          <span v-show="showNameflag">{{ insuredName || "" }}</span>
          客户</span
        >
        <div class="customer-count">{{ count }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "BenefitTransform",
  data() {
    return {
      animateFlag: false,
      animateFlagTopDown: false, //  上下动画待“亲启”结束(0.5s)后开启
      showNameflag: false, //  是否展示客户名称
      count: 5,
      animatebBegin: null,
      insuredName: "",
    };
  },
  created() {
    // 进入页面两秒钟后获得客户姓名
    // && 5s定时器结束后进入详情页面
    this.animatebBegin = setInterval(() => {
      // console.log(this.count);
      this.count--;
      if (this.count == 3) {
        this.showNameflag = true;
        this.insuredName = utils.getStore("insuredName");
      }
      if (this.count == 0) {
        this.animateFlag = true;
        setTimeout(() => {
          this.animateFlagTopDown = true;
          clearInterval(this.animatebBegin);
        }, 500);
        setTimeout(() => {
          this.$emit("isAnimateEnd", true);
        }, 800);
      }
    }, 1000);
    //
  },

  methods: {
    // 点击亲启触发动画
    openDetail() {
      this.animateFlag = true;
      clearInterval(this.animatebBegin);
      setTimeout(() => {
        this.animateFlagTopDown = true;
      }, 500);
      setTimeout(() => {
        this.$emit("isAnimateEnd", true);
      }, 800);
    },
  },
  // 页面离开后销毁定时器
  destroyed() {
    clearInterval(this.animatebBegin);
  },
};
</script>

<style lang="less" scoped>
.zIndex {
  z-index: -9999;
}
.modal-open {
  position: fixed;
  width: 100%;
  height: 100%;
}
.plan-cover {
  height: 100%;
  z-index: 9999;
}

.plan-cover-top {
  height: 55%;
  padding-top: 15%;
  background-color: #c7000b;
}

.plan-cover-top .plan-cover-logo {
  display: block;
  width: 128px;
  height: 128px;
  margin: 0 auto;
}

.plan-cover-top .plan-cover-slogan {
  -webkit-box-flex: 1;
  margin: 4% auto 0;
  width: 153px;
  img {
    width: 100%;
  }
}

.plan-cover-bottom {
  display: block;
  -webkit-box-flex: 1;
  width: 100%;
  height: 40%;
  background-color: #c7000b;
}

.plan-cover-bottom .customer-info {
  position: absolute;
  left: 50%;
  top: 70%;
  vertical-align: middle;
  color: #fff;
  -webkit-transform: translate(-50%, -50%);
  font-size: 18px;
}

.plan-cover-bottom .customer-count {
  display: block;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 13%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.plan-cover-center .line {
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  left: 0;
  top: 55%;
  -webkit-transform: translateY(-50%);
}
.plan-cover-center .colorNone {
  background: transparent;
}

.plan-cover-center .btn {
  width: 88px;
  height: 88px;
  background: #fff;
  border-radius: 50%;
  color: #c7000b;
  position: absolute;
  text-align: center;
  line-height: 88px;
  font-size: 18px;
  font-weight: 700;
  left: 50%;
  top: 55%;
  margin-left: -44px;
  margin-top: -44px;
}
.coverZoomOut {
  -webkit-animation-duration: 0.4s;
  -webkit-animation-name: coverZoomOut;
  -webkit-animation-fill-mode: forwards;
}

.coverFadeOutDown,
.coverFadeOutUp {
  -webkit-animation-duration: 0.6s;
  -webkit-animation-fill-mode: forwards;
}

.coverFadeOutUp {
  -webkit-animation-name: coverFadeOutUp;
}

.coverFadeOutDown {
  -webkit-animation-name: coverFadeOutDown;
}

@-webkit-keyframes coverZoomOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: scale3d(4, 4, 4);
    transform: scale3d(4, 4, 4);
  }
}

@-webkit-keyframes coverFadeOutUp {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
}

@-webkit-keyframes coverFadeOutDown {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.coverFadeOutDown,
.coverFadeOutUp {
  -webkit-animation-duration: 0.6s;
  -webkit-animation-fill-mode: forwards;
}

.coverFadeOutUp {
  -webkit-animation-name: coverFadeOutUp;
}

.coverFadeOutDown {
  -webkit-animation-name: coverFadeOutDown;
}
</style>