<template>
  <LabelBox
    :label="formItems.attrs?.label"
    :need-star="formItems.attrs?.needStar"
    :width="formItems.attrs?.width"
  >
    <div class="input-select">
      <el-select
        v-model="value[0]"
        size="mini"
        :placeholder="formItems.attrs?.placeholder || '请选择'"
        :clearable="formItems.clearable || true"
        :filterable="formItems.attrs?.filterable || true"
        v-bind="formItems.attrs"
        @change="handleChange1"
      >
        <el-option
          v-for="item in formItems.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="value[1]"
        size="mini"
        :placeholder="formItems.attrs2?.placeholder || '请填写'"
        v-bind="formItems.attrs2"
        @input="handleChange"
      >
        <!-- 前文字 -->
        <template
          v-if="formItems.attrs2?.prepend"
          slot="prepend"
        >
          {{
            formItems.attrs2.prepend
          }}
        </template>
        <!-- 后文字 -->
        <template
          v-if="formItems.attrs2?.append"
          slot="append"
        >
          {{
            formItems.attrs2.append
          }}
        </template>
      </el-input>
    </div>
  </LabelBox>
</template>

<script>
import LabelBox from '../labelBox/index.vue';

export default {
  components: {
    LabelBox,
  },
  props: {
    formItems: {
      type: Object,
      default: () => {},
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    handleChange1(val) {
      this.value[0] = val;
      this.$emit('input', this.value);
      this.$emit('outOperation', val, 0);
    },
    handleChange(val) {
      this.value[1] = val;
      this.$emit('input', this.value);
      this.$emit('outOperation', val, 1);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep.el-select {
  width: 100%;
  height: 32px;
  line-height: 32px;
}

::v-deep.input-box {
  height: 32px;
}

::v-deep.el-select .el-input__icon {
  height: 32px;
  line-height: 33px;
}

::v-deep.el-select .el-input-group__prepend {
  box-sizing: border-box;
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  border: none;
}

::v-deep.el-select .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.input-select {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}
::v-deep.el-input {
  height: 32px;
  line-height: 32px;
}

::v-deep.input-box {
  height: 32px;
}

::v-deep.el-input .el-input__icon {
  height: 32px;
  line-height: 33px;
  margin-left: -6px;
}

::v-deep.el-input .el-input-group__prepend {
  box-sizing: border-box;
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
  border: none;
}

::v-deep.el-input .el-input__inner {
  height: 32px;
  line-height: 32px;
}

::v-deep.el-input--prefix .el-input__inner {
  padding-left: 19px;
}
</style>

