<template>
  <div id="wind-pressure-item" :class="{ abnormal:isWaring }">
    <div class="label">
      <img src="../../../../assets/images/windPressure/icon.png" alt=""/>
      <span>{{ index }}号风压</span>
    </div>
    <div class="container" ref="length">
      <div class="value" ref="value"></div>
      <div id="point" ref="point"></div>
    </div>
    <div class="value-num" :class="{ warning: isWaring }">
      {{ params.wp.value }}{{ params.wp.unit }}
    </div>
  </div>
</template>

<script setup>
import {reactive, onMounted, watch, defineProps, computed} from "vue";

const params = defineProps({
  wp: Object,
  index: Number,
});
// const info = {
//   windPId: 0, //编号
//   max: 120, //最大值
//   value: 40, //测量值
//   point: 60, //阈值
// };
// const wp = reactive(info);
const length = ref(null);
const value = ref(null);
const point = ref(null);
onMounted(handleOnMounted);

function handleOnMounted() {
  // const  = length.value.offsetWidth);
  setValue();
}

watch(() => params.wp.value, (value) => {
  setValue();
});

function setValue() {
  let width = (params.wp.value * length.value.offsetWidth) / params.wp.max;
  value.value.style.width = `${width}px`;
  let flag = (params.wp.point * length.value.offsetWidth) / params.wp.max;
  point.value.style.left = `${flag}px`;
  if (width >= flag) {
    value.value.style.background = "#F53839";
  } else {
    value.value.style.background = "#60DDDE";
  }
}

let isWaring = computed(() => {
  return params.wp.value >= params.wp.point;
});
</script>

<style lang="scss" scoped>
.abnormal:hover {
  background: #9C5252 !important;
  border-radius: 6px;

  #point {
    background: #fff !important;
  }
}

#wind-pressure-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 38px 7px 10px;
  margin-bottom: 17px;

  &:hover {
    background: #2E5589;
    border-radius: 6px;
  }

  &:last-child {
    .label {
      span {
        margin: 0 5px 0 14px;
      }
    }
  }

  .label {
    display: flex;
    align-items: center;

    img {
      height: 26px;
      width: 26px;
    }

    span {
      //width: 101px;
      white-space: nowrap;
      height: 37px;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: #d6f1fa;
      line-height: 37px;
      margin: 0 20px 0 14px;

    }
  }

  .container {
    width: 500px;
    height: 24px;
    border-radius: 12px;
    border: 1px solid #0f82af;
    position: relative;

    .value {
      height: inherit;
      width: 0px;
      background: #60ddde;
      border-radius: 10px;
      transition: width 0.5s linear 0s;
    }

    #point {
      position: absolute;
      height: 20px;
      background: #60ddde;
      width: 3px;
      border-radius: 4px;
      box-shadow: 0 0 10px #92D18F;
      top: 1px;
      left: 1px;
    }
  }

  .value-num {
    height: 37px;
    font-size: 28px;
    font-family: MicrosoftYaHei;
    color: #d6f1fa;
    line-height: 37px;
    margin-left: 20px;
  }

  .warning {
    color: #f53839;
    font-size: 28px;
    font-weight: bold;
    font-family: MicrosoftYaHei;
  }
}
</style>
