<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-form-item label="宽度" label-position="left" label-width="60px">
      <input-number
        placeholder="请输入"
        v-model="width"
        controls-position="right"
        style="width: 100%"
        :min="widthMin"
        :max="resolvedWidthMax"
      />
    </el-form-item>
    <el-form-item v-if="!hideRadius" label="圆角" label-position="left" label-width="60px">
      <el-switch v-model="radius" />
    </el-form-item>

    <el-form-item v-if="hasImage" label="图片" label-position="left" label-width="60px">
      <ImageSelect v-model="image" />
    </el-form-item>

    <el-form-item v-if="hasDash" label="虚线宽度" label-position="left" label-width="60px">
      <input-number
        placeholder="请输入"
        v-model="dashWidth"
        controls-position="right"
        style="width: 100%"
        :min="0"
        :max="100"
      />
    </el-form-item>
    <el-form-item v-if="hasDash" label="虚线间隔" label-position="left" label-width="60px">
      <input-number
        placeholder="请输入"
        v-model="dashGap"
        controls-position="right"
        style="width: 100%"
        :min="0"
        :max="100"
      />
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useProjectStore } from '@/store/modules/project'

import ImageSelect from './ImageSelect.vue'

const props = defineProps<{
  hasImage?: boolean
  hasDash?: boolean
  hideRadius?: boolean
  widthMin?: number
  widthMax?: number
  useWidgetHalfMinAsWidthMax?: boolean
}>()

const projectStore = useProjectStore()

const modelValue = defineModel<{
  color: string
  width: number
  radius?: boolean
  image?: string
  // alpha?: number
  dashWidth?: number
  dashGap?: 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 resolvedWidthMax = computed(() => {
  if (props.useWidgetHalfMinAsWidthMax) {
    const width = Number(projectStore.activeWidget?.props?.width ?? 0)
    const height = Number(projectStore.activeWidget?.props?.height ?? 0)

    return Math.max(0, Math.floor(Math.min(width, height) / 2))
  }

  return props.widthMax
})

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

const image = computed({
  get() {
    return modelValue.value?.image
  },
  set(val: string) {
    if (modelValue.value) {
      modelValue.value.image = val ?? ''
    }
  }
})

// 虚线宽度
const dashWidth = computed({
  get() {
    return modelValue.value?.dashWidth
  },
  set(val: number) {
    if (modelValue.value) {
      modelValue.value.dashWidth = val
    }
  }
})

// 虚线间隔
const dashGap = computed({
  get() {
    return modelValue.value?.dashGap
  },
  set(val: number) {
    if (modelValue.value) {
      modelValue.value.dashGap = val
    }
  }
})
</script>

<style scoped></style>
