<template>
  <div class="el-input-group">
    <div v-if="$slots.prepend" class="el-input-group__prepend">
      <slot name="prepend" />
    </div>
    <div class="el-input-group__content" :class="{ 'left-angle' : !!$slots.prepend, 'right-angle' : !!$slots.append }">
      <el-select
        v-if="type == 'el-select'"
        v-bind="$attrs"
        :value="value"
        @change="handleValueChange"
      >
        <el-option v-for="(option, i) in options" :key="`${option.value}_${i}`" v-bind="option" />
      </el-select>
      <component :is="type" v-else v-bind="$attrs" :options="options" :value="value" @change="handleValueChange" @input="handleValueChange" />
    </div>
    <div v-if="$slots.append" class="el-input-group__append">
      <slot name="append" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'FormItemWrap',
  props: {
    type: {
      type: [Object, String],
      default: null
    },
    options: {
      type: Array,
      default: () => ([])
    },
    value: {
      type: [Object, String, Number],
      default: null
    }
  },
  methods: {
    /**
     * 监听值变化
     * @param value 当前变化的值
     */
    handleValueChange(value) {
      this.$emit('input', value)
    }
  }
}
</script>

<style lang="scss">
.el-input-group__content {
  display: table-cell;
  &.left-angle .el-input__inner{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  &.right-angle .el-input__inner {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
</style>
