import snippets from "./snippets";

export default {
  snippets,
  componentName: "Typography.Title",
  title: "标题",
  category: "基础",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.1",
    exportName: "Typography",
    main: "src/index.tsx",
    destructuring: true,
    subName: "Title",
  },
  props: [
    {
      name: "children",
      title: { label: "内容", tip: "内容" },
      setter: {
        componentName: "PisellI18nSetter",
      },
      defaultValue: "",
      supportVariable: true,
    },
    {
      name: "level",
      title: { label: "重要程度", tip: "重要程度(1-5)" },
      propType: "number",
      defaultValue: 1,
    },
    {
      name: "code",
      title: { label: "添加代码样式", tip: "添加代码样式" },
      propType: "bool",
      defaultValue: false,
    },
    {
      name: "copyable",
      title: { label: "是否可拷贝", tip: "是否可拷贝" },
      propType: "bool",
      defaultValue: false,
    },
    {
      name: "delete",
      title: { label: "添加删除线样式", tip: "添加删除线样式" },
      propType: "bool",
      defaultValue: false,
    },
    {
      name: "disabled",
      title: { label: "是否禁用", tip: "是否为禁用状态" },
      propType: "bool",
      defaultValue: false,
    },
    {
      name: "editable",
      title: { label: "是否可编辑", tip: "是否可编辑" },
      propType: "bool",
      defaultValue: false,
    },
    {
      name: "pcIsEllipsis",
      title: { label: "PC自动溢出省略", tip: "PC自动溢出省略" },
      propType: "bool",
      defaultValue: false,
      extraProps: {
        setValue: (target, value) => {
          if (value) {
            target.parent.setPropValue("ellipsis.rows", 1);
            return;
          }
          if (
            !target.parent.getPropValue("padIsEllipsis") &&
            !target.parent.getPropValue("mobileIsEllipsis")
          ) {
            target.parent.setPropValue("ellipsis.rows", 0);
          }
        },
      },
    },
    {
      name: "padIsEllipsis",
      title: { label: "Pad自动溢出省略", tip: "Pad自动溢出省略" },
      propType: "bool",
      defaultValue: false,
      extraProps: {
        setValue: (target, value) => {
          if (value) {
            target.parent.setPropValue("ellipsis.rows", 1);
            return;
          }
          if (
            !target.parent.getPropValue("pcIsEllipsis") &&
            !target.parent.getPropValue("mobileIsEllipsis")
          ) {
            target.parent.setPropValue("ellipsis.rows", 0);
          }
        },
      },
    },
    {
      name: "mobileIsEllipsis",
      title: { label: "Mobile自动溢出省略", tip: "Mobile自动溢出省略" },
      propType: "bool",
      defaultValue: false,
      extraProps: {
        setValue: (target, value) => {
          if (value) {
            target.parent.setPropValue("ellipsis.rows", 1);
            return;
          }
          if (
            !target.parent.getPropValue("pcIsEllipsis") &&
            !target.parent.getPropValue("padIsEllipsis")
          ) {
            target.parent.setPropValue("ellipsis.rows", 0);
          }
        },
      },
    },
    {
      name: "ellipsis.rows",
      title: { label: "最大行数", tip: "ellipsis.rows | 最大行数" },
      propType: "number",
      setter: "NumberSetter",
      condition: {
        type: "JSFunction",
        value:
          'target => !!target.getProps().getPropValue("pcIsEllipsis") || !!target.getProps().getPropValue("padIsEllipsis") || !!target.getProps().getPropValue("mobileIsEllipsis")',
      },
    },
    {
      name: "mark",
      title: { label: "添加标记样式", tip: "添加标记样式" },
      propType: "bool",
      defaultValue: false,
    },
    {
      name: "keyboard",
      title: { label: "添加键盘样式", tip: "添加键盘样式" },
      propType: "bool",
      defaultValue: false,
    },
    {
      name: "underline",
      title: { label: "添加下划线样式", tip: "添加下划线样式" },
      propType: "bool",
      defaultValue: false,
    },
    {
      name: "strong",
      title: { label: "是否加粗", tip: "是否加粗" },
      propType: "bool",
      defaultValue: false,
    },
    {
      name: "type",
      title: { label: "文本类型", tip: "文本类型" },
      propType: { type: "oneOf", value: ["secondary", "warning", "danger"] },
      setter: {
        componentName: "SelectSetter",
        props: {
          options: [
            {
              title: "默认",
              value: "default",
            },
            {
              title: "弱提示",
              value: "secondary",
            },
            {
              title: "成功",
              value: "success",
            },
            {
              title: "警告",
              value: "warning",
            },
            {
              title: "错误",
              value: "danger",
            },
          ],
        },
      },
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: "onClick",
          template:
            "onClick(event,${extParams}){\n// 点击时的回调\nconsole.log('onClick', event);}",
        },
      ],
    },
  },
};