<!--
 * @FilePath: \screenFront\src\views\realtimeSecurityJixiefenchang\content\chart\verticalNum.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-13 08:22:35
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div ref="numBox1" :style="{height:boxSize.height,width:boxSize.width,marginBottom:'10px'}">
    <border6 ref="refborder3">
      <template v-slot>
        <div class="box" ref="classBox1">
          <div class="icontip">
            <div v-for="items in value.data" style="margin: auto 5px;" v-show="(+items.val > +value.quota)&&item.status">
              <el-popover placement="bottom" :width="250" trigger="hover" effect="dark"
                :popper-style="{ 'background-color': 'rgba(0,0,0,.8)' }">
                <ul class="icontipBox">
                  <li>
                    <p class="t-right">{{t('messages.position')}}：</p>
                    <p>{{ items.name }}</p>
                  </li>
                  <li>
                    <p class="t-right">{{t('messages.NormalRange')}}：</p>
                    <p>{{ value.quota }} {{value.unit}}</p>
                  </li>
                  <li>
                    <p class="t-right">{{t('messages.CurrentValue')}}：</p>
                    <p>{{ items.val }} {{value.unit}}</p>
                  </li>
                  <li>
                    <p class="t-right">报警时间：</p>
                    <p>{{ items.date }}</p>
                  </li>
                  <li>
                    <p class="t-right">持续时间：</p>
                    <p>{{ items.continuous }}</p>
                  </li>
                </ul>
                <template #reference>
                  <i :class="+items.val > +value.quota
                      ? 'iconfont ' + value.iconname + ' icon-red iconsmall-size'
                      : 'iconfont ' + value.iconname + ' icon-blue iconsmall-size'
                    "></i>
                </template>
              </el-popover>
            </div>
          </div>
          <!-- <h2>{{ `${t(item.i18n[0])}${t(item.i18n[1])}`}}</h2> -->
          <h2>{{ item.name}}</h2>
            <i :class="['iconfont', 'iconbig-size', value.iconname, iconcolor]"></i>
            <p class="unit" v-if="value.unit&&item.status">
              <p class="num">{{item.val}}</p>
              <span>{{ value.unit }}</span>
            </p>

        </div>
      </template>
    </border6>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch,computed,onUnmounted } from "vue";
import border6 from "@/components/borderBox/border6.vue";
import { verticalNumPerson } from "@/type/realtimeSecurity";
import { warningNot } from "@/utils/notification";

import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let props = defineProps<{
  title: string;
}>();
let i =ref(0)
let item = computed(() => {
  
  return value.data[i.value]||{"name":"","val":"0","type":"","field":"","ts":0,"status":false};
});
let iconcolor = computed(() => {
  console.log(value.data[i.value]);
  //开始进入渲染是没有获取到该数据则需要判断 如果没有则返回空
  if (value.data[i.value]) {
    return value.data[i.value].status ? +value.data[i.value].val > +value.quota ? "icon-red" : "icon-blue" : "icon-grey";
  } else {
    return "icon-grey"
  }

});
let keynum = ref(0);
const value = reactive<any>({
  data: [],
  unit: "",
  quota: null,
  iconname: "",
});

let refborder3 = ref();
let numBox1 = ref();
const classBox1=ref()
let timer: any = null;
onMounted(() => {
  
 });
 onUnmounted(() => {
  clearInterval(timer);
 })

const boxSize=reactive({
  height:'',
  width:''
})

function setchartWH(width: any, height: any) {
  boxSize.height=height+'px'
  boxSize.width=width+'px'
  refborder3.value.resetWH();
}

const setData = (
  data?: number | null,
  iconname?: string,
  quota?: number | null,
  unit?: string
) => {
  value.data = data;
  value.iconname = iconname;
  value.quota = quota;
  value.unit = unit;
  keynum.value++;

  clearInterval(timer);
  timer = setInterval(() => {
    i.value++;
    if (i.value >= value.data.length) {
      i.value = 0;
    }
  }, 5000);
};

defineExpose({
  setchartWH,
  setData,
});
</script>

<style scoped>
@import "@/assets/css/iconfont.css";
.box {
  height: 50%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
/* .contentbox{
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
} */
h2 {
  color: #fff;
}
p {
  color: #fff;
}
.icon-red {
  font-size: 140px;
  color: #E43961;
  animation: redstart 2s infinite;
  /* position: relative; */
  /* top: -15px; */
}
.icon-grey {
  color: rgb(167, 166, 189);
  font-size: 140px;
  /* position: relative; */
  /* top: -15px; */
}
.icon-blue {
  font-size: 140px;
  color: #20AEC5;
  /* position: relative; */
  /* top: -15px; */
}
.iconsmall-size {
  font-size: 20px;
}

.num{
  font-size: 32px;
}
.unit{
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;
  font-size: 25px;
  height: 0;
  width: 100px;
}
.box >h2{
  font-size: 24px;
}


.icontip {
  display: flex;
  margin-top: -60px;
  width: 100px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 60px;
}

.icontipBox li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 5px;
}

.icontipBox li p:nth-child(1) {
  width: 40%;
  text-align: left;
}
.icontipBox li p:nth-child(2) {
  flex: 1;
}

@keyframes redstart {
    0% {
        
      }
      50% {
        text-shadow: #fff 1px 0 10px;
    }
      100% {
       
      }
}
</style>
