<template>
  <section class="custom_number_select_" style="">
    <el-input-number
      v-model="data.num"
      :precision="_numberSet.precision"
      :step="_numberSet.step"
      :min="_numberSet.min"
      :controls-position="_numberSet.controlsPosition"
      @change="handleChange"
    >
    </el-input-number>
    <el-select v-model="data.value1" class="_center" @change="handleChange">
      <el-option
        v-for="item in props.options1"
        :key="'custom_' + Date.now() + item[props.prop.value]"
        :label="item[props.prop.label]"
        :value="item[props.prop.value]"
      />
    </el-select>
    <el-select v-model="data.value2" @change="handleChange">
      <el-option
        v-for="item in props.options2"
        :key="'custom_' + Date.now() + item[props.prop.value]"
        :label="item[props.prop.label]"
        :value="item[props.prop.value]"
      />
    </el-select>
  </section>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const emit = defineEmits(['update:value']);
const props = defineProps({
  value: {
    type: Object,
    default: () => {
      return {
        num: 1,
        value1: '1',
        value2: '1',
      };
    },
  },
  options1: {
    type: Array,
    default: () => [
      {
        value: '1',
        label: 'value1',
      },
      {
        value: '2',
        label: 'value2',
      },
      {
        value: '3',
        label: 'value3',
      },
    ],
  },
  options2: {
    type: Array,
    default: () => [
      {
        value: '1',
        label: '_value1',
      },
      {
        value: '2',
        label: '_value2',
      },
      {
        value: '3',
        label: '_value3',
      },
    ],
  },
  set: {
    type: Object,
    default: () => {
      return {};
    },
  },
  numberSet: {
    type: Object,
    default: () => {
      return {};
    },
  },
  prop: {
    type: Object,
    default: () => {
      return { label: 'label', value: 'value' };
    },
  },
});
const _numberSet = ref({
  precision: 2,
  step: 1,
  min: 1,
  controlsPosition: 'right',
});
const data = ref({
  num: 1,
  value1: '1',
  value2: '1',
});
watchEffect(() => {
  data.value = Object.assign(data.value, props.value);
  _numberSet.value = Object.assign(_numberSet.value, props.numberSet);
  if (data.value.num === null) {
    data.value.num = _numberSet.value.min;
  }
});
function handleChange() {
  emit('update:value', data.value);
}
</script>

<style lang="scss" scoped>
.custom_number_select_ {
  display: grid;
  grid-template-columns: 56% 22% 22%;
  ::v-deep() {
    .el-input-number {
      width: 100%;
      .el-input__wrapper {
        border-radius: 4px 0 0 4px;
      }
    }
    .el-select__wrapper {
      border-radius: 0 4px 4px 0 !important;
      border-left: none;
    }
    ._center {
      .el-select__wrapper {
        border-radius: 0 !important;
      }
    }
  }
}
</style>
