<template>
  <div class="item-layer">
    <template>
      <div class="item">
        <span>{{current.label}}</span>
        <span>
          <!-- <input type="text" v-model.lazy="inputText" @blur="inputText = current.value"> -->
          {{current.value}}{{current.unit || 'm'}}
        </span>
      </div>
      <Range :isGradient='current.gradient' :min="current.min" :max="current.max" v-model="current.value" />
      <div class="minmax">
        <span class="title">{{current.min}}{{current.unit}}<span class="ui-remark" v-if="current.tip"> （不显示）</span></span>
        <span class="title">{{current.max}}{{current.unit}}</span>
      </div>
    </template>
  </div>
</template>

<script>
import Range from '../range'

export default {
  props: ['value'],
  data() {
    return {
      inputText: this.value.value,
      mobile: this.$config.isMobile,
      current: {...this.value}
    }
  },
  watch: {
    inputText() {
      if (parseFloat(this.inputText)) {
        this.current.value = parseFloat(this.inputText)
      }
    },
    'current.value': function(n, o) {
      if (!(this.value.value === this.current.value)) {
        this.$emit('input', this.current)
      }
    },
    value() {
      this.current = {...this.value}
      this.inputText = this.current.value
    }
  },
  components: {
    Range
  }
}
</script>

<style lang="less" scoped>
.item {
  display: flex;
  justify-content: space-between;
  padding-bottom: 4px;

  >span {
    font-size: 14px;
  }

  >span:last-child {
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    >input {
      width: 40px;
      height: 24px;
      padding: 4px 0;
      text-align: center;
      color: #fff;
      letter-spacing: 0;
      outline: none;
      border: 1px solid #737373;
      background-color: #000;
      border-radius: 2px;
      margin-right: 4px;
    }
  }
}

.minmax{
  display: flex;
  justify-content: space-between;
  padding-bottom: 4px;
  .title{
    font-size: 12px;
    .ui-remark{
      display: inline-block;
    }
  }
}
</style>
