<template>
  <div class="flex-box">
    <el-input v-model="leftNum" @input="onInput"></el-input>
    <div class="line"></div>
    <el-input v-model="rightNum" @input="onInput"></el-input>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, defineEmits, watch } from 'vue'
import {
  ElInput
} from 'element-plus'

const props = defineProps({
  modelValue: {
    type: Array as () => string[],
    default: () => []
  }
})

const emits = defineEmits(['update:modelValue'])

const leftNum = ref('')
const rightNum = ref('')

watch(() => props.modelValue, () => {
  setDefaultValue()
}, { deep: true })

function setDefaultValue () {
  if (props.modelValue && props.modelValue.length) {
    leftNum.value = props.modelValue[0]
    if (props.modelValue.length > 1) {
      rightNum.value = props.modelValue[1]
    }
  }
}
setDefaultValue()

function onInput () {
  const data = [leftNum.value, rightNum.value]
  emits('update:modelValue', data)
}

</script>

<style lang="scss" scoped>
.line{
  width: 10px;
  height: 1px;
  background-color: #999;
  margin: 0 5px;
  flex-shrink: 0;
}
.flex-box{
  display: flex;
  align-items: center;
  width: 150px;
  .el-input{
    flex-shrink: 0;
    width: auto;
    ::v-deep(.el-input__inner){
      width: 65px !important;
      padding: 0 10px;
    }
  }
}
</style>
