<template>
  <div class="window-width window-height column flex-center items-center" style="background-color: #f1f2f4">
    <div class="rounded bg-white q-pa-xl light-shadow column flex-center items-center" style="width: 650px">
      <div style="width: 100%">
        <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pptTD.png" style="height: 27px" />
      </div>
      <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638533817842486720.png"
        style="width: 300px" class="q-mt-xl" />
      <div class="row items-center q-mt-xl">
        <div class="pingfangr q-ml-xl" style="font-size: 18px">
          Access Denied
        </div>
      </div>
      <div class="q-mt-lg text-info text-small text-center" style="font-size: 14px">
        系统判定你进行了恶意访问，当前无法进行系统使用，封禁剩余时间：
        <el-countdown title="" v-if="countValue" format="HH[小时]mm[分]ss[秒]" :value="countValue" value-style="font-size:13px;color:red;"
          class="q-mt-md" @finish="liftingHandler" />
      </div>
      <div class="q-mt-xl text-center" style="font-size: 14px">
        <el-button type="info" size="large" class="ppt-button text-weight-bold" @click="
          redicetTo('https://work.weixin.qq.com/kfid/kfc378aada578ca8b0e')
          ">点击申诉</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ApiResult } from "@/configs/axios";
import FontService from "@/services/FontService";
import { useUserStore } from "@/store";
import { openNewBlank } from "@/utils/common";
import { ref } from "vue";
import { useRouter } from "vue-router";

const countValue = ref();
const router = useRouter()
const redicetTo = (url: string) => openNewBlank(url);
const navigationTo = (path:string) => router.push({path})
const validator = async () => {
  try {
    let response = await FontService.GetAllFontsAsync();
    if (response.data.resultCode == ApiResult.STATIC_ACCESS) {
      countValue.value = new Date(
        response.data.attach.replaceAll("-", "/")
      ).getTime();
    }
  } catch (error) { }
};
const liftingHandler= ()=>{
  useUserStore().setUserDeniedStatus(false)
  navigationTo('/login')
}
validator();
</script>

<style></style>