<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">
        <template #trigger>
          <BiFontColor size="22px" :style="{ color }" />
        </template>
      </ColorPicker>
      <span class="text-text-active">{{ modelValue?.color }}</span>
    </el-form-item>
    <el-form-item label="大小" label-position="left" label-width="60px">
      <input-number
        v-model="size"
        controls-position="right"
        style="width: 100%"
        :min="1"
        :max="1000"
      />
    </el-form-item>
    <el-form-item label="样式" label-position="left" label-width="60px">
      <el-select v-model="family">
        <template #label="{ label }">
          <div :style="{ fontFamily: `'${label}'` }">{{ label }}</div>
        </template>
        <el-option
          v-for="item in fontOptions"
          :key="item.value"
          :value="item.value"
          :label="item.label"
        >
          <div :style="{ fontFamily: `'${item.label}'` }">
            {{ item.label }}
          </div>
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item v-if="!hideAlign" label="对齐" label-position="left" label-width="60px">
      <el-select-v2 v-model="align" :options="alignOptions" />
    </el-form-item>
    <el-form-item v-if="!hideDecoration" label="装饰" label-position="left" label-width="60px">
      <el-select-v2
        v-model="decoration"
        :options="[
          { label: 'None', value: 'none' },
          { label: 'Underline', value: 'underline' },
          { label: 'Strikethrough', value: 'line-through' },
          { label: 'Underline&Strikethrough', value: 'underline line-through' }
        ]"
      />
    </el-form-item>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ColorPicker } from '@/components'
import { BiFontColor } from 'vue-icons-plus/bi'
import { useProjectStore } from '@/store/modules/project'

defineProps<{
  hideAlign?: boolean
  hideDecoration?: boolean
}>()
const projectStore = useProjectStore()
// 字体选项
const fontOptions = computed(() => {
  const list = (projectStore.project?.resources.fonts || []).map((font) => {
    return {
      label: font.fileName,
      value: font.id
    }
  })
  return [{ label: 'montserratMedium', value: 'montserratMedium' }, ...list]
})

//对齐选项
const alignOptions = [
  { label: '左对齐', value: 'left' },
  { label: '居中对齐', value: 'center' },
  { label: '右对齐', value: 'right' }
]

const modelValue = defineModel<{
  color: string
  family: string
  size: number
  align: string
  decoration: string
}>('modelValue')
// 颜色
const color = computed({
  get: () => modelValue.value?.color,
  set: (val: string) => {
    if (modelValue.value) {
      modelValue.value.color = val
    }
  }
})
// 大小
const size = computed({
  get: () => modelValue.value?.size,
  set: (val: number) => {
    if (modelValue.value) {
      modelValue.value.size = val
    }
  }
})
// 装饰
const decoration = computed({
  get: () => modelValue.value?.decoration,
  set: (val: string) => {
    if (modelValue.value) {
      modelValue.value.decoration = val
    }
  }
})
// 字体
const family = computed({
  get: () => modelValue.value?.family,
  set: (val: string) => {
    if (modelValue.value) {
      modelValue.value.family = val
    }
  }
})
// 对齐方式
const align = computed({
  get: () => modelValue.value?.align,
  set: (val: string) => {
    if (modelValue.value) {
      modelValue.value.align = val
    }
  }
})
</script>

<style scoped></style>
