import { defineStore } from 'pinia'
import { reactive, computed } from 'vue'
import { EditorFolder } from '@/const/editor'

// 定义哪些属性需要添加 px 单位
const PX_PROPERTIES = ['width', 'border-radius']
const TILT_PROPERTIES = ["border-radius"]

export const useEditorStore = defineStore('editor', () => {
  // 存储表单数据
  const formData = reactive<Record<string, any>>({})

  // 初始化表单数据
  function initializeFormData() {
    EditorFolder.children.forEach((item: any) => {
      if (!(item.label in formData)) {
        formData[item.label] = item.value
      }
    })
  }


  // 获取动态样式对象
  const imageStyle = computed(() => {
    const style: Record<string, any> = {}
    Object.entries(formData).forEach(([key, value]) => {
      if (PX_PROPERTIES.includes(key) && typeof value === 'number') {
        style[key] = `${value}px`
      } else {
        style[key] = value
      }
    })
    return style
  })

  return {
    formData,
    imageStyle,
    initializeFormData,
  }
}, {
  persist: false
})