<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\MechanicalView_hanjie\content\tip2.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-03-20 09:12:05
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="tip-box-logo" :key="keynum">
    <!-- <template #content> {{ props.val.tiptext}} </template> -->
    <div class="tipdiv">
      <!-- <p>{{ item }}</p> -->
      <div v-for="item in data">
        <el-tooltip
          class="box-item"
          :content="`${item.name}:${JSON.parse(item.status) ? t('messages.onLine') : t('messages.offline')}`"
          raw-content
          effect="dark"
          placement="top-start"
        >
          <i
            :class="
              JSON.parse(item.status)
                ? 'iconfont icon-blue iconSize ' + item.iconName
                : 'iconfont  icon-red  iconSize ' + item.iconName
            "
          ></i>
        </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useI18n } from 'vue-i18n'
let {t} = useI18n();
let props = defineProps<{
  val: any;
  msg: any;
}>();
let keynum = ref(0);
let data = null;
let content = null;
watch(
  () => props.val,
  (newVal, oldVal) => {
    console.log(newVal,"处理");

    data = newVal;
    content = "";
    newVal.forEach((res) => {
      // content+=`${res.name}<br/>`
      // content += `${res.name}:${JSON.parse(res.status) ? "在线" : "离线"}<br/>`;
      // content = ``;
    });
    content = props.msg + content;
    keynum.value++;
  },
  { deep: true, flush: "post" }
);

const a = ref(0);
onMounted(() => {});
</script>

<style scoped>
@import url("@/assets/css/iconfont.css");
.tip-box-logo {
  width: 100%;
  height: 100%;
  display: flex;
}
.iconSize {
  font-size: 1.2rem;
  /* color: #fff; */
}
.tipdiv {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.icon-red {
  color: #ff6e76;
  /* color: #E43961; */
  animation: redstart 2s infinite;
  /* position: relative; */
  /* top: -15px; */
}
.icon-blue {
  color: #20aec5;
  animation: redstarton 2s infinite;
  /* position: relative; */
  /* top: -15px; */
}
@keyframes redstart {
  0% {
  }
  50% {
    /* text-shadow: #fff 1px 0 5px; */
    color: #9a474b;
  }
  100% {
  }
}
@keyframes redstarton {
  0% {
  }
  50% {
    /* text-shadow: #fff 1px 0 5px; */
    color: #10606c;
  }
  100% {
  }
}
</style>
