<template>
  <div class="content">
    <p class="info-title">{{ title }}</p>
    <p class="num">{{ delay }}<i>s</i></p>
    <svg xmlns="http://www.w3.org/2000/svg" :width="width" :height="width" version="1.1" class="svg">
      <circle class="border" fill="transparent" :cx="cx" :cy="cx" :r="r" :stroke-width="strokeWidth" stroke-linecap="round" />
    </svg>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'

defineProps({
  title: {
    type: String,
    default: ''
  },
  delay: {
    type: Number,
    default: 0
  }
})

const store = useStore()
const { is4k } = storeToRefs(store)

const width = computed(() => (is4k.value ? 440 * 2 : 440))
const cx = computed(() => (is4k.value ? 220 * 2 : 220))
const r = computed(() => (is4k.value ? 215 * 2 : 215))
const strokeWidth = computed(() => (is4k.value ? 10 * 2 : 10))
</script>

<style lang="scss" scoped>
.content {
  position: fixed;
  width: 440px;
  height: 440px;
  left: 50%;
  top: 50%;
  margin-top: -220px;
  margin-left: -220px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 10px solid rgba(255, 255, 255, 0.07);
  animation-duration: 0.2s;
  z-index: 9999;

  .info-title {
    position: absolute;
    top: 125px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 36px;
    font-weight: bold;
    color: #fff;
  }
  .num {
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 144px;
    font-weight: bold;
    color: #fff;
    font-weight: 'brown';
    i {
      font-size: 64px;
    }
  }
}
.border {
  position: relative;
  stroke: #dcb889;
  transform: translate3d(1px, 1px, 0);
  z-index: 10;
  stroke-dasharray: 1535px, 1535px;
  stroke-dashoffset: 0;
  animation: rotate 5s linear;
}

.svg {
  z-index: 10;
  position: absolute;
  top: -9px;
  left: -11px;
  transform: rotate(-90deg);
}

@keyframes rotate {
  0% {
    stroke-dashoffset: 1535px;
  }

  100% {
    stroke-dashoffset: 0;
  }
}
</style>
