<template>
  <div :style="{'width':width,'height':height,'line-height':height}" style="font-size: 0;">
<!--    <span class="label" v-if="label" :style="{'width':labelWidth,'line-height':height}">{{label}}</span>-->
    <al-label
      :label="label"
      :labelWidth="labelWidth"
      :labelOption="labelOption"
      :value="labelActiveIndex"
      @input="labelChange"
      :height="height">{{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-input-number
        size="medium"
        :value="value"
        @input="onInput"
        :style="{width:'100%','line-height':height}"
        :disabled="disabled"
        :step="step"
        :max="max"
        :min="min"
      ></el-input-number>
    </al-form-item>
  </div>
</template>

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

    export default {
        name: "index",
        data() {
            return {}
        },
        methods: {
            onInput(newValue) {
                this.$emit("input", newValue)
            },
            labelChange(v){
                this.$emit('labelChange',v)
            },
        },
        props: {
            //labelOption 激活值
            labelActiveIndex:{
                type:Number,
                default:0
            },
            //label下拉框的选项
            labelOption: {
                type: Array,
                default() {
                    return []
                }
            },
            prop: {
                type: String,
                default: ''
            },
            step:{
                type:Number,
                default:1
            },
            max:{
                type:Number,
                default:Infinity
            },
            min:{
                type:Number,
                default:-Infinity
            },
            //输入值
            value: {
                type: Number,
                default: 0
            },
            //标签
            label: {
                type: String,
                default: ""
            },
            //宽度
            width: {
                type: String,
                default: '200px'
            },
            //标签宽度
            labelWidth: {
                type: String,
                default: "100px"
            },
            //组件高度
            height: {
                type: String,
                default: '36px'
            },
            //组件禁用
            disabled: {
                type: Boolean,
                default: false
            }
        },
        components: {
            AlFormItem
        }
    }
</script>

<style scoped lang="scss">
  /deep/{
    .el-input-number__decrease,.el-input-number__increase{
      line-height: 34px;
    }
  }
  .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>
