<template>

  <div class="ellipse">
    <div :class="`circle circle${i+1}`" v-for="(n,i) in list">
      <div class="ma">
<!--        <img v-if="i >= 0 && i < 5" :class="`iconImg`" :src="getBtnImagePath(i)">-->
        <img v-if="i==0" class="iconImg" src="@/assets/img/btn01.png">
        <img v-if="i==1" class="iconImg" src="@/assets/img/btn02.png">
        <img v-if="i==2" class="iconImg" src="@/assets/img/btn03.png">
        <img v-if="i==3" class="iconImg" src="@/assets/img/btn04.png">
        <img v-if="i==4" class="iconImg" src="@/assets/img/btn05.png">
        <div class="statistic">
          <h3>{{n.name}}</h3>
          <p v-if="Array.isArray(n.num)">
            {{Number(n.num[0]/10000).toFixed(2)}} 万卷/<br/>
            {{Number(n.num[1]/10000).toFixed(2)}} 万件
          </p>
          <p v-else>{{n.num}}</p>
        </div>

<!--        <el-statistic class="statistic" :title="n.name" :value="Array.isArray(n.num)?`${n.num[0]}卷/${n.num[1]}件`:n.num" :value-style="statisticStyle"></el-statistic>-->
      </div>
    </div>
  </div>

</template>

<script setup>
import {onMounted, ref} from "vue";
import {Swiper, SwiperSlide} from 'swiper/vue'
import {Autoplay, Navigation} from 'swiper'
import * as api from "@/apiPc/common"
const statisticStyle = ref({'color':'#fff'})
const modules = ref([Autoplay])
const list =ref([])
let intervalA = null
onMounted(()=>{
  init()
})

function init() {
  if(!intervalA){
    getdata()
  }
  intervalA = setInterval(getdata, 1000*60*60);
}
const getdata = () => {
  api.getBasicInfo().then(res=>{
    list.value = []
    let arr = res.data
    for (let n in arr){
      let obj = {name:n,num:arr[n]}
      list.value.push(obj)
    }
  })
}
function getBtnImagePath(index) {
  return require(`@/assets/img/btn${index + 1}.png`);
}
//动画的暂停与开始
var svg1 = document.getElementById("svg_an");
function pauseAn() {
  svg1.pauseAnimations();
}
function unpauseAn() {
  svg1.unpauseAnimations();
}

</script>

