<template>
  <div class="eventNumer">
    <div class="big-bg">
      <div class="y-btn" v-for="(item, index) in nameList"
        :class="{ 'active-btn': currentNum == index, 'y-btn-top': index == 0, 'y-btn-left': index == 1, 'y-btn-right': index == 2 }"
        @click="choseItem(index, item)">{{ item.name }}</div>
      <!-- 电信到移动数量 -->
      <div class="d-y-text text text-right">
        <div class="d-y-text-num">{{ bigNumberTransform(infoObj.telecomToMobile) }}</div>
        <div>事件数量</div>
      </div>
      <!-- 移动到联调数量 -->
      <div class="y-l-text text text-center">
        <div class="d-y-text-num">{{ bigNumberTransform(infoObj.mobileToUnicom) }}</div>
        <div>事件数量</div>
      </div>
      <!-- 联通到电信数量 -->
      <div class="l-d-text text text-left">
        <div class="d-y-text-num">{{ bigNumberTransform(infoObj.unicomToTelecom) }}</div>
        <div>事件数量</div>
      </div>
      <!-- 电信到联通数量 -->
      <div class="d-l-text text text-right">
        <div class="d-y-text-num">{{ bigNumberTransform(infoObj.telecomToUnicom) }}</div>
        <div>事件数量</div>
      </div>
      <!-- 联通到移动数量 -->
      <div class="l-y-text text text-center">
        <div class="d-y-text-num">{{ bigNumberTransform(infoObj.unicomToMobile) }}</div>
        <div>事件数量</div>
      </div>
      <!-- 移动到电信数量 -->
      <div class="y-d-text text text-left">
        <div class="d-y-text-num">{{ bigNumberTransform(infoObj.mobileToTelecom) }}</div>
        <div>事件数量</div>
      </div>
      <img class="outer" src="../../../assets/image/monitoring/networkSituation/outer.png" alt="">
      <img class="inside" src="../../../assets/image/monitoring/networkSituation/inside.png" alt="">
      <img class="small-bg" src="../../../assets/image/monitoring/networkSituation/small-bg.png" alt="">
      <img class="earth" src="../../../assets/image/monitoring/networkSituation/earth.png" alt="">
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { bigNumberTransform } from "../../../utils/utils";
const {
  infoObj = {}
} = defineProps({
  infoObj: Object
});
const nameList = ref(
  [
    {
      name: '电信',
      childrenList: [
        {
          name: '电信>移动',
          value: '电信-移动'
        },
        {
          name: '电信>联通',
          value: '电信-联通'
        }
      ]
    },
    {
      name: '移动',
      childrenList: [
        {
          name: '移动>联通',
          value: '移动-联通'
        },
        {
          name: '移动>电信',
          value: '移动-电信'
        }
      ]
    },
    {
      name: '联通',
      childrenList: [
        {
          name: '联通>电信',
          value: '联通-电信'
        },
        {
          name: '联通>移动',
          value: '联通-移动'
        }
      ]
    }
  ]
)
const currentNum = ref(1)
/**
 * @description: 按钮传参
 */
const emit = defineEmits(['tabList'])
/**
 * @description 按钮点击事件
 */
const choseItem = (e, item) => {
  currentNum.value = e
  emit('tabList', item)
}


</script>
<style lang="scss" scoped>
.eventNumer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .big-bg {
    background: url('../../../assets/image/monitoring/networkSituation/big-bg.png') no-repeat;
    background-size: 100% 100%;
    width: 700px;
    height: 700px;
    position: relative;
  }

  .y-btn {
    width: 101px;
    height: 47px;
    line-height: 47px;
    background: rgba(15, 174, 220, 0.14) linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 100%);
    border-radius: 8px;
    border: 1px solid rgba(84, 229, 252, 0.15);
    text-align: center;
    font-weight: 400;
    color: #FFFFFF;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
  }

  .active-btn {
    border: 1px solid rgba(84, 229, 252, 0.27);
    background: rgba(84, 229, 252, 0) linear-gradient(180deg, rgba(84, 229, 252, 0.53) 0%, rgba(15, 174, 220, 0.45) 100%);
  }

  .y-btn-top {
    position: absolute;
    left: 43%;
    top: -20px;
  }

  .y-btn-left {
    position: absolute;
    top: 68%;
    left: -40px;
  }

  .y-btn-right {
    position: absolute;
    right: -40px;
    top: 69%;
  }

  .text {
    position: absolute;
    color: #8DDAF1;
    font-weight: 500;
    font-size: 16px;

    .d-y-text-num {
      font-size: 22px;
      color: #1AD7FF;
      font-family: YouSheBiaoTiHei;
      text-shadow: 0px 0px 7px rgba(5, 252, 255, 0.64);
      background: linear-gradient(180deg, #FFFFFF 0%, #1AD7FF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .d-y-text {
    top: 18.5%;
    left: 0;
  }

  .y-l-text {
    bottom: -15px;
    left: 45%;
  }

  .l-d-text {
    right: 0px;
    top: 17.5%;
  }

  .text-right {
    text-align: right;
  }

  .text-left {
    text-align: left;
  }

  .text-center {
    text-align: center;
  }

  .d-l-text {
    right: 25%;
    top: 25.5%;
  }

  .l-y-text {
    bottom: 19%;
    left: 46%;
  }

  .y-d-text {
    top: 27%;
    left: 25%;
  }

  .outer {
    width: 570px;
    height: 567px;
    position: absolute;
    left: 70px;
    top: 60px;
    box-sizing: border-box;
    animation: rotate1 5s linear infinite;
  }

  .inside {
    position: absolute;
    left: 100px;
    top: 93px;
    box-sizing: border-box;
    width: 500px;
    height: 500px;
    animation: rotate 5s linear infinite;
  }

  .small-bg {
    position: absolute;
    left: 140px;
    top: 132px;
  }

  .earth {
    position: absolute;
    left: 150px;
    top: 130px;
    width: 382px;
    height: 392px;
  }

  @keyframes rotate {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes rotate1 {
    to {
      transform: rotate(-360deg);
    }
  }
}
</style>