<template>
  <div id="item-info" v-if="params.wp!==undefined">
    <div class="label">
      <div :style="{ backgroundImage: 'url(' +getImageUrl(windIcon)+')' }" class="wind-icon"></div>
      <span>{{ params.wp.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 }">
      {{ params.wp.value }} {{ params.wp.unit }}
    </div>
  </div>
</template>

<script setup>
const params = defineProps({
  wp: Object
});

const windIcon = ref();
const length = ref(null);
const value = ref(null);
const point = ref(null);
const isWaring = ref();
// watch(() => params.wp.value, () => {
//   setValue();
// });
onMounted(() => {
  if (params.wp !== undefined) {
    setValue();
    windIcon.value = params.wp.icon
  }
})
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(params.wp.name=='氧气'){
    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%)";
    }
    isWaring.value = params.wp.value < params.wp.point;
  }else {
    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%)";
    }
    isWaring.value = params.wp.value >= params.wp.point;
  }

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

</script>

<style lang="scss" scoped>
#item-info {
  display: flex;
  align-items: center;
  width: 790px;
  padding: 5px 14px;
  margin-bottom: 25px;
  margin-left: 21px;

  &:hover {
    width: 790px;
    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: #fff;
      border-radius: 4px;
      box-shadow: 0 0 10px #fff;
      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>
