<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="24">
        <el-form-item label-width="0px">
          <ColorPicker v-model:pureColor="color" format="hex8" picker-type="chrome" use-type="pure">
          </ColorPicker>
          <span class="text-text-active">{{ modelValue?.color }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="" label-position="left" label-width="0px">
          <input-number
            v-model="width"
            controls-position="right"
            style="width: 100%"
            :min="0"
            :max="1000"
          >
            <template #prefix>
              <span>W</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="pad"
            controls-position="right"
            style="width: 100%"
            :min="0"
            :max="1000"
          >
            <template #prefix>
              <span>Pad</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ColorPicker } from '@/components'

const modelValue = defineModel<{
  color: string
  width: number
  pad: number
}>('modelValue')

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

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

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

<style scoped></style>
