import { ComponentMetadata, Snippet } from "@alilc/lowcode-types";

const PageMeta: ComponentMetadata = {
  componentName: "Filter",
  title: "Filter",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.11",
    exportName: "Filter",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    {
      name: "filter.show",
      title: { label: "开启筛选", tip: "开启筛选" },
      propType: "object",
      setter: "BoolSetter",
      defaultValue: false,
    },
    {
      name: "filter.list",
      condition: {
        type: "JSFunction",
        value: 'target => !!target.getProps().getPropValue("filter.show")',
      },
      setter: {
        componentName: "ArraySetter",
        props: {
          itemSetter: {
            componentName: "ObjectSetter",
            props: {
              config: {
                items: [
                  {
                    name: "label",
                    title: { label: "筛选项", tip: "筛选项" },
                    setter: {
                      componentName: 'PisellI18nSetter',
                    },
                    isRequired: true,
                  },
                  {
                    name: "name",
                    title: { label: "字段", tip: "所筛选的字段" },
                    propType: "string",
                    setter: "StringSetter",
                    isRequired: true,
                  },
                  {
                    name: "type",
                    title: { label: "字段类型", tip: "所筛选的字段类型" },
                    propType: "string",
                    setter: {
                      componentName: "SelectSetter",
                      mode: "single",
                      defaultValue: "single",
                      props: {
                        options: [
                          {
                            title: "输入框",
                            value: "text",
                          },
                          {
                            title: "数字输入框",
                            value: "number",
                          },
                          {
                            title: "下拉选择框",
                            value: "select",
                          },
                          {
                            title: "日期选择器",
                            value: "date",
                          },
                          {
                            title: "日期范围选择器",
                            value: "rangePicker",
                          },
                        ],
                      },
                    },
                  },
                  {
                    name: "other",
                    title: {
                      label: "其他拓展属性",
                      tip: "其他拓展属性",
                    },
                    propType: "object",
                    setter: "JsonSetter",
                  },
                ],
              },
            },
            initialValue: { label: {}, name: "name", type: "text" },
          },
        },
      },
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onValuesChange',
          template:
            "onValuesChange(changedValues, values){}",
        },
      ]
    },
  },
};
const snippets: Snippet[] = [
  {
    title: "Filter",
    screenshot: "",
    schema: {
      componentName: "Filter",
      props: {
        filter: {
          show: true,
          list: [{ label: {}, name: "name", type: "text" }],
        },
      },
    },
  },
];

export default {
  ...PageMeta,
  snippets,
};