<template>
  <view>
    <view class="spinner-box" :style="{ width: size + 'rpx', height: size + 'rpx' }">
      <view
        v-if="show"
        class="circle-border"
        :style="{ width: size * 0.75 + 'rpx', height: size * 0.75 + 'rpx' }"
      >
      </view>
      <view
        v-else
        class="circle-border-stop"
        :style="{ width: size * 0.75 + 'rpx', height: size * 0.75 + 'rpx' }"
      ></view>
      <view
        class="circle-core"
        :style="{ width: size * 0.75 - 2 + 'rpx', height: size * 0.75 - 2 + 'rpx' }"
      >
        <image
          src="https://cos-lock.skychip.top/mp/icon_lock.png"
          mode="aspectFill"
          :style="{ width: size * 0.35 + 'rpx', height: size * 0.35 + 'rpx' }"
        ></image>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue'

  const show = ref(false)

  const open = () => {
    show.value = true
  }
  const close = () => {
    show.value = false
  }

  defineProps({
    size: {
      type: Number,
      required: true
    }
  })

  defineExpose({ open, close })
</script>

<style>
  @keyframes spin {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(359deg);
    }
  }

  .spinner-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
  }

  .circle-border {
    position: absolute;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3upx;
    background: #4777ee;
    background: linear-gradient(0deg, rgba(99, 184, 175, 0.1) 33%, rgba(71, 119, 238, 1) 100%);
    border-radius: 50%;
    animation: spin 0.8s linear 0s infinite;
  }

  .circle-border-stop {
    position: absolute;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3upx;
    background: #4777ee;
    border-radius: 50%;
  }

  .circle-core {
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 50%;
  }
</style>
