<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="/static/images/icon_lock_transparent.png" mode="aspectFill" :style="{width: size * 0.35 + 'rpx',
          height: size * 0.35 + 'rpx'}"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "SwitchLoading",
  props:{
    size: Number,
  },
  data () {
    return {
      show: false
    }
  },
  methods: {
    open () {
      this.show = true
    },
    close () {
      this.show = false
    }
  }
};
</script>

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

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

  position: relative;
}

.circle-border {
  padding: 3upx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(99, 184, 175);
  background: linear-gradient(
      0deg,
      rgba(99, 184, 175, 0.1) 33%,
      rgba(99, 184, 175, 1) 100%
  );
  animation: spin 0.8s linear 0s infinite;

  position: absolute;
  z-index: 0;
}

.circle-border-stop {
  padding: 3upx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: rgb(99, 184, 175);
  position: absolute;
  z-index: 0;
}

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