<!--
 * @FilePath: \wwwd:\code\screenFront\src\views\Mechanics\child\son\components\imageTop.vue
 * @Author: 王路平
 * @文件版本: V1.0.0
 * @Date: 2023-02-16 11:51:32
 * @Description: 
 * 
 * 版权信息         : 2023 by ${再登软件}, All Rights Reserved.
-->
<template>
  <div class="tipbox" :style="{ width: itemSize.width, height: itemSize.height }">
    <el-image
      :style="{ width: itemSize.imgwidth, height: '90%' }"
      :src="data.src ? data.src : ''"
      fit="scale-down"
    >
      <template #error>
        <div class="image-slot">
          <el-icon><icon-picture /></el-icon>
        </div>
      </template>
    </el-image>
  </div>
</template>

<script setup lang="ts">
import { getCurrentInstance, onMounted, onUnmounted, reactive, ref } from "vue";
import { Picture as IconPicture } from "@element-plus/icons-vue";
import border1 from "@/components/borderBox/border1.vue";
import {clacendTime} from "@/utils/time"
import { useInPlantProductsStore } from "@/store/module/InPlantProducts";
const store = useInPlantProductsStore();
let data = reactive({
  src: "",
});
let dateColor=null
let time = null
const itemSize = reactive({
  height: "0px",
  width: "0px",
  imgwidth: "0px",
  imgheight: "0px",
});
onMounted(() => {
  // setData()
});

function setchartWH(width: any, height: any) {
  itemSize.height = height-20 + "px";
  itemSize.width = width + "px";
  itemSize.imgwidth = width  + "px";
  itemSize.imgheight = height  + "px";
  // refborder1.value.resetWH()
}

const setData = (value: any) => {
  data.src = value;

}
onUnmounted(() => {
    if(time){
        clearInterval(time)
    }

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

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

.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.green {
  color: green;
  font-size: 2rem;
}
.red {
  color: red;
  font-size: 2rem;
}
.fff {
  color: #aaa;
  font-size: 2rem;
}
.toptip-h2 {
  color: red;
  font-size: 2rem;
}
.toptip-p {
  font-size: 2rem;
  color: #fff;
}
p{
  font-size:1.2rem
}
.uldianji {
  display: flex;
  width: 100%;
  justify-content: space-around;
}
img {
  padding: 1rem 0 1rem 0;
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.image-slot .el-icon {
  font-size: 30px;
}
.tipbox{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.colorRed{
color: #FF6E76;
}
.colorgreen{
  color: #7CFFB2;
}
.coloryellow{
  color: #FDDD60;
}
</style>
