<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="12">
        <el-form-item label="" label-position="left" label-width="0px">
          <input-number
            v-model="top"
            controls-position="right"
            style="width: 100%"
            :min="0"
            :max="200"
          >
            <template #prefix>
              <span>上</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="" label-position="left" label-width="0px">
          <input-number
            v-model="right"
            controls-position="right"
            style="width: 100%"
            :min="0"
            :max="200"
          >
            <template #prefix>
              <span>右</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="" label-position="left" label-width="0px">
          <input-number
            v-model="bottom"
            controls-position="right"
            style="width: 100%"
            :min="0"
            :max="200"
          >
            <template #prefix>
              <span>下</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="" label-position="left" label-width="0px">
          <input-number
            v-model="left"
            controls-position="right"
            style="width: 100%"
            :min="0"
            :max="200"
          >
            <template #prefix>
              <span>左</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const modelValue = defineModel<{
  left: number
  top: number
  right: number
  bottom: number
}>('modelValue')

// top
const top = computed({
  get: () => modelValue.value?.top,
  set: (val: number) => {
    if (modelValue.value) {
      modelValue.value.top = val
    }
  }
})

// right
const right = computed({
  get: () => modelValue.value?.right,
  set: (val: number) => {
    if (modelValue.value) {
      modelValue.value.right = val
    }
  }
})

// bottom
const bottom = computed({
  get: () => modelValue.value?.bottom,
  set: (val: number) => {
    if (modelValue.value) {
      modelValue.value.bottom = val
    }
  }
})

// left
const left = computed({
  get: () => modelValue.value?.left,
  set: (val: number) => {
    if (modelValue.value) {
      modelValue.value.left = val
    }
  }
})
</script>

<style scoped></style>
