<template>
  <!-- 年龄比例 -->
  <div class="box">
    <div class="left-box">
      <img src="../images/shouhu.gif" alt="" srcset="" />
    </div>
    <div class="flex flex-col items-end justify-center flex-1">
      <p>安全守护</p>
      <p><span class="green">{{datas.securityDays}}</span>天</p>
      <p>成功拦截攻击</p>
      <p><span class="red">{{datas.interceptAttackDays}}</span>次</p>
    </div>
  </div>
</template>

<script setup>
  import { getSecurityTotal } from '@/api/dataScreenMock';
  import dayjs from 'dayjs';
  import { reactive, ref, watch, computed, onBeforeUnmount } from 'vue';
  const load = ref(false);
  const timer1 = ref();
  const datas = ref({});
  const getRandomIntInclusive = (min, max) => {
    const minCeiled = Math.ceil(min);
    const maxFloored = Math.floor(max);
    return Math.floor(Math.random() * (maxFloored - minCeiled + 1) + minCeiled);
  }
  const query = () => {
    datas.value.securityDays = dayjs().diff('2025-03-28', 'day')
    if (!datas.value.interceptAttackDays) {
      datas.value.interceptAttackDays = 78
    } else {
      datas.value.interceptAttackDays = datas.value.interceptAttackDays + getRandomIntInclusive(10, 30)
    }
  }
  query();
  timer1.value = setInterval(() => {
    if (!load.value) {
      query();
    }
  }, 3600000);
  onBeforeUnmount(() => {
    if (timer1.value) {
      clearInterval(timer1.value);
      timer1.value = null;
    }
  });
</script>
<style lang="scss" scoped>
  .box {
    width: 100%;
    height: 100%;
    display: flex;
    p {
      font-size: 22px;
      font-weight: 600;
      color: #fff;
    }
    .left-box {
      width: 200px;
      margin-top: 15px;
      height: 200px;
      background: url('../images/xuan.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .green {
    color: #4eac5b;
    font-size: 38px;
  }
  .red {
    font-size: 38px;
    color: #eb3223;
  }
</style>
