<template>
	<view class="loader-root" :style="{'--opacity':props.opacity,'--height':props.height}">
		<view class="loader">
			<view class="face">
				<view class="circle"></view>
			</view>
			<view class="face">
				<view class="circle"></view>
			</view>
			<view class="logo"><img class="img" src="/static/logo.png" loading="lazy"></view>
		</view>
		<view v-if="props.title" class="loader-title">{{props.title}}</view>
	</view>
</template>
<script>
import wx from '../../mixins/mp-weixin.js'
export default {
	mixins:[wx]
}
</script>
<script setup>
import {ref} from 'vue'


const props = defineProps({
	title:{
		type:String,
		default:"加载中..."
	},
	opacity: {
		type:Number,
		default:1
	},
	height: {
		type:String,
		default:"100vh"
	}
})

</script>

<style lang="scss" scoped>
    .loader {
      width: 20em;
      height: 20em;
      font-size: 1.5vmin;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .loader .face {
      position: absolute;
      border-radius: 50%;
      border-style: solid;
      animation: animate 3s linear infinite;
  }
  
  .loader .face:nth-child(1) {
      width: 100%;
      height: 100%;
      color: var(--w-error-light);
      border-color: currentColor transparent transparent currentColor;
      border-width: 0.2em 0.2em 0em 0em;
      --deg: -45deg;
      animation-direction: normal;
  }
  
  .loader .face:nth-child(2) {
      width: 90%;
      height: 90%;
      color: var(--w-success-light);
      border-color: currentColor currentColor #0000 #0000;
      border-width: 0.2em 0em 0em 0.2em;
      --deg: -135deg;
      animation-direction: reverse;
  }
  
  .loader .face .circle {
      position: absolute;
      width: 50%;
      height: 0.1em;
      top: 50%;
      left: 50%;
      background-color: #0000;
      transform: rotate(var(--deg));
      transform-origin: left;
  }
  
  .loader .face .circle::before {
      position: absolute;
      top: -.5em;
      right: -0.45em;
      content: '';
      width: .6em;
      height: .6em;
      background-color: currentColor;
      border-radius: 50%;
      box-shadow: 0 0 .5em .15em currentColor;
  }
  
  @keyframes animate {
      to {
          transform: rotate(1turn);
      }
  }
  .loader-root {
    width: 100%;
    height: var(--height,100vh);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	position: relative;
	opacity:1;
	transition: opacity 5s,display 5s / 5s;
    
	&::before {
		background-image: radial-gradient(closest-side,var(--w-main-light-1),var(--w-main));
		content: '';
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: var(--opacity,1);
	}
	

	
  }
  .loader-title {
    margin: 4vmin 0 10vmin;
    font-size: 3vmin ;
    color: var(--w-bg-dark);
    text-shadow: .2vmin .2vmin 0 var(--w-main);
    letter-spacing: .3vmin;
	position: relative;
  }
  .loader .logo .img {
    width: 17vmin;
    height: 17vmin;
  }
  .loader .logo {
    background-image: linear-gradient(to bottom,#FFF,#aaa);
    padding: 3vmin ;
    border-radius: 50%;
    box-shadow: 0 0 .5vmin #fff inset, 0 0 2vmin #0006;
  }
</style>