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

const DivMeta: ComponentMetadata = {
  componentName: "RecordView",
  title: "RecordView",
  docUrl: "",
  screenshot: "",
  devMode: "proCode",
  npm: {
    package: "@pisell/materials",
    version: "1.0.3",
    exportName: "RecordView",
    main: "src/index.tsx",
    destructuring: true,
    subName: "",
  },
  props: [
    {
      name: "dataSource",
      title: { label: "列表数据源", tip: "列表数据源" },
      propType: { type: "arrayOf", value: "any" },
      setter: ["JsonSetter", "VariableSetter"],
    },
    {
      name: "header",
      title: {
        label: "头部区域",
        tip: "header | 头部区域",
      },
      propType: "node",
      setter: {
        componentName: "SlotSetter",
        initialValue: {
          type: "JSSlot",
          value: [
            {
              componentName: "Typography.Text",
              props: {
                children: "List Title",
                style: {
                  color: "var(--gray-900, #101828)",
                  fontSize: "20px",
                  fontWeight: 600,
                },
              },
            },
          ],
        },
      },
    },
    {
      name: "renderItem",
      title: {
        label: "渲染函数",
        tip: "renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项",
      },
      propType: "func",
      setter: [
        {
          componentName: "SlotSetter",
          title: "渲染函数插槽",
          initialValue: {
            type: "JSSlot",
            params: ["item"],
            value: [
              {
                componentName: "List.Item",
                props: {},
                children: {
                  componentName: "Typography.Text",
                  props: {
                    children: {
                      type: "JSExpression",
                      value: "this.item.text",
                    },
                  },
                },
              },
            ],
          },
        },
        {
          componentName: "FunctionSetter",
          props: {
            template:
              "renderItem(item,${extParams}){\n// 自定义渲染列表项\nreturn `item`;\n}",
          },
        },
        "VariableSetter",
      ],
    },
    {
      name: "leftSpan",
      title: {
        label: "左侧比例",
        tip: "leftSpan | 左侧比例",
      },
      propType: "number",
      setter: {
        componentName: "NumberSetter",
        props: {
          min: 0,
          max: 24,
        },
      },
    },
    {
      name: "rightSpan",
      title: {
        label: "右侧比例",
        tip: "rightSpan | 右侧比例",
      },
      propType: "number",
      setter: {
        componentName: "NumberSetter",
        props: {
          min: 0,
          max: 24,
        },
      },
    },
    {
      name: "h-gutter",
      title: {
        label: "左右间距",
        tip: "栅格水平间隔，单位为像素(px)",
      },
      propType: "number",
      setter: {
        componentName: "NumberSetter",
        props: {
          min: 0,
        },
      },
      defaultValue: 0,
      extraProps: {
        getValue(target) {
          const { node } = target;
          const gutter = node.getPropValue("gutter");
          if (typeof gutter === "number") {
            return gutter;
          } else if (Array.isArray(gutter)) {
            return gutter[0];
          }
          return 0;
        },
        setValue(target, value) {
          const { node } = target;
          const gutter = node.getPropValue("gutter");
          if (Array.isArray(gutter)) {
            gutter[0] = value;
            node.setPropValue("gutter", gutter);
          } else {
            node.setPropValue("gutter", [value, 0]);
          }
        },
      },
    },
    {
      name: "footer",
      title: {
        label: "底部区域",
        tip: "footer | 底部区域",
      },
      propType: "node",
      setter: {
        componentName: "SlotSetter",
      },
    },
    {
      name: "listGap",
      title: {
        label: "列表间距",
        tip: "listGap | 列表间距",
      },
      propType: "number",
      setter: {
        componentName: "NumberSetter",
      },
      defaultValue: 16,
    },
    {
      name: "detail",
      title: {
        label: "详情区域",
        tip: "detail | 详情区域",
      },
      propType: "node",
      setter: {
        componentName: "SlotSetter",
        initialValue: {
          type: "JSSlot",
          value: [
            {
              componentName: "Typography.Text",
              props: {
                children: "我是详情区域",
                style: {
                  color: "var(--gray-900, #101828)",
                  fontSize: "20px",
                  fontWeight: 600,
                },
              },
            },
          ],
        },
      },
    },
    {
      name: "doubleList",
      title: {
        label: "双重列表",
        tip: "doubleList | 双重列表",
      },
      propType: "bool",
    },
    {
      name: "search",
      title: {
        label: "搜索功能",
        tip: "search | 搜索功能",
      },
      propType: "bool",
    },
    {
      name: "pcDetailModalDisplay",
      title: {
        label: "详情弹窗展示（PC端）",
        tip: "detailModalDisplay | 详情弹窗展示",
      },
      propType: "bool",
    },

    {
      name: "pcDetailModalWidth",
      title: {
        label: "详情弹窗展示_（PC端） 宽度值",
        tip: "pcDetailModalWidth | 详情弹窗展示_(PC端) 宽度值",
      },
      propType: "number",
      condition: (target: any) => target.getProps().getPropValue('pcDetailModalDisplay')
    },


    {
      name: "padDetailModalDisplay",
      title: {
        label: "详情弹窗展示（Pad端）",
        tip: "detailModalDisplay | 详情弹窗展示",
      },
      propType: "bool",
    },
    {
      name: "mobilePadDetailModalDisplay",
      title: {
        label: "详情弹窗展示（Modal端）",
        tip: "detailModalDisplay | 详情弹窗展示",
      },
      propType: "bool",
    },
    {
      name: 'split',
      title: { label: '展示分割线', tip: 'split | 是否展示分割线' },
      propType: 'bool',
      setter: 'BoolSetter',
    },
    {
      name: 'loading',
      title: {
        label: '是否加载中',
        tip: 'loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位',
      },
      propType: 'bool',
      defaultValue: false,
      setter: ['BoolSetter', 'VariableSetter'],
    },
    {
      title: "分页",
      display: "block",
      type: "group",
      items: [
        {
          name: "paginationType",
          title: {
            label: "分页类型",
            tip: "paginationType | 分页类型 ",
          },
          propType: { type: "oneOf", value: ["default", "scroll"] },
          setter: [
            {
              componentName: "RadioGroupSetter",
              props: {
                options: [
                  {
                    title: "分页器",
                    value: "default",
                  },
                  {
                    title: "滑动加载",
                    value: "scroll",
                  },
                ],
              },
            },
            "VariableSetter",
          ],
          extraProps: {
            setValue: (target, value) => {
              if (value === "scroll") {
                target.parent.setPropValue("pagination", {
                  pageSize: 5,
                  current: 1,
                  size: "default",
                });
              }
            },
          },
          defaultValue: "default",
        },
        {
          name: "listHeight",
          title: {
            label: "列表高度",
            tip: "listHeight | 列表高度",
          },
          propType: "string",
          setter: "StringSetter",
          condition: {
            type: "JSFunction",
            value:
              'target => target.getProps().getPropValue("paginationType") === "scroll"',
          },
          defaultValue: 400,
        },
        {
          name: "pagination",
          title: { label: "显示分页", tip: "pagination | 显示分页" },
          propType: "object",
          setter: "BoolSetter",
          extraProps: {
            setValue: (target, value) => {
              if (value) {
                target.parent.setPropValue("pagination", {
                  pageSize: 5,
                  current: 1,
                  size: "default",
                });
              }
            },
          },
          condition: {
            type: "JSFunction",
            value:
              'target => target.getProps().getPropValue("paginationType") === "default"',
          },
        },
        {
          name: "pagination.pageSize",
          title: { label: "每页条数", tip: "pagination.pageSize | 每页条数" },
          setter: "NumberSetter",
          condition: {
            type: "JSFunction",
            value: 'target => !!target.getProps().getPropValue("pagination")',
          },
        },
        {
          name: "pagination.total",
          title: { label: "数据总数", tip: "pagination.total | 数据总数" },
          setter: "NumberSetter",
          condition: {
            type: "JSFunction",
            value: 'target => !!target.getProps().getPropValue("pagination")',
          },
        },
        // {
        //   name: 'pagination.defaultCurrent',
        //   title: {
        //     label: '默认当前页',
        //     tip: 'pagination.defaultCurrent | 默认的当前页数',
        //   },
        //   setter: [
        //     {
        //       componentName: 'NumberSetter',
        //       props: {
        //         initialValue: 1,
        //       },
        //     },
        //     'VariableSetter',
        //   ],
        //   condition: {
        //     type: 'JSFunction',
        //     value: 'target => !!target.getProps().getPropValue("pagination")',
        //   },
        // },
        {
          name: "pagination.current",
          title: { label: "当前页数", tip: "pagination.current | 当前页数" },
          setter: "NumberSetter",
          condition: {
            type: "JSFunction",
            value: 'target => !!target.getProps().getPropValue("pagination")',
          },
        },
        /*{
          name: 'pagination.showTotal',
          title: {
            label: '显示总数',
            tip: 'pagination.showTotal | 用于显示数据总量和当前数据顺序',
          },
          propType: 'func',
          setter: [
            {
              componentName: 'FunctionSetter',
              props: {
                template:
                  'showTotal(total,range,${extParams}){\n// 用于格式化显示表格数据总量\nreturn `共 ${total} 条`;\n}',
              },
            },
            'VariableSetter',
          ],
          condition: {
            type: 'JSFunction',
            value: 'target => !!target.getProps().getPropValue("pagination")',
          },
        },*/
        /*{
          name: 'pagination.showSizeChanger',
          title: {
            label: '页数切换',
            tip: 'pagination.showSizeChanger | 是否展示 pageSize 切换器',
          },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: false,
          condition: {
            type: 'JSFunction',
            value: 'target => !!target.getProps().getPropValue("pagination")',
          },
        },
        {
          name: 'pagination.showQuickJumper',
          title: {
            label: '快速跳转',
            tip: 'pagination.showQuickJumper | 是否可以快速跳转至某页',
          },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: false,
          condition: {
            type: 'JSFunction',
            value: 'target => !!target.getProps().getPropValue("pagination")',
          },
        },
        {
          name: 'pagination.simple',
          title: { label: '简单分页', tip: 'pagination.simple | 简单分页' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: false,
          condition: {
            type: 'JSFunction',
            value: 'target => !!target.getProps().getPropValue("pagination")',
          },
        },*/
        /*{
          name: 'pagination.size',
          title: { label: '分页尺寸', tip: 'pagination.size | 分页尺寸' },
          propType: {
            type: 'oneOf',
            value: ['default', 'small'],
          },
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '默认',
                    value: 'default',
                  },
                  {
                    title: '小',
                    value: 'small',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          defaultValue: 'default',
          condition: {
            type: 'JSFunction',
            value: 'target => !!target.getProps().getPropValue("pagination")',
          },
        },*/
        {
          name: "pagination.onChange",
          title: {
            label: "分页改变事件",
            tip: "pagination.onChange | 分页改变事件",
          },
          setter: {
            componentName: "FunctionSetter",
            props: {
              template:
                'onPaginationChange(page,pageSize){console.log(page,pageSize,"page,pageSize")}',
            },
          },
          condition: {
            type: "JSFunction",
            value: 'target => !!target.getProps().getPropValue("pagination")',
          },
        },

        {
          name: "pagination.position",
          title: { label: "分页位置", tip: "pagination.position | 分页位置" },
          setter: {
            componentName: "SelectSetter",
            props: {
              options: [
                {
                  title: "上",
                  value: "top",
                },
                {
                  title: "下",
                  value: "bottom",
                },
                {
                  title: "上下",
                  value: "both",
                },
              ],
            },
            initialValue: "bottomRight",
          },
          condition: {
            type: "JSFunction",
            value: 'target => !!target.getProps().getPropValue("pagination")',
          },
        },
      ],
    },
    {
      title: "数据为空时",
      display: "block",
      type: "group",
      items: [
        {
          name: "locale.emptyText",
          title: {
            label: "提示文本",
            tip: "emptyText | 提示文本",
          },
          setter: "StringSetter",
          defaultValue: "暂无数据",
        },
        {
          name: "emptyButtons",
          title: { label: "按钮项", tip: "右侧按钮项" },
          setter: {
            componentName: "ArraySetter",
            props: {
              itemSetter: {
                componentName: "ObjectSetter",
                props: {
                  config: {
                    items: [
                      {
                        name: "title",
                        title: { label: "按钮名称", tip: "按钮名称" },
                        propType: "string",
                        setter: "PisellI18nSetter",
                        isRequired: true,
                      },
                      ...button.configure.props,
                      {
                        name: "onClick",
                        title: { label: "点击事件", tip: "点击事件" },
                        propType: "func",
                        setter: "FunctionSetter",
                      },
                      {
                        name: "action",
                        title: { label: "功能", tip: "按钮的功能" },
                        propType: "string",
                        setter: [
                          {
                            componentName: "SelectSetter",
                            mode: "single",
                            defaultValue: "add",
                            props: {
                              options: [
                                {
                                  title: "Add",
                                  value: "add",
                                },
                                {
                                  title: "Reset",
                                  value: "reset",
                                },
                              ],
                            },
                          },
                        ],
                      },

                      {
                        name: "other",
                        title: {
                          label: "其他拓展属性",
                          tip: "其他拓展属性",
                        },
                        propType: "object",
                        setter: "JsonSetter",
                      },
                    ],
                  },
                },
                initialValue: { title: "按钮" },
              },
            },
          },
        },
      ],
    },
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: "onRowClick",
          template:
            "onRowClick(item,${extParams}){\n// 点击行时的回调\nconsole.log('onRowClick', item);}",
        },
        {
          name: "loadMoreData",
          template: "loadMoreData(){\n// \nconsole.log('loadMoreData');}",
        },
      ],
    },
    component: {
      isContainer: true,
    },
  },
};
const snippets: Snippet[] = [
  {
    title: "RecordView",
    screenshot: "",
    schema: {
      componentName: "RecordView",
      props: {
        dataSource: [
          {
            id: 1,
            text: "Racing car sprays burning fuel into crowd.",
          },
          {
            id: 2,
            text: "Japanese princess to wed commoner.",
          },
          {
            id: 3,
            text: "Australian walks 100km after outback crash.",
          },
          {
            id: 4,
            text: "Man charged over missing wedding girl.",
          },
          {
            id: 5,
            text: "Los Angeles battles huge wildfires.",
          },
        ],
        renderItem: {
          type: "JSSlot",
          params: ["item"],
          value: [
            {
              componentName: "List.Item",
              props: {
                style: {
                  border: "1px solid var(--gray-300, #D0D5DD)",
                  borderRadius: "12px",
                  padding: "16px 20px",
                  fontWeight: 600,
                  cursor: "pointer",
                },
              },
              children: {
                componentName: "Typography.Text",
                props: {
                  children: {
                    type: "JSExpression",
                    value: "this.item.text",
                  },
                },
              },
            },
          ],
        },
        pagination: {
          position: "bottomRight",
          size: "default",
          showSizeChanger: false,
        },
        leftSpan: 12,
        rightSpan: 12,
        gutter: [40, 0],
        style: {
          padding: 20,
        },
      },
    },
  },
];

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