<template>
  <div>
    <el-form-item v-if="!onlyRadius" 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 v-if="!onlyRadius" :gutter="12">
      <el-col :span="hideRadius ? 24 : 12">
        <el-form-item label-position="left" label-width="0px">
          <input-number v-model="width" controls-position="right" style="width: 100%" :min="0">
            <template #prefix>
              <span>宽度</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="!hideRadius">
        <el-form-item label-position="left" label-width="0px">
          <input-number v-model="radius" controls-position="right" style="width: 100%" :min="0">
            <template #prefix>
              <span>圆角</span>
            </template>
          </input-number>
        </el-form-item>
      </el-col>
    </el-row>

    <el-form-item v-if="onlyRadius" label-position="left" label-width="0px">
      <input-number v-model="radius" controls-position="right" style="width: 100%" :min="0">
        <template #prefix>
          <span>圆角</span>
        </template>
      </input-number>
    </el-form-item>

    <el-form-item label-position="left" label-width="0px" v-if="!onlyRadius">
      <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>
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  BsBorderBottom,
  BsBorderTop,
  BsBorderLeft,
  BsBorderRight,
  BsBorderOuter
} from 'vue-icons-plus/bs'

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

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

// 颜色
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 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>
