<!-- 组件自定义配置部分 -->
<template>
  <CusForm :columns="columns" v-bind="$attrs" @change="handleChange"> </CusForm>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, computed } from "vue";
import { CusForm, type IFormItem } from "../../../cusForm";
import { titleProps } from "./props";

const props = defineProps(titleProps);
const emit = defineEmits(["change"]);

const columns = computed((): IFormItem[] => [
  {
    label: "内容",
    prop: "text",
    type: "input",
    defaultValue: props.text,
  },
  {
    label: "字体",
    prop: "fontSize",
    type: "inputNumber",
    defaultValue: props.fontSize,
  },
  {
    label: "颜色",
    prop: "color",
    type: "colorSelect",
    defaultValue: props.color,
  },
  {
    label: "对齐",
    prop: "textAlign",
    type: "radioGroup",
    defaultValue: props.textAlign,
    fieldProps: {
      options: [
        { label: "左对齐", value: "left" },
        { label: "居中", value: "center" },
        { label: "右对齐", value: "right" },
      ],
    },
  },
]);

const handleChange = (val: Record<string, any>) => {
  emit("change", val);
};
</script>

<style lang="scss" scoped></style>
