<template>
  <div class="welcome">
    <div class="img" @click="_goUrl">
      <img v-if="welcomeInfo.img" :src="welcomeInfo.img" alt="" />
      <img v-else src="./img/welcome-default.png" alt="" />
    </div>
    <div class="jump">
      <div class="progress-box" @click="_jump">
        <svg class="progress" viewBox="0 0 100 100">
          <circle class="progress-bar" cx="50" cy="50" r="44.5"></circle>
          <circle class="text-bg" cx="50" cy="50" r="41"></circle>
          <text class="text" x="50" y="50">跳过</text>
        </svg>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
  name: 'welcome-box',
  computed: {
    ...mapGetters({
      welcomeInfo: 'welcomeInfo'
    })
  },
  mounted() {
    setTimeout(() => {
      this._jump();
    }, 5000);
  },
  methods: {
    ...mapMutations({
      set_welcomeInfo: 'set_welcomeInfo'
    }),
    _goUrl() {
      if (this.welcomeInfo.url) {
        window.location.href = this.welcomeInfo.url;
      }
    },
    _jump() {
      const info = JSON.parse(JSON.stringify(this.welcomeInfo));
      info.imgState = 2;
      this.set_welcomeInfo(info);
    }
  }
};
</script>
<style lang="less" scoped>
.welcome {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background-color: #ffffff;
  .img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    img {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .progress-box {
    width: 0.5rem;
    height: 0.5rem;
    .progress {
      width: 100%;
      height: 100%;
      .progress-bar {
        stroke: #fff;
        fill: none;
        stroke-width: 0.07rem;
        stroke-linecap: round;
        stroke-dasharray: 280;
        stroke-dashoffset: 0;
        animation-name: progress;
        animation-duration: 5s;
        animation-timing-function: linear;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
      }
      .text-bg {
        stroke: none;
        stroke-width: 0;
        fill: rgba(0, 0, 0, 0.6);
      }
      .text {
        fill: #fff;
        font-size: 0.25rem;
        text-anchor: middle;
        dominant-baseline: middle;
      }
    }
  }
  .jump {
    position: absolute;
    top: 0.05rem;
    right: 0.05rem;
  }
}
@keyframes progress {
  0% {
    stroke-dashoffset: 280;
  }
  10% {
    stroke-dashoffset: 280;
  }
  20% {
    stroke-dashoffset: 280 * 4 / 5;
  }
  30% {
    stroke-dashoffset: 280 * 4 / 5;
  }
  40% {
    stroke-dashoffset: 280 * 3 / 5;
  }
  50% {
    stroke-dashoffset: 280 * 3 / 5;
  }
  60% {
    stroke-dashoffset: 280 * 2 / 5;
  }
  70% {
    stroke-dashoffset: 280 * 2 / 5;
  }
  80% {
    stroke-dashoffset: 280 * 1 / 5;
  }
  90% {
    stroke-dashoffset: 280 * 1 / 5;
  }
  100% {
    stroke-dashoffset: 0;
  }
}
</style>
