<template>
  <div id="item-info">
    <div class="label">
      <div :style="{ backgroundImage: 'url(' +getImageUrl(windIcon)+')' }" class="wind-icon"></div>
      <span>{{ params.name }}</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 }">
      {{ valueAndUnit }}
    </div>
  </div>
</template>

<script setup>
const params = defineProps({
  wp: Object,
  icon: String,
  name: String,
  unit: String,
});
// const info = {
//   windPId: 0, //编号
//   max: 120, //最大值
//   value: 40, //测量值
//   point: 60, //阈值
// };
const windIcon = reactive(params.icon);
const length = ref(null);
const value = ref(null);
const point = ref(null);
onMounted(handleOnMounted);

function handleOnMounted() {
  setValue();
}

watch(() => params.wp.value, () => {
  setValue();
});
const getImageUrl = (name) => {
  return new URL(`../../../../assets/images/airInfo/${name}`, import.meta.url).href
}
const 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 =
        "linear-gradient(270deg, #FB3838 0%, #E98526 100%)";
  } else {
    value.value.style.background =
        "linear-gradient(270deg, #38CAFB 0%, #E9D726 100%)";
  }
}
let isWaring = computed(() => {
  return params.wp.value >= params.wp.point;
});

const valueAndUnit = computed(() => params.wp.value + " "+ params.unit );
</script>

<style lang="scss" scoped>
#item-info {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 5px 14px;
  margin-bottom: 30px;

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

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

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

    .wind-icon {
      height: 36px;
      width: 34px;
    }

    span {
      width: 70px;
      height: 37px;
      font-size: 28px;
      font-family: MicrosoftYaHei;
      color: #d6f1fa;
      line-height: 37px;
      margin: 0 20px 0 22px;
    }
  }

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

    .value {
      height: inherit;
      width: 0px;
      background: linear-gradient(270deg, #38cafb 0%, #e9d726 100%);
      border-radius: 10px;
      transition: width 0.5s linear 0s;
    }

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

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

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