import { IPublicTypeSnippet } from '@alilc/lowcode-types';
import { LayoutsContainerPropsTmp1 } from './template';

const LayoutsBaseProps = {
  componentName: 'DataVLayouts',
  props: {
    hashUseFixed: true,
    contentStyle: {
      minHeight: '100vh',
      backgroundColor: '#000203',
    },
    topRender: {
      type: 'JSSlot',
      value: [
        {
          componentName: 'ZDiv',
          props: {
            style: {
              display: 'flex',
            },
          },
          title: '',
          children: [
            {
              componentName: 'ZDiv',
              props: {
                style: {
                  width: '100px',
                  textAlign: 'center',
                },
              },
              title: '',
              children: [
                {
                  componentName: 'Button',
                  props: {
                    type: 'primary',
                    children: '全屏',
                    htmlType: 'button',
                    size: 'middle',
                    shape: 'default',
                    block: false,
                    danger: false,
                    ghost: false,
                    disabled: false,
                  },

                  title: '',
                },
              ],
            },
            {
              componentName: 'ZDiv',
              props: {
                style: {
                  flex: '1',
                  overflow: 'hidden',
                },
              },
              title: '',
              children: [
                {
                  componentName: 'ZForm',
                  props: {
                    columns: [
                      {
                        title: '区域',
                        dataIndex: 'warehouse_region',
                        valueType: 'asyncSelect',
                        fieldProps: {
                          requestOptions: {
                            url: '/data/forward/v1/bigdata/report/getWarehouseRegionDim',
                            method: 'POST',
                            formatter: {
                              type: 'JSFunction',
                              value:
                                'function formatter(data) {\n  return {\n  bigDataBody: {\n  dataSetName: "getWarehouseRegionDim",\n  orderByStr: "name",\n  pageNum: 1,\n  pageSize: 10000,\n  dim: [],\n  target: [\n  { "description":"name" },\n  { "description":"code" },\n  { "description":"parent_code" }\n  ],\n  ...data,\n  }\n  }\n  }',
                            },
                          },
                          fieldNames: {
                            label: 'name',
                            value: 'code',
                          },
                          isPager: false,
                          labelInValue: false,
                        },
                      },
                      {
                        title: '仓库类型',
                        dataIndex: 'dim_warehouse_typ',
                        valueType: 'asyncSelect',
                        fieldProps: {
                          requestOptions: {
                            url: '/data/forward/v1/bigdata/report/dim_warehouse_typ',
                            method: 'POST',
                            formatter: {
                              type: 'JSFunction',
                              value:
                                'function formatter(data) {\n  return {\n  bigDataBody: {\n  dataSetName: "dim_warehouse_typ",\n  orderByStr: "name",\n  pageNum: 1,\n  pageSize: 10000,\n  dim: [],\n  target: [\n  { "description":"name" },\n  { "description":"code" },\n  { "description":"parent_code" }\n  ],\n  ...data,\n  }\n  }\n  }',
                            },
                          },
                          fieldNames: {
                            label: 'name',
                            value: 'code',
                          },
                          isPager: false,
                          labelInValue: false,
                        },
                      },
                    ],
                    layoutType: 'QueryFilter',
                    grid: true,
                    labelColWidth: 100,
                    submitter: true,
                    restProps: {
                      labelWidth: 'auto',
                      colon: false,
                    },
                    span: 6,
                    defaultColsNumber: 9,
                  },
                  title: '',
                },
              ],
            },
          ],
        },
      ],
    },
  },
};

const LayoutsContainerProps = {
  children: [
    {
      componentName: 'ZDiv',
      props: {
        style: {
          width: '100%',
          height: '100%',
          padding: '20px',
          display: 'flex',
          flexDirection: 'column',
        },
      },
      title: '',
      children: [
        {
          componentName: 'ZDiv',
          props: {
            style: {
              width: '100%',
              height: '60px',
              position: 'relative',
            },
          },
          title: '',
          children: [
            {
              componentName: 'DataVDecoration',
              props: {
                decorationType: '5',
                style: {
                  width: '100%',
                  height: '100%',
                },
                color: [],
                dur: 3,
                reverse: false,
              },
              title: '',
            },
            {
              componentName: 'Row',
              props: {
                align: 'top',
                justify: 'start',
                wrap: false,
                style: {
                  position: 'absolute',
                  left: '0',
                  top: '0',
                  right: '0',
                  bottom: '0',
                  zIndex: '2',
                },
              },
              title: '',
              children: [
                {
                  componentName: 'Col',
                  props: {
                    span: 4,
                    order: 0,
                  },
                  title: '',
                },
                {
                  componentName: 'Col',
                  props: {
                    span: 16,
                    order: 0,
                    style: {
                      textAlign: 'center',
                    },
                  },
                  title: '',
                  children: [
                    {
                      componentName: 'Typography.Title',
                      props: {
                        level: 2,
                        children: '大屏标题',
                        code: false,
                        copyable: false,
                        delete: false,
                        disabled: false,
                        editable: false,
                        ellipsis: false,
                        mark: false,
                        keyboard: false,
                        underline: false,
                        strong: false,
                        style: {
                          color: '#fff',
                        },
                      },
                      title: '',
                    },
                  ],
                },
                {
                  componentName: 'Col',
                  props: {
                    span: 4,
                    order: 0,
                  },
                  title: '',
                },
              ],
            },
          ],
        },
        {
          componentName: 'ZDiv',
          props: {
            style: {
              flex: '1',
              display: 'flex',
            },
          },
          title: '',
        },
      ],
    },
  ],
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '大屏布局',
    screenshot: 'https://files.ztocwst.com/download/795abf59bab74a7895994180cd1e7de0?isShow=true',
    schema: {
      ...LayoutsBaseProps,
      ...LayoutsContainerProps,
    },
  },
  {
    title: '大屏模板1',
    screenshot: 'https://files.ztocwst.com/download/795abf59bab74a7895994180cd1e7de0?isShow=true',
    schema: {
      ...LayoutsBaseProps,
      ...LayoutsContainerPropsTmp1,
    },
  },
];

export default snippets;