<style scoped lang="scss">
/* 定义旋转动画 */
@keyframes rotate {
  0%{
    transform: rotate3d(1,1,1,0deg);
  }
  100%{
    transform: rotate3d(1,1,1,360deg);
  }
}
:deep(.el-statistic__head){
  font-family: 'YouSheBiaoTiHei';
  background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: calc(20*100vw/1920);
  line-height: 1.6;
}
:deep(.el-statistic__number){
  font-size: calc(26*100vw/1920);
  font-family: 'DIN Alternate';
  background: linear-gradient(180deg, #fff 20%, #9CD2FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.statistic{--el-statistic-title-color: #fff;text-align: center;position: relative;
  top: calc(-20*100vw/1920);
  h3{color: #fff;  font-family: 'YouSheBiaoTiHei';
    background: linear-gradient(180deg, #fff 10%, #9CD2FF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: calc(22*100vw/1920);
    line-height: 1;margin: 0}
  p{color: #fff;   background: linear-gradient(180deg, #fff 20%, #9CD2FF 100%);
    -webkit-background-clip: text;  font-size: calc(26*100vw/1920);
    font-family: 'DIN Alternate';
    -webkit-text-fill-color: transparent;line-height: 1;overflow: visible;
    margin: 0;height: calc(60*100vw/1920);display: flex;align-items: center;justify-content: center;
    span{font-size: calc(22*100vw/1920);}
  }
}
.ellipse {
  position: relative;
  left: -3%;
  width: 100%;margin: auto;
  height: 100%;
  border-radius: 50%;z-index: 10;
  //border: 2px #fff solid;
  transform-style: preserve-3d;
  transform: rotateZ(90deg) rotateY(60deg);
  &:hover .circle{ animation-play-state: paused!important;}
}
.ellipse .circle {
  width: calc(300*100vw/1920);
  height: calc(400*100vw/1920);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  text-align: center;opacity: 1;filter: brightness(100%);
  &:hover{
    animation-play-state: paused;
  }
}
.ellipse .circle .ma{
  background: url("@/assets/img/mabg.png") no-repeat center;
  background-size: contain;
  //box-shadow: 0 0 20px #000;
  display: block;
  height: calc(340*100vw/1920);    width:calc(290*100vw/1920);
  transform: rotateZ(-90deg);  /* 再次旋转 */
  img{width: 70%;position: relative;top:0;margin: 0 auto calc(60*100vw/1920);}
}

.ellipse .circle1{
  animation: moveA 30s linear infinite;
}
.ellipse .circle2{
  animation: moveB 30s linear infinite;
}
.ellipse .circle3{
  animation: moveC 30s linear infinite;
}
.ellipse .circle4{
  animation: moveD 30s linear infinite;
}
.ellipse .circle5{
  animation: moveE 30s linear infinite;
}

@keyframes moveA {
  0% {
    transform: rotateZ(0) translateX(calc(300*100vw/1920)) rotateZ(0) rotateY(-70deg) scale(1);
    filter: brightness(100%);
  }
  5% {
    transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  20% {
    transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  25% {
    transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  40% {
    transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  45% {
    transform: rotateZ(200deg) translateX(calc(300*100vw/1920)) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  60% {
    transform: rotateZ(200deg) translateX(calc(300*100vw/1920)) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  65% {
    transform: rotateZ(280deg) translateX(calc(300*100vw/1920)) rotateZ(-280deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  80% {
    transform: rotateZ(280deg) translateX(calc(300*100vw/1920)) rotateZ(-280deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  85% {
    transform: rotateZ(360deg) translateX(calc(300*100vw/1920)) rotateZ(-360deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);
  }
  100% {
    transform: rotateZ(360deg) translateX(calc(300*100vw/1920)) rotateZ(-360deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);
  }
}
@keyframes moveB {
  0% {
    transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  5% {
    transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg)  scale(1);
    z-index: 99;filter: brightness(100%);
  }
  20% {
    transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg)  scale(1);
    z-index: 99;filter: brightness(100%);
  }
  25% {
    transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  40% {
    transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  45% {
    transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  60% {
    transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  65% {
    transform: rotateZ(200deg) translateX(calc(300*100vw/1920)) rotateZ(-200deg) rotateY(-70deg)  scale(0.7);
    filter: brightness(60%);
  }
  80% {
    transform: rotateZ(200deg) translateX(calc(300*100vw/1920)) rotateZ(-200deg) rotateY(-70deg)  scale(0.7);
    filter: brightness(60%);
  }
  85% {
    transform: rotateZ(280deg) translateX(calc(300*100vw/1920)) rotateZ(-280deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  100% {
    transform: rotateZ(280deg) translateX(calc(300*100vw/1920)) rotateZ(-280deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
}
@keyframes moveC {
  0% {
    transform: rotateZ(-160deg) translateX(calc(300*100vw/1920)) rotateZ(160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  5% {
    transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg)  scale(0.8);
    filter: brightness(80%);
  }
  20% {
    transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg)  scale(0.8);
    filter: brightness(80%);
  }
  25% {
    transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);z-index: 99;
  }
  40% {
    transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);z-index: 99;
  }
  45% {
    transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  60% {
    transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  65% {
    transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg)  scale(0.7);
    filter: brightness(60%);
  }
  80% {
    transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg)  scale(0.7);
    filter: brightness(60%);
  }
  85% {
    transform: rotateZ(200deg) translateX(calc(300*100vw/1920)) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  100% {
    transform: rotateZ(200deg) translateX(calc(300*100vw/1920)) rotateZ(-200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
}
@keyframes moveD {
  0% {
    transform: rotateZ(-200deg) translateX(calc(300*100vw/1920)) rotateZ(200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  5% {
    transform: rotateZ(-160deg) translateX(calc(300*100vw/1920)) rotateZ(160deg) rotateY(-70deg)  scale(0.7);
    filter: brightness(60%);
  }
  20% {
    transform: rotateZ(-160deg) translateX(calc(300*100vw/1920)) rotateZ(160deg) rotateY(-70deg)  scale(0.7);
    filter: brightness(60%);
  }
  25% {
    transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg)  scale(0.8);
    filter: brightness(80%);
  }
  40% {
    transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  45% {
    transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);z-index: 99;
  }
  60% {
    transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);z-index: 99;
  }
  65% {
    transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  80% {
    transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  85% {
    transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  100% {
    transform: rotateZ(160deg) translateX(calc(300*100vw/1920)) rotateZ(-160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
}
@keyframes moveE {
  0% {
    transform: rotateZ(-280deg) translateX(calc(300*100vw/1920)) rotateZ(280deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  5% {
    transform: rotateZ(-200deg) translateX(calc(300*100vw/1920)) rotateZ(200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  20% {
    transform: rotateZ(-200deg) translateX(calc(300*100vw/1920)) rotateZ(200deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  25% {
    transform: rotateZ(-160deg) translateX(calc(300*100vw/1920)) rotateZ(160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  40% {
    transform: rotateZ(-160deg) translateX(calc(300*100vw/1920)) rotateZ(160deg) rotateY(-70deg) scale(0.7);
    filter: brightness(60%);
  }
  45% {
    transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg) scale(0.7);
    filter: brightness(80%);
  }
  60% {
    transform: rotateZ(-80deg) translateX(calc(300*100vw/1920)) rotateZ(80deg) rotateY(-70deg) scale(0.7);
    filter: brightness(80%);
  }
  65% {
    transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);z-index: 99;
  }
  80% {
    transform: rotateZ(0deg) translateX(calc(300*100vw/1920)) rotateZ(0deg) rotateY(-70deg) scale(1);
    filter: brightness(100%);z-index: 99;
  }
  85% {
    transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
  100% {
    transform: rotateZ(80deg) translateX(calc(300*100vw/1920)) rotateZ(-80deg) rotateY(-70deg) scale(0.8);
    filter: brightness(80%);
  }
}
</style>