import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';
import Api from './api';

const TableMeta: IPublicTypeComponentMetadata = {
  componentName: 'SummaryTable',
  title: '汇总表格',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  category: '基础组件',
  group: '精选组件',
  npm: {
    package: 'temp-materials',

    exportName: 'SummaryTable',
    main: 'src\\index.tsx',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      // 常用配置
      {
        title: '常用配置',
        type: 'group',
        display: 'accordion',
        items: [
          // 表格尺寸
          {
            title: {
              label: '表格尺寸',
              tip: '设置表格尺寸,默认为中等尺寸',
            },
            name: 'size',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    label: 'L',
                    value: 'large',
                  },
                  {
                    label: 'M',
                    value: 'medium',
                  },
                  {
                    label: 'S',
                    value: 'small',
                  },
                ],
              },
              isRequired: true,
              initialValue: 'medium',
            },
          },
          // 表格风格
          {
            title: {
              label: '表格风格',
              tip: '设置表格风格,默认使用有边框风格',
            },
            name: 'theme',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    label: '斑马纹',
                    value: 'zebra',
                  },
                  {
                    label: '分割线',
                    value: 'split',
                  },
                  {
                    label: '有边框',
                    value: 'border',
                  },
                  {
                    label: '无边框',
                    value: 'noBorder',
                  },
                ],
              },
              isRequired: true,
              initialValue: 'border',
            },
          },
          // 合并单元格
          // {
          //   title: '合并单元格',
          //   name: 'mergeCell',
          //   setter: {
          //     componentName: 'BoolSetter',
          //     isRequired: true,
          //     initialValue: false,
          //   },
          // },
          // 固定表头
          {
            title: {
              label: '固定表头',
              tip: '在设置表格高度且出现滚动条后,可以选择在滚动时固定表头来优化使用体验',
            },
            name: 'fixedHeader',
            setter: {
              componentName: 'BoolSetter',
              isRequired: true,
              initialValue: false,
            },
          },
          // 最大内容高度
          {
            title: {
              label: '最大内容高度',
              tip: '设置表格内容的最大高度,数据超出内容高度,则出现滚动条',
            },
            name: 'maxBodyHeight',
            condition: (target) => {
              return target.parent.getPropValue('fixedHeader');
            },
            setter: {
              componentName: 'NumberSetter',
              isRequired: false,
              initialValue: 300,
              props: {
                min: 0,
              },
            },
          },
          // 固定列
          {
            title: {
              label: '固定列',
              tip: '从左到右,固定指定数量的列',
            },
            name: 'fixedColumnlndex',
            setter: {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    label: '无',
                    value: 0,
                  },
                  {
                    label: '1列',
                    value: 1,
                  },
                  {
                    label: '2列',
                    value: 2,
                  },
                  {
                    label: '3列',
                    value: 3,
                  },
                ],
              },
              isRequired: true,
              initialValue: 1,
            },
          },
          // 行列转置
          // {
          //   title: {
          //     label: '行列转置',
          //     tip: '开启行列转置居教据会交换行列进行展示,同时不再支持表格的合并单元格、动态下结行序号等部分操作',
          //   },
          //   name: 'transposition',
          //   setter: {
          //     componentName: 'BoolSetter',
          //     isRequired: true,
          //     initialValue: false,
          //   },
          // },
          // 表头背景
          {
            title: {
              label: '表头背景色',
              tip: '设置表头背景颜色',
            },
            name: 'headerBgColor',
            setter: 'ColorSetter',
          },
          {
            title: {
              label: '表头文本色',
              tip: '设置表头文本颜色',
            },
            name: 'headerTextColor',
            setter: 'ColorSetter',
          },
          // 标题
          {
            title: {
              label: '显示标题',
              tip: '是否显示标题',
            },
            name: 'hasTitle',
            setter: {
              componentName: 'BoolSetter',
              isRequired: true,
              initialValue: true,
            },
          },
          // 标题文本
          {
            title: {
              label: '标题文本',
              tip: '需要展示的标题文本,不填时,取所选数据集为标题',
            },
            name: 'titleText',
            condition: (target) => {
              return target.parent.getPropValue('hasTitle');
            },
            setter: {
              componentName: 'StringSetter',
              initialValue: '',
            },
          },
          // 描述文本
          {
            title: {
              label: '描述文本',
              tip: '需要展示的描述文本,不填时,取所选数据集为标题',
            },
            name: 'descText',
            condition: (target) => {
              return target.parent.getPropValue('hasTitle');
            },
            setter: {
              componentName: 'StringSetter',
              initialValue: '',
            },
          },
        ],
      },
    ],
    supports: {},
    component: {},
    advanced: {
      context: {
        dataSourceProps: [
          { label: '表格行(维度)', props: 'dimension', limit: 99 },
          { label: '表格列(指标)', props: 'target', limit: 99 },
          { label: '筛选字段', props: 'f', limit: 99 },
        ],
        datasetProps: [
          { label: '条件过滤', props: 'filter', type: 'filter_btn' },
          { label: '计算字段', props: 'calculate', type: 'calculate_fields' },
        ],
      },
    },
  },
};
const snippets: IPublicTypeSnippet[] = [
  {
    title: '汇总表格',
    screenshot: '',
    schema: {
      componentName: 'SummaryTable',
      props: {
        data: Api.defalutData,
        cols: Api.cols,
        size: 'medium',
        paging: true,
        pageSize: 10,
        pagerSize: 'small',
        theme: 'border',
        colWidth: [],
        headerBgColor: '#E4E7ED',
        headerTextColor: '#444',
        fixedColumnlndex: 1,
        hasTitle: true,
        titleText: '',
      },
    },
  },
];

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