<template>
  <div>
    <el-form-item v-if="!onlyRadius" label="颜色" label-position="left" label-width="60px">
      <!-- 支持变量 -->
      <VariableBindWrapper v-model="color" :variable-config="{ type: 'int32_t' }">
        <div class="flex items-center">
          <ColorPicker
            v-model:pureColor="color"
            format="hex8"
            picker-type="chrome"
            use-type="pure"
          />
          <span class="text-text-active">{{ modelValue?.color }}</span>
        </div>
      </VariableBindWrapper>
    </el-form-item>
    <el-row v-if="!onlyRadius" :gutter="12">
      <el-col :span="hideRadius ? 24 : 12">
        <el-form-item label-position="left" label-width="0px">
          <!-- 支持变量 -->
          <VariableBindWrapper v-model="width" :variable-config="{ type: 'uint32_t' }">
            <input-number
              v-model="width"
              controls-position="right"
              style="width: 100%"
              :min="0"
              :max="max"
            >
              <template #prefix>
                <span>宽度</span>
              </template>
            </input-number>
          </VariableBindWrapper>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="!hideRadius">
        <el-form-item label-position="left" label-width="0px">
          <!-- 支持变量 -->
          <VariableBindWrapper v-model="radius" :variable-config="{ type: 'uint32_t' }">
            <input-number
              v-model="radius"
              controls-position="right"
              style="width: 100%"
              :min="0"
              :max="max"
            >
              <template #prefix>
                <span>圆角</span>
              </template>
            </input-number>
          </VariableBindWrapper>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item v-if="onlyRadius" label-position="left" label-width="0px">
      <!-- 支持变量 -->
      <VariableBindWrapper v-model="radius" :variable-config="{ type: 'uint32_t' }">
        <input-number
          v-model="radius"
          controls-position="right"
          style="width: 100%"
          :min="0"
          :max="radiusMax"
        >
          <template #prefix>
            <span>圆角</span>
          </template>
        </input-number>
      </VariableBindWrapper>
    </el-form-item>

    <el-form-item label-position="left" label-width="0px" v-if="!onlyRadius">
      <!-- 支持变量 -->
      <VariableBindWrapper
        v-model="radius"
        :variable-config="{
          type: 'enum',
          enumMap: {
            0: 'none',
            1: 'bottom',
            2: 'top',
            3: 'left',
            4: 'right',
            15: 'all'
          }
        }"
      >
        <div class="flex-1 flex items-center justify-between px-4px mt-8px">
          <BsBorderOuter
            class="cursor-pointer"
            :class="{ 'color-accent-blue': side?.includes('all') }"
            @click="handleBorder('all')"
          />
          <BsBorderTop
            class="cursor-pointer"
            :class="{ 'color-accent-blue': side?.includes('top') }"
            @click="handleBorder('top')"
          />
          <BsBorderRight
            class="cursor-pointer"
            :class="{ 'color-accent-blue': side?.includes('right') }"
            @click="handleBorder('right')"
          />
          <BsBorderBottom
            class="cursor-pointer"
            :class="{ 'color-accent-blue': side?.includes('bottom') }"
            @click="handleBorder('bottom')"
          />
          <BsBorderLeft
            class="cursor-pointer"
            :class="{ 'color-accent-blue': side?.includes('left') }"
            @click="handleBorder('left')"
          />
        </div>
      </VariableBindWrapper>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  BsBorderBottom,
  BsBorderTop,
  BsBorderLeft,
  BsBorderRight,
  BsBorderOuter
} from 'vue-icons-plus/bs'
import { useProjectStore } from '@/store/modules/project'
import VariableBindWrapper from './VariableBindWrapper.vue'

defineProps<{
  hideRadius?: boolean
  onlyRadius?: boolean
}>()

const modelValue = defineModel<{
  color: string
  width: number
  radius: number
  side: string[]
}>('modelValue')

const projectStore = useProjectStore()

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

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

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

// 边框
const side = computed({
  get: () => modelValue.value?.side,
  set: (val: string[]) => {
    if (modelValue.value) {
      modelValue.value.side = val
    }
  }
})

// 最大值为控件宽高最小值的一半
const max = computed(() => {
  const activeWidget = projectStore.activeWidget
  if (!activeWidget) return
  const width = activeWidget.props.width || 0
  const height = activeWidget.props.height || 0

  if (!width || !height) {
    return
  }
  return Math.min(width, height) / 2
})

// 最大值为控件宽高最小值的一半
const radiusMax = computed(() => {
  const activeWidget = projectStore.activeWidget
  if (!activeWidget) return
  const width = activeWidget.props.width || 0
  const height = activeWidget.props.height || 0

  if (!width || !height) {
    return
  }
  return Math.min(width, height)
})

const handleBorder = (val: string) => {
  if (side.value?.includes(val)) {
    side.value = side.value.filter((item) => item !== val)
  } else {
    side.value?.push(val)
  }
}
</script>

<style scoped></style>
