<template>

  <div :style="{'width':width,'height':height,'line-height':height}" style="font-size: 0;">
    <al-label
      :label="label"
      :labelWidth="labelWidth"
      :labelOption="labelOption"
      :value="labelActiveIndex"
      @input="labelChange"
      :height="height"><el-tooltip v-if="tip" effect="light" :content="tip" placement="top">
      <svg style="display: inline-block;vertical-align: -3px;" t="1570694628833" class="icon item" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg" p-id="2512" width="16" height="16">
        <path d="M512 127.9c51.9 0 102.2 10.1 149.5 30.2 45.7 19.3 86.8 47 122.1 82.3s63 76.4 82.3 122.1c20 47.3 30.2 97.6 30.2 149.5S886 614.2 865.9 661.5c-19.3 45.7-47 86.8-82.3 122.1s-76.4 63-122.1 82.3c-47.3 20-97.6 30.2-149.5 30.2S409.8 886 362.5 865.9c-45.7-19.3-86.8-47-122.1-82.3s-63-76.4-82.3-122.1c-20-47.3-30.2-97.6-30.2-149.5s10.1-102.2 30.2-149.5c19.3-45.7 47-86.8 82.3-122.1s76.4-63 122.1-82.3c47.3-20 97.6-30.2 149.5-30.2m0-64C264.5 63.9 63.9 264.5 63.9 512S264.5 960.1 512 960.1 960.1 759.5 960.1 512 759.5 63.9 512 63.9z"
              fill="" p-id="2513"></path>
        <path d="M480 736h64v64h-64zM476.9 686.3c-0.3-9.3-0.4-42.2-0.4-46.8 0-27.3 3.9-50.8 11.6-70.6 5.7-14.9 14.8-30 27.4-45.1 9.3-11.1 25.9-27.2 50-48.4 24-21.2 39.7-38.1 46.9-50.7s10.8-26.4 10.8-41.3c0-27-10.5-50.7-31.6-71.2-21.1-20.4-46.9-30.7-77.5-30.7-29.6 0-54.3 9.3-74.1 27.8-19.8 18.5-32.8 47.4-39 86.8l-71.4-8.5c6.4-52.7 25.5-93.1 57.3-121.1s73.7-42 125.9-42c55.3 0 99.4 15 132.3 45.1 32.9 30.1 49.4 66.5 49.4 109.2 0 24.7-5.8 47.4-17.4 68.3s-34.2 46.2-67.9 76c-22.6 20.1-37.4 34.8-44.4 44.4-6.9 9.5-12.1 20.4-15.4 32.8-3.3 12.3-5.3 58.4-5.8 86.2h-66.7v-0.2z"
              fill="" p-id="2514"></path>
      </svg>
    </el-tooltip>{{label}}</al-label>

    <al-form-item :class="{'autoWidth':label}" :prop="prop"
                  :style="{width:label||labelOption.length?'calc( 100% - '+labelWidth+')':'100%','height':height,'line-height':height}">

        <el-slider
          v-if="showSlider"
          :class="showTwoInput?'al-slider':''"
          :value="value"
          :min="min"
          :max="max"
          :disabled="disabled"
          :step="step"
          :show-input="showInput"
          :show-input-controls="showInputControls"
          :input-size="inputSize"
          :show-stops="showStops"
          :show-tooltip="showTooltip"
          :format-tooltip="formatTooltip"
          :range="range"
          :vertical="vertical"
          :height="height"
          :label="label"
          :debounce="debounce"
          :tooltip-class="tooltipClass"
          :marks="marks"
          @input="input"
          @change="change"
        >
        </el-slider>
      <el-input-number
        class="al-slider_two_input_left"
        v-model="minValue"
        v-if="showTwoInput"
        ref="input"
        @change="emitChange"
        :step="step"
        :controls="showInputControls"
        :min="min"
        :max="max"
        :debounce="debounce"
        :size="inputSize"></el-input-number>
      <div v-if="showTwoInput" class="al-slider_divider">～</div>
        <el-input-number
          v-model="maxValue"
          v-if="showTwoInput"
          class="al-slider_two_input_right"
          ref="input"
          @change="emitChange"
          :step="step"
          :controls="showInputControls"
          :min="min"
          :max="max"
          :debounce="debounce"
          :size="inputSize"></el-input-number>

    </al-form-item>
  </div>
</template>


<script>
    import AlFormItem from '../AlFormItem'

    export default {
        name: "index",
        data() {
            return {
                showSlider: true
            }
        },
        props: {
            //labelOption 激活值
            labelActiveIndex:{
                type:Number,
                default:0
            },
            //label下拉框的选项
            labelOption: {
                type: Array,
                default() {
                    return []
                }
            },
            tip:{
                type:String,
                default:''
            },
            placeholder:{
                type:String,
                default:'请选择'
            },
            prop: {
                type: String,
                default: ''
            },
            //标签
            label: {
                type: String,
                default: ""
            },
            //宽度
            width: {
                type: String,
                default: '200px'
            },
            //标签宽度
            labelWidth: {
                type: String,
                default: "100px"
            },
            min: {
                type: Number,
                default: 0
            },
            max: {
                type: Number,
                default: 100
            },
            step: {
                type: Number,
                default: 1
            },
            value: {
                type: [Number, Array],
                default: 0
            },
            showInput: {
                type: Boolean,
                default: false
            },
            //双向输入框
            showTwoInput:{
                type: Boolean,
                default: false
            },
            showInputControls: {
                type: Boolean,
                default: false
            },
            inputSize: {
                type: String,
                default: 'small'
            },
            showStops: {
                type: Boolean,
                default: false
            },
            showTooltip: {
                type: Boolean,
                default: true
            },
            formatTooltip: Function,
            disabled: {
                type: Boolean,
                default: false
            },
            range: {
                type: Boolean,
                default: false
            },
            vertical: {
                type: Boolean,
                default: false
            },
            height: {
                type: String
            },
            debounce: {
                type: Number,
                default: 300
            },
            tooltipClass: String,
            marks: Object,
        },
        methods: {
            emitChange(val) {
                this.showSlider = false
                setTimeout(()=>{
                    this.showSlider = true
                },10)
            },
            //滑动的时候触发
            input(v){
                this.$emit('input',v)
            },
            //值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）
            change(v){
                this.$emit('change',v)
            },
            labelChange(v){
                this.$emit('labelChange',v)
            },
        },
        computed:{
            minValue: {
                get(){
                    return this.value[0]
                },
                set(val){
                    if(!val){
                        val=this.min
                    }
                  this.value[0]= val
                }
            },
            maxValue: {
                get(){
                    return this.value[1]
                },
                set(val){
                    if(!val){
                        val=this.max
                    }
                    this.value[1]= val
                }
            }
        },
        components:{
            AlFormItem
        }
    }
</script>

<style scoped lang="scss">
  .al-slider{
    width: 50%;
    margin: 0 4% 0 0 ;
    float: left;
  }
  .al-slider_two_input_left{
    width: 19%;
    float: left;
    margin-top: 3px;
  }
  .al-slider_divider{
    float: left;
    width: 2%;
    height: 32px;
    line-height: 32px;
    text-align: center;
    margin: 0 1%;
  }
  .al-slider_two_input_right{
    width: 19%;
    float: left;
    margin-top: 3px;
  }
  .label {
    display: inline-block;
    font-size: 14px;
    text-align: right;
    padding-right: 12px;
    box-sizing: border-box;
    vertical-align: top;

    /deep/ {
      .el-icon--right {
        margin-left: 2px;
      }
    }
  }
</style>

