<template>
  <div class="sgy-range">
      <div class="my-mark" :style="`color:${colorStyle}`" v-if="alarmVal!='undefined'">
           <!-- 减去文本自身 宽度的一半，因为三角指示箭头是居中的 -->
          <span :style="`transform: translateX(${left(alarmVal) - 50 }px)`">报警触发值 {{this.alarmVal}} {{unit}}</span>
      </div>
      <div class="range">
          <p class="bg-range"></p>
          <p class="real-range" :style="`left:${left(min)}px;width:${normalWidth}px`"></p>
      </div>
       <div class="my-current-mark" :style="`color:${colorCurrentStyle}`" v-if="currentValue!='undefined'">
           <!-- 减去文本自身 宽度的一半，因为三角指示箭头是居中的 -->
            <span :style="`transform: translateX(${left(currentValue) - 38}px)`">当前值 {{this.currentValue}} {{unit}}</span>
        </div>
      <div class="normal-range" :style="`margin-left:${left(min)}px;width:${normalWidth}px`">
          <i>{{min}}{{unit}}</i>
          <i>正常范围</i>
          <i>{{max}}{{unit}}</i>
      </div>
  </div>
</template>

<script>
export default {
  components: {

  },

  mixins: [],

  props: {
    alarmVal: {
    },
    min: {},
    max: {},
    currentValue: {},
    unit: ""
  },

  data () {
    return {
      space: 50 // 左右空白50px;
    }
  },

  computed: {
    arr () {
      let arr = [this.alarmVal, this.min, this.max, this.currentValue]
      let newArr = []
      arr.forEach(el => {
        if (el != 'undefined') {
          newArr.push(el)
        }
      })
      return newArr.sort(function (a, b) {
        return a - b
      })
    },
    // 系数, 每一个px表的值
    pel () {
      return (this.arr[this.arr.length - 1] - this.arr[0]) / (620 - this.space * 2)
    },
    normalWidth () {
      return (this.max - this.min) / this.pel
    },
    myCurrentMarkWidth () {
      return this.$nextTick(() => {
        return document.querySelector('.my-current-mark span').scrollWidth
      })
    },
    myMarkWidth () {
      return this.$nextTick(() => {
        return document.querySelector('.my-mark span').scrollWidth
      })
    },
    colorStyle () {
      if (this.alarmVal > this.min && this.alarmVal < this.max) {
        return '#3BC6A1'
      } else {
        return '#F08378'
      }
    },
    colorCurrentStyle () {
      if (this.currentValue > this.min && this.currentValue < this.max) {
        return '#3BC6A1'
      } else {
        return '#F08378'
      }
    }
  },

  mounted () {

  },

  methods: {
    left (val) {
      return ((val - this.arr[0]) / this.pel) + this.space
    }

  }

}
</script>

<style scoped lang="less" >
.sgy-range {
    position: relative;
    .my-mark {
        color: #F08378 ;
        span {
            display: inline-block;
            text-align: center;
            &::after {
                content: '▼';
                display: block;
            }
        }
    }
    .my-current-mark {
       color: #F08378 ;
       position: absolute;
       top: 48px;
        span {
            display: inline-block;
            text-align: center;
            &::before {
                content: '▲';
                display: block;

            }
        }
    }
    .range {
        position: relative;
        .bg-range {
            position: absolute;
            top:0;
            width: 620px;
            height: 8px;
            background: #E5E5E5;
            border-radius: 6px;
        }
        .real-range {
            position: absolute;
            box-sizing: border-box;
            top:0;
            //left: 120px;
            //width: 280px;
            height: 8px;
            background: #3BC6A1;
            border-left: 2px solid #FFFFFF;
            border-right: 2px solid #FFFFFF;
        }
    }
    .normal-range {
        color: #3BC6A1;
        //margin-left: 115px;
        padding-top: 13px;
        width: 295px;
        display: flex;
        justify-content: space-between;
    }
}
</style>
