<template>
  <div>
    <el-form-item label="颜色" label-position="left" label-width="60px">
      <ColorPicker v-model:pureColor="color" format="hex8" picker-type="chrome" use-type="pure" />
      <span class="text-text-active">{{ modelValue?.color }}</span>
    </el-form-item>
    <el-row :gutter="12">
      <el-col :span="12">
        <el-form-item label-position="left" label-width="0px">
          <input-number
            placeholder="请输入"
            v-model="x"
            controls-position="right"
            style="width: 100%"
            :min="-100"
            :max="100"
          >
            <template #prefix>
              <span>X</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label-position="left" label-width="0px">
          <input-number
            placeholder="请输入"
            v-model="y"
            controls-position="right"
            style="width: 100%"
            :min="-100"
            :max="100"
          >
            <template #prefix>
              <span>Y</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label-position="left" label-width="0px">
          <input-number
            placeholder="请输入"
            v-model="spread"
            controls-position="right"
            style="width: 100%"
            :min="0"
            :max="100"
          >
            <template #prefix>
              <span>扩散</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label-position="left" label-width="0px">
          <input-number
            placeholder="请输入"
            v-model="width"
            controls-position="right"
            style="width: 100%"
            :min="0"
            :max="100"
          >
            <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<{
  // 阴影颜色 带透明度
  color: string
  // 起始坐标x
  offsetX: number
  // 起始坐标y
  offsetY: number
  // 扩散
  spread: number
  // 模糊宽度
  width: number
}>('modelValue')

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

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

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

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

// 模糊宽度
const width = computed({
  get: () => modelValue.value?.width,
  set: (val: number) => {
    if (modelValue.value) {
      modelValue.value.width = val
    }
  }
})
</script>

<style scoped></style>
