<template>
  <div v-if="!allInOne">
    <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="left"
            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="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 v-if="hasGap" :span="12">
        <el-form-item label-width="0px">
          <input-number
            v-model="row"
            controls-position="right"
            style="width: 100%"
            :min="0"
            :max="200"
          >
            <template #prefix>
              <span>行</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
      <el-col v-if="hasGap" :span="12">
        <el-form-item label-width="0px">
          <input-number
            v-model="column"
            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>
  <div v-else>
    <input-number v-model="all" controls-position="right" style="width: 100%" :min="0" :max="200">
      <template #prefix>
        <span>P</span>
      </template>
    </input-number>
  </div>
</template>

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

defineProps<{
  allInOne?: boolean
  hasGap?: boolean
}>()

const modelValue = defineModel<{
  left: number
  top: number
  right: number
  bottom: number
  row?: number
  column?: 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
    }
  }
})

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

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

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

<style scoped></style>
