import snippets from './snippets';

export default {
  snippets,
  componentName: 'PisellLoading',
  title: '加载',
  category: '数据展示',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'PisellLoading',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      name: 'loading',
      title: {
        label: '是否加载中',
        tip: '是否加载中',
      },
      propType: 'bool',
      defaultValue: false,
    },
    {
      name: 'fullscreen',
      title: {
        label: '全屏',
        tip: '是否全屏加载',
      },
      propType: 'bool',
      defaultValue: false,
    },
    {
      name: 'delay',
      title: {
        label: '延迟显示加载效果的时间（防止闪烁）',
        tip: '延迟显示加载效果的时间（防止闪烁）',
      },
      propType: 'number',
    },
    {
      title: '蒙层设置',
      display: 'block',
      type: 'group',
      items: [
        {
          name: 'mask',
          title: { label: '是否开启蒙层 ', tip: '是否开启蒙层 ' },
          propType: "object",
          defaultValue: true,
          setter: "BoolSetter",
          extraProps: {
            setValue: (target, value) => {
              if (value) {
                target.parent.setPropValue("mask", {
                  width: "100%",
                  height: '100%',
                  backgroundColor: "#fff"
                });
              }
            },
          },
        },
        {
          name: 'mask.width',
          title: { label: '蒙层宽度', tip: '蒙层宽度' },
          propType: { type: 'oneOfType', value: ['string', 'number'] },
          setter: ['StringSetter', 'NumberSetter'],
          condition: {
            type: "JSFunction",
            value: 'target => !!target.getProps().getPropValue("mask")',
          },
        },
        {
          name: 'mask.height',
          title: { label: '蒙层高度', tip: '蒙层高度' },
          propType: { type: 'oneOfType', value: ['string', 'number'] },
          setter: ['StringSetter', 'NumberSetter'],
          condition: {
            type: "JSFunction",
            value: 'target => !!target.getProps().getPropValue("mask")',
          },
        },
        {
          name: 'mask.backgroundColor',
          title: { label: '背景色', tip: '背景色 可设置透明度' },
          propType: 'string',
          setter: 'ColorSetter',
          condition: {
            type: "JSFunction",
            value: 'target => !!target.getProps().getPropValue("mask")',
          },
        },
      ],
    },
  ],
  configure: {
    component: { isContainer: true },
    supports: { style: true },
  },
};