<template>
  <div ref="numBox1" :key="keynum" :style="{ height: '100%', width: '97%' }">
    <border6 ref="refborder3" >
      <template v-slot>
        <div class="box" ref="classBox1">
          <div class="icontip">
            <div v-for="items in value" style="margin: auto 5px;" v-show="+items.val > +limit">
              <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>{{ limit }} {{unit}}</p>
                  </li>
                  <li>
                    <p class="t-right">{{t('messages.CurrentValue')}}：</p>
                    <p>{{ items.val }} {{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 > +limit
                      ? 'iconfont ' + icon + ' icon-red iconsmall-size'
                      : 'iconfont ' + icon + ' 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="+item.val > +limit
                ? 'iconfont ' + icon + ' icon-red iconbig-size'
                : 'iconfont ' + icon + ' icon-blue iconbig-size'
              "></i>
            <p class="unit" v-if="unit">
              <p class="num">{{item.val}}</p>
              <span>{{ unit }}</span>
            </p>

            
          <!-- <p  class="unit"><p v-show="value.data&&value.unit"  :class="'num'">{{value.data}}</p><span>{{value.unit}}</span></p> -->
          <!-- </div> -->
        </div>
      </template>
    </border6>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, reactive, ref, watch,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 i =ref(0)
let timer = null;
let item = computed(() => {
  return props.value[i.value];
});
let props = defineProps<{
  title: string;
  icon: string;
  limit: string | number;
  unit: string;
  value: Array<any>;
}>();
let keynum = ref(0);
const valuee = reactive({
  title: "",
  icon: "",
  limit: null,
  unit: "",
  value: null,
});

let refborder3 = ref();
let numBox1 = ref();
const classBox1 = ref();
onMounted(() => {
  timer = setInterval(() => {
    i.value++;
    if (i.value >= props.value.length) {
      i.value = 0;
    }
  }, 5000);
 });
 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 = (val:any) => {

//   value.type=val.
//   // if (data > quota) {
//   //   //使用定时器解决通知重叠问题
//   //   let navdebug = setTimeout(() => {
//   //     warningNot(props.title, "出现异常，异常值为："+value.data+"，请排查！");
//   //     clearTimeout(navdebug);
//   //   }, 0);
//   // }
//   keynum.value++;
// };
// watch(() => props, (val) => {
//   valuee.title=val.title
//   valuee.icon=val.icon
//   valuee.limit=val.limit
//   valuee.unit=val.unit
//   valuee.value=val.value
//   keynum.value++
// }, { deep: true })

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

<style scoped>
@import "@/assets/css/iconfont.css";

.box {
  height: 50%;
  width: 100%;
  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;
}

.iconbig-size {
  font-size: 70px;
}

.iconsmall-size {
  font-size: 20px;
}

.icon-red {
  color: #e43961;
  animation: redstart 2s infinite;
  /* position: relative; */
  /* top: -15px; */
}

.icon-blue {
  color: #20aec5;
  /* position: relative; */
  /* top: -15px; */
}

/* .icon-red, .icon-blue { */
/* margin-bottom: 20%; */
/* } */
.num {
  font-size: 16px;
}

.unit {
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;
  font-size: 16px;
  height: 0;
  width: 100px;
}

.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;
}


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

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

/* .icontipBox li p:nth-child(1) {
  min-width:80px;
  display: flex;
  font-size: 18px;
}
.icontipBox li:nth-child(2) {
} */
@keyframes redstart {
  0% {}

  50% {
    text-shadow: #fff 1px 0 10px;
  }

  100% {}
}
</style>
