<template>
  <div class="content-box">
    <div class="page-body flex-cl">
      <div class="top flex-cl">
        <van-icon name="success" size="1rem" />
      </div>
      <div class="text">Parabéns</div>
      <div class="ord">Sua conta foi criada com sucesso.</div>
      <div class="gre-box flex-cl">
        <div class="border">
          <div class="flex-ct">
            <span>1.</span>
            <div>
              <div class="flex-sad">
                <span>{{ shi }}</span
                >: <span>{{ fen }}</span
                >:
                <span>{{ miao }}</span>
                <div @click.stop="openDep">Depósito</div>
              </div>
              <div class="btn">
                <span>HRS</span>
                <span>MINS</span>
                <span>SECS</span>
              </div>
            </div>
          </div>
          <div class="font">
            Deposite dentro de duas horas, você receberá 200 bônus em dinheiro.
          </div>
        </div>
        <div class="next">
          <span>2.</span>
          <div>
            Adicione a tela principal,garantindo a segurança dos fundos.
            <van-icon @click.stop="addHome" name="send-gift-o" size=".5rem" />
          </div>
        </div>
        <div class="next next3" @click.stop="downLoadApp">
          <span>3.</span>
          <div>
            Baixe a versão mais recente do aplicativo e receba 9 reais.
            <div>
              <van-icon
                :name="iconImg"
                size=".5rem"
              />
              <span> INSTALAR </span>
            </div>
          </div>
        </div>
      </div>
      <div class="link-btn flex-sb">
        <div @click="gotoHome"><van-icon name="arrow-left" />Incicio</div>
        <div @click="openDep">Depósito<van-icon name="arrow" /></div>
      </div>
    </div>
    <bottom-tips />
  </div>
</template>
<script setup lang="ts">
import iconImg from "../../assets/img/base/xiazai.png";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { useBaseStore } from "@/stores/modules/base";
const userBase = useBaseStore();
const router = useRouter();
const shi = ref<any>("0" + 1);
const fen = ref<any>(59);
const miao = ref<any>(59);

onMounted(async () => {});
const gotoHome = () => {
  router.replace("/");
};
const addHome = () => {
  userBase.setShowAddToHomeVisible(true);
};
const downLoadApp = () => {
  router.replace("/download");
};
const openDep = () => {
  router.replace("/deposit");
};
function CountDown() {
  var time = {
    init: function () {
      // var h = "0" + 1;
      // var m = 59;
      // var s = 59;
      //进行倒计时显示
      var time = setInterval(function () {
        --miao.value;
        if (miao.value < 0) {
          --fen.value;
          miao.value = 59;
        }
        if (miao.value < 0) {
          --shi.value;
          miao.value = 59;
        }
        if (shi.value < 0) {
          miao.value = 0;
          fen.value = 0;
        }
        // 判断当时分秒小于10时补0
        function checkTime(i) {
          if (i < 10) {
            i = "0" + i;
          }
          return i;
        }
        miao.value = checkTime(miao.value);
        fen.value = checkTime(fen.value);
      }, 1000);
    },
  };
  time.init();
}
CountDown();
</script>
<style lang="scss" scoped>
.content-box {
  height: calc(100vh - $nav-bar-height);
}
.page-body {
  background-color: #002929;
  position: relative;
  height: 100%;
  .link-btn {
    color: #009e80;
    font-size: 0.5rem;
    width: 100%;
    position: absolute;
    bottom: 0;
    text-decoration: underline;
  }
  .top {
    background-color: #009e80;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 1.5rem;
    margin-top: -1.3rem;
  }
  .text {
    color: #009e80;
    font-size: 0.5rem;
    margin-top: 0.2rem;
  }
  .ord {
    color: #ffdf00;
    width: 3rem;
    margin-top: 0.5rem;
    font-size: 0.3rem;
    text-align: center;
  }
  .gre-box {
    background-color: #009e80;
    width: 94%;
    margin-top: 0.8rem;
    justify-content: left;
    text-align: left;
    border-radius: 0.1rem;
    overflow: hidden;
    .next {
      padding: 0.5rem;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: left;
      span {
        font-size: 0.4rem;
        font-weight: 600;
        margin-left: 0.5rem;
      }
      > div {
        margin: 0 0.4rem;
        font-size: 0.3rem;
        line-height: 0.5rem;
        display: flex;
        flex-direction: column;
        justify-content: left;
        > span {
          font-style: normal;
          font-size: 0.4rem;
          font-weight: 500;
          margin-left: 0;
        }
        > div {
          display: flex;
          align-items: center;
        }
      }
    }
    .next3 {
      border-top: 0.01rem solid #a8a3a3;
      color: #d9001b !important;
      font-style: italic;
      font-weight: 600;
    }
    .border {
      border-bottom: 0.01rem solid #a8a3a3;
      padding-top: 0.5rem;
      padding: 0.5rem 0 0 0.5rem;
      .font {
        font-size: 0.3rem;
        padding-bottom: 0.2rem;
        font-weight: 600;
        margin-left: 0.8rem;
      }
      .flex-ct {
        align-items: baseline;
        font-size: 0.4rem;
        justify-content: flex-start;
        color: #fff;
        font-weight: 600;
        .btn {
          margin-left: 0.5rem;
          width: 3.2rem;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          span {
            padding: 0.1rem 0;
            font-size: 0.3rem;
          }
        }
        .flex-sad {
          margin-left: 0.4rem;
          color: #000;
          span {
            padding: 0.1rem;
            background-color: #fff;
            font-weight: 800;
            border-radius: 0.1rem;
            margin: 0 0.1rem;
          }
          div {
            margin-left: 0.4rem;
            background-color: #ffdf00;
            padding: 0.1rem 1rem;
            border-radius: 1rem;
          }
        }
      }
    }
  }
}
</style>
