<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><span v-if="required" style="color: #FF7457;">*&nbsp;</span>{{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-select :value="value"
                 v-if="!isGroup"
                 @input="onInput"
                 :disabled="disabled"
                 :multiple="multiple"
                 :clearable="clearable"
                 :style="{width:'100%'}"
                 :filterable="filterable"
                 :loading="loading"
                 :remote="remote"
                  :remote-method="remoteMethod"
                 :size="size"
                 @change="change"
                 popper-class="alSelect"
                 :placeholder="placeholder">
        <el-option
          v-for="(item,index) in options"
          :key="index"
          :disabled="item.disabled"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <!--分组-->
      <el-select :value="value"
                 v-else
                 @input="onInput"
                 :disabled="disabled"
                 :multiple="multiple"
                 :clearable="clearable"
                 :style="{width:'100%'}"
                 :filterable="filterable"
                 :loading="loading"
                 :remote="remote"
                 :remote-method="remoteMethod"
                 size="medium"
                 popper-class="alSelect"
                 @change="change"
                 :placeholder="placeholder">
        <el-option-group
          v-for="group in options"
          :key="group.label"
          :label="group.label">
          <el-option
            v-for="item in group.options"
            :disabled="item.disabled"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-option-group>
      </el-select>
    </al-form-item>
  </div>
</template>


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

    export default {
        name: "index",
        data() {
            return {}
        },
        props: {
            size:{
                type:String,
                default:'medium'
            },
            //labelOption 激活值
            labelActiveIndex:{
                type:Number,
                default:0
            },
            //label下拉框的选项
            labelOption: {
                type: Array,
                default() {
                    return []
                }
            },
            remoteMethod:{
                type:Function,
                default(){
                    return ()=>{}
                }
            },
            loading:{
                type:Boolean,
                default:false
            },
            //是否必填
            required: {
                type: Boolean,
                default: false
            },
            remote:{
                type:Boolean,
                default:false
            },
            tip:{
                type:String,
                default:''
            },
            options:{
                type:Array,
                default(){
                    return[]
                }
            },
            placeholder:{
                type:String,
                default:'请选择'
            },
            prop: {
                type: String,
                default: ''
            },
            //输入值
            value: {
                default(){
                    return ''
                }
            },
            //是否分组
            isGroup: {
                type: Boolean,
                default: false
            },
            //可搜索
            filterable: {
                type: Boolean,
                default: false
            },
            //可清空
            clearable: {
                type: Boolean,
                default: false
            },
            //多选
            multiple: {
                type: Boolean,
                default: false
            },
            //标签
            label: {
                type: String,
                default: ""
            },
            //宽度
            width: {
                type: String,
                default: '100%'
            },
            //标签宽度
            labelWidth: {
                type: String,
                default: "100px"
            },
            //组件高度
            height: {
                type: String,
                default: '36px'
            },
            //组件禁用
            disabled: {
                type: Boolean,
                default: false
            },
        },
        methods: {
            onInput(newValue) {
                this.$emit("input", newValue)
            },
            change(v){
                this.$emit('change',v)
            },
            labelChange(v){
                this.$emit('labelChange',v)
            },
        },
        components:{
            AlFormItem
        }
    }
</script>

<style scoped lang="scss">
  /deep/ .el-input--mini .el-input__inner{
    height: 24px;
    line-height: 24px;
  }
  .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>
<style lang="scss">
  .alSelect {
    font-size: 14px!important;
    /deep/{
      .el-select-dropdown__item{
        span{
          font-size: 14px!important;
        }
      }
    }
  }
</style>
