<template>
  <el-form-item label="图片遮罩" label-position="left" label-width="60px">
    <ColorPicker
      use-type="pure"
      picker-type="chrome"
      format="hex8"
      v-model:pureColor="imageColor"
    />
    <span class="text-text-active">{{ imageColor }}</span>
  </el-form-item>
  <el-form-item label="透明度" label-position="left" label-width="60px">
    <div class="w-full flex gap-20px items-center">
      <el-slider v-model="imageAlpha" :max="255" :min="0" style="flex: 1"></el-slider>
      <span class="text-text-active inline w-30px cursor-pointer">
        {{ imageAlpha }}
      </span>
    </div>
  </el-form-item>
</template>

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

const modelValue = defineModel<{
  recolor: string
  alpha: number
}>('modelValue')

// 图像颜色
const imageColor = computed({
  get() {
    return modelValue.value?.recolor || '#ffffff00'
  },
  set(val: string) {
    if (modelValue.value) {
      modelValue.value.recolor = val
    }
  }
})
// 图像透明度
const imageAlpha = computed({
  get() {
    return modelValue.value?.alpha
  },
  set(val: number) {
    if (modelValue.value) {
      modelValue.value.alpha = val
    }
  }
})
</script>
