<template>
  <!--label-->
  <span class="label" v-if="label&&labelOption.length==0"
        :style="{'width':labelWidth,'height':height,'line-height':type=='textarea'?'27px':height}"><slot></slot></span>

  <!--带下拉框的label-->
  <el-dropdown v-else-if="labelOption.length>0" class="label"
               @command="optionClick"
               :style="{'width':labelWidth,'height':height,'line-height':height}">
      <span class="el-dropdown-link" v-if="labelOption[value]!=undefined" :style="{'width':labelWidth,'height':height,'line-height':height}">
        {{labelOption[value].value?labelOption[value].label:labelOption[value]}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="(item,index) in labelOption" :key="index" :command="index">{{item.value?item.label:item}}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
    export default {
        name: "index",
        props:{
            value:{
                type:Number,
                default:0
            },
            label:{
                type:String,
                default:''
            },
            labelOption:{
                type:Array,
                default(){
                    return[]
                }
            },
            //标签宽度
            labelWidth: {
                type: String,
                default: "100px"
            },
            //高度
            height: {
                type: String,
                default: '36px'
            },
            //输入框类型
            type: {
                type: String,
                default: 'text'
            },

        },
        methods:{
            optionClick(command){
                this.$emit('input',command)
            }
        }
    }
</script>

<style scoped lang="scss">

  .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;
      }
    }
  }

  .el-dropdown {
    color: #2c3e50;
  }

  .el-dropdown-link {
    display: inline-block;
    font-size: 14px;
    text-align: right;
    padding-right: 12px;
    box-sizing: border-box;
    vertical-align: top;
  }
</style>
