<template>
  <!-- 地图上方翻转框 -->
  <div class="m-midN">
    <div class="turn-box">
      <!-- 正面 -->
      <div class="front">
        <div class="fornt-item" style="opacity: 1">
          <img :src="imgList.wsztry" alt="" width="55" height="75" />
          <div class="text-box">
            <span class="text-num">{{ fzList.ztry }}</span>
            <span class="text-title">网上在逃人员</span>
          </div>
        </div>
        <div class="fornt-item" style="opacity: 1">
          <img :src="imgList.sjgzqjry" alt="" width="55" height="75" />
          <div class="text-box">
            <span class="text-num">{{ fzList.sjgzdjry }}</span>
            <span class="text-title">收缴管制器具人员 </span>
          </div>
        </div>
        <div class="fornt-item" style="opacity: 1">
          <img :src="imgList.xzlqca" alt="" width="55" height="75" />
          <div class="text-box">
            <span class="text-num">{{ fzList.xzlqcaj }}</span>
            <span class="text-title">行政类侵财案件</span>
          </div>
        </div>
        <div class="fornt-item" style="opacity: 1">
          <img :src="imgList.xslqcaj" alt="" width="55" height="75" />
          <div class="text-box">
            <span class="text-num">{{ fzList.xslqcaj }}</span>
            <span class="text-title">刑事类侵财案件</span>
          </div>
        </div>
        <div class="fornt-item" style="opacity: 1">
          <img :src="imgList.jzzs" alt="" width="55" height="75" />
          <div class="text-box">
            <span class="text-num">{{ fzList.jzzs }}</span>
            <span class="text-title">救助自杀</span>
          </div>
        </div>
        <div class="fornt-item" style="opacity: 1">
          <img :src="imgList.jzzslret" alt="" width="55" height="75" />
          <div class="text-box">
            <span class="text-num">{{ fzList.jzzslret }}</span>
            <span class="text-title">救助走失老人儿童</span>
          </div>
        </div>
        <div class="fornt-item" style="opacity: 1">
          <img :src="imgList.mdjf" alt="" width="55" height="75" />
          <div class="text-box">
            <span class="text-num">{{ fzList.mdjf }}</span>
            <span class="text-title">成功化解矛盾纠纷</span>
          </div>
        </div>
        <div class="fornt-item" style="opacity: 1">
          <img :src="imgList.other" alt="" width="55" height="75" />
          <div class="text-box">
            <span class="text-num">{{ fzList.qtaj }}</span>
            <span class="text-title">其他类刑事案件</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { getYjCount, getXfbbCount, getPcryCount, getPcclCount } from '@/api/instructCenter.js'
import { ref, onMounted } from "vue";
const cardIndex = ref(0)
const titleList = ref([])
const imgList = ref({
  wsztry: require(`../../../../assets/images/wsztry.png`),
  sjgzqjry: require(`../../../../assets/images/sjgzqjry.png`),
  xzlqca: require(`../../../../assets/images/xzlqca.png`),
  xslqcaj: require(`../../../../assets/images/xslqcaj.png`),
  jzzs: require(`../../../../assets/images/jzzs.png`),
  jzzslret: require(`../../../../assets/images/jzzslret.png`),
  mdjf: require(`../../../../assets/images/mdjf.png`),
  other: require(`../../../../assets/images/other.png`),
})
const fzList = ref({
  ztry: 0,//网上在逃人员
  sjgzdjry: 0,//收缴管制器具人员
  xzlqcaj: 0,//行政类侵财案件
  xslqcaj: 0,//刑事类侵财案件
  jzzs: 0,//救助自杀
  jzzslret: 0,//救助走失老人儿童
  mdjf: 0,//成功化解矛盾纠纷
  qtaj: 0,//其他类刑事案件
})
const timer = ref(null)

onMounted(() => {
  // _getPcryCount() //获取大屏被盘查统计
})

//获取大屏被盘查人员统计
function _getPcryCount() {
  getPcryCount({}).then(res => {
    fzList.value.ztry = res.zt //在逃
    fzList.value.sdry = res.sd //涉毒
    fzList.value.pcry = res.all //盘查人员
  })
}

</script>
<style lang="scss" scoped>
.m-midN {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.turn-box {
  width: 100%;
  height: 100%;
  background: linear-gradient(to right,
      rgba(36, 55, 102, 0.3) 0%,
      rgba(17, 29, 59, 0.8) 50%,
      rgba(36, 55, 102, 0.3) 100%);
  position: relative;
  transition: all 80s;
  transform-style: preserve-3d;
  /* 3d呈现，让背后盒子立体呈现，不然永远是前面一个盒子朝向我们 */
  cursor: pointer;
  // animation: rotate 10s linear infinite alternate forwards;
}

.turn-box>div {
  position: absolute;
  top: 0;
  /* 让子盒子重叠一起 */
  width: 100%;
  height: 100%;
  // border-radius: 50%;
  /* 背面是不可见的 */
  backface-visibility: hidden;
}

.front {
  z-index: 1;
  display: flex;
  justify-content: space-between;
}

.back {
  transform: rotateX(180deg);
  display: flex;
  justify-content: space-between;
  /* 这里让back盒的先翻转180在front的后面 */
}

.turn-box:hover {
  animation-play-state: paused;
  /* 悬停事件，使得整个父盒子旋转动画停止 */
}

// @keyframes rotate {
//   0% {
//     transform: rotateX(0);
//   }
//   25% {
//     transform: rotateX(0);
//   }
//   50% {
//     transform: rotateX(180deg);
//   }
//   75% {
//     transform: rotateX(180deg);
//   }
//   100% {
//     transform: rotateX(180deg);
//   }
// }
.fornt-item {
  flex: 1;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;

  .text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 10px;

    .text-num {
      font-size: 26px;
      margin-bottom: 6px;
      color: rgba(58, 173, 231, 1);

      @supports (-webkit-background-clip: text) or (background-clip: text) {
        background: linear-gradient(to bottom,
            rgb(193, 217, 252),
            rgba(58, 173, 231, 1));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
    }

    .text-title {
      font-size: 12px;
    }
  }
}
</style>