<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="12" v-if="showWH">
        <el-form-item label="" label-position="left" label-width="0px">
          <input-number
            v-model="width"
            controls-position="right"
            style="width: 100%"
            :min="-10000"
            :max="10000"
          >
            <template #prefix>
              <span>W</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="showWH">
        <el-form-item label="" label-position="left" label-width="0px">
          <input-number
            v-model="height"
            controls-position="right"
            style="width: 100%"
            :min="-10000"
            :max="10000"
          >
            <template #prefix>
              <span>H</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="translateX"
            controls-position="right"
            style="width: 100%"
            :min="-10000"
            :max="10000"
          >
            <template #prefix>
              <span>translateX</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="translateY"
            controls-position="right"
            style="width: 100%"
            :min="-10000"
            :max="10000"
          >
            <template #prefix>
              <span>translateY</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="originX"
            controls-position="right"
            style="width: 100%"
            :min="-10000"
            :max="10000"
          >
            <template #prefix>
              <span>originX</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="originY"
            controls-position="right"
            style="width: 100%"
            :min="-10000"
            :max="10000"
          >
            <template #prefix>
              <span>originY</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="rotate"
            controls-position="right"
            style="width: 100%"
            :min="-3600"
            :max="3600"
          >
            <template #prefix>
              <span>rotate</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="scale"
            controls-position="right"
            style="width: 100%"
            :min="0"
            :max="10000"
          >
            <template #prefix>
              <span>scale</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

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

withDefaults(
  defineProps<{
    showWH?: boolean
  }>(),
  {
    showWH: false
  }
)

const modelValue = defineModel<{
  width: number
  height: number
  translateX: number
  translateY: number
  originX: number
  originY: number
  rotate: number
  scale: number
}>('modelValue')

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

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

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

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

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

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

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

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

<style scoped></style>
