<template>
  <div>
    <el-form-item label="背景颜色" label-position="left" label-width="70px">
      <ColorModal
        v-model:pureColor="pureColor"
        v-model:gradientColor="gradientColor"
        :useType="useType"
        :width="width"
        :height="height"
      />
      <span class="text-text-active">{{
        typeof modelValue?.color === 'object' ? '渐变颜色' : modelValue?.color
      }}</span>
    </el-form-item>
    <el-form-item v-if="!onlyColor" label="背景图片" label-position="left" label-width="70px">
      <ImageSelect v-model="image" />
    </el-form-item>
    <el-form-item v-if="!onlyColor" label="图片透明度" label-position="left" label-width="70px">
      <div class="w-full flex gap-20px items-center">
        <el-slider
          v-model="imageAlpha"
          :disabled="!modelValue?.image"
          :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>
    <el-form-item v-if="!onlyColor" label="图片遮罩" label-position="left" label-width="70px">
      <ColorPicker
        use-type="pure"
        picker-type="chrome"
        format="hex8"
        v-model:pureColor="imageColor"
        :disabled="!modelValue?.image"
      />
      <span class="text-text-active">{{ imageColor }}</span>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ColorPicker, ColorModal } from '@/components'
import ImageSelect from './ImageSelect.vue'
import { useProjectStore } from '@/store/modules/project'

import type { GradientColor } from '@/lvgl-widgets/type'

withDefaults(
  defineProps<{
    useType?: 'pure' | 'gradient' | 'both'
    onlyColor?: boolean
  }>(),
  {
    useType: 'both'
  }
)

const modelValue = defineModel<{
  color: string | GradientColor
  image?: {
    imgId: string
    recolor: string
    alpha: number
  }
}>('modelValue')

const projectStore = useProjectStore()

const width = computed(() => {
  if (projectStore.activeWidget?.type === 'page') return projectStore.activeScreen?.width
  return projectStore.activeWidget?.props?.width
})
const height = computed(() => {
  if (projectStore.activeWidget?.type === 'page') return projectStore.activeScreen?.height
  return projectStore.activeWidget?.props?.height
})

// 纯色
const pureColor = computed({
  get() {
    return typeof modelValue.value?.color === 'string' ? modelValue.value?.color : undefined
  },
  set(val: string) {
    if (modelValue.value) {
      modelValue.value.color = val
    }
  }
})
// 渐变
const gradientColor = computed({
  get() {
    return typeof modelValue.value?.color === 'object' ? modelValue.value?.color : undefined
  },
  set(val: GradientColor) {
    if (modelValue.value?.color) {
      modelValue.value.color = val
    }
  }
})
// 图像颜色
const imageColor = computed({
  get() {
    return modelValue.value?.image?.recolor || '#ffffff00'
  },
  set(val: string) {
    if (modelValue.value?.image) {
      modelValue.value.image.recolor = val
    }
  }
})
// 图像透明度
const imageAlpha = computed({
  get() {
    return modelValue.value?.image?.alpha
  },
  set(val: number) {
    if (modelValue.value?.image) {
      modelValue.value.image.alpha = val
    }
  }
})

const image = computed({
  get() {
    return modelValue.value?.image?.imgId
  },
  set(val: string) {
    if (modelValue.value) {
      if (!modelValue.value?.image) {
        modelValue.value.image = {
          imgId: '',
          recolor: '',
          alpha: 255
        }
      }
      modelValue.value.image.imgId = val
      if (!imageColor.value) {
        imageColor.value = '#ffffff00'
      }
    }
  }
})
</script>
