<template>
  <!-- formItems.attrs为假的时候会返空-->
  <LabelBox
    :label="formItems.attrs?.label"
    :need-star="formItems.attrs?.needStar"
    :width="formItems.attrs?.width"
  >
    <div class="select-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="(val)=> handleChange(val,0)"
      >
        <el-option
          v-for="item in formItems.options1"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="value[1]"
        size="mini"
        style="margin-left:5px;"
        :placeholder="formItems.attrs2?.placeholder || '请选择'"
        :clearable="formItems.clearable || true"
        :filterable="formItems.attrs2?.filterable || true"
        v-bind="formItems.attrs2"
        @change="(val)=> handleChange(val,1)"
      >
        <el-option
          v-for="item in formItems.options2"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
  </LabelBox>
</template>

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

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

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

::v-deep.el-select .el-input__icon {
  height: 24px;
  line-height: 25px;
}

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

::v-deep.el-select .el-input__inner {
  height: 24px;
  line-height: 24px;
}
.select-select {
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
}
</style>

