import pisellAvatarProps from './fragments/pisellAvatar';
import cardStyleProps from './fragments/cardStyle';
import nameStyleProps from './fragments/nameStyle';
import tagProps from './fragments/tagConfig';
import { AntdIconSetter } from '../../../materials/lowcode/_setters';
const ClientCardMeta = {
  componentName: 'ClientCard',
  title: '客户卡片',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/private-materials',
    version: '1.0.0',
    exportName: 'ClientCard',
    main: 'src/index.ts',
    destructuring: true,
    subName: '',
  },
  configure: {
    props: [
      {
        title: {
          label: {
            type: 'i18n',
            'en-US': 'dataSource',
            'zh-CN': '数据源',
          },
        },
        name: 'dataSource',
        setter: {
          componentName: 'JsonSetter',
        },
      },
      {
        title: '展示信息',
        name: 'type',
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: 'B1',
                value: 'b1',
              },
              {
                label: 'B2',
                value: 'b2',
              },
              {
                label: 'B5',
                value: 'b5',
              },
              {
                label: 'B9',
                value: 'b9',
              },
              // {
              //   label: '自定义',
              //   value: 'b0',
              // },
            ],
          },
          initialValue: 'b2',
        },
      },
      {
        title: '展示方向',
        name: 'direction',
        condition: (target: any) => {
          const level = target.getProps().getPropValue('type');
          return ['b2', 'b5'].includes(level);
        },
        setter: {
          componentName: 'RadioGroupSetter',
          props: {
            options: [
              {
                label: '水平',
                value: 'horizontal',
              },
              {
                label: '垂直',
                value: 'vertical',
              },
            ],
          },
          initialValue: 'horizontal',
        },
      },
      {
        title: '卡片样式',
        type: 'group',
        extraProps: {
          display: 'accordion',
          defaultCollapsed: true,
        },
        items: cardStyleProps,
      },
      {
        title: '头像',
        type: 'group',
        display: 'block',
        items: [
          {
            title: '显示头像',
            name: 'isShowAvatar',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            type: 'group',
            condition: (target: any) =>
              target.getProps().getPropValue('isShowAvatar'),
            items: [...pisellAvatarProps],
          },
          {
            title: '头像状态',
            name: 'isShowStatus',
            condition: (target: any) =>
              target.getProps().getPropValue('isShowAvatar'),
            setter: 'BoolSetter',
            defaultValue: false,
          },
          {
            title: '状态颜色',
            name: 'status.color',
            condition: (target: any) =>
              target.getProps().getPropValue('isShowAvatar') &&
              target.getProps().getPropValue('isShowStatus'),
            setter: 'ColorSetter',
            defaultValue: '#17B26A',
          },
        ],
      },
      {
        title: '姓名',
        type: 'group',
        display: 'block',
        items: [
          {
            title: '显示姓名',
            name: 'isShowName',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            title: '姓名默认文案',
            name: 'defaultName',
            setter: 'StringSetter',
          },
          ...nameStyleProps,
        ],
      },
      {
        type: 'group',
        display: 'block',
        title: '标签',
        items: [
          {
            title: '展示标签',
            name: 'isShowTag',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          tagProps,
        ],
      },
      {
        type: 'group',
        display: 'block',
        title: '字段展示',
        items: [
          {
            title: '显示电话号',
            name: 'isShowPhone',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            title: '显示邮箱',
            name: 'isShowEmail',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            title: '显示生日',
            name: 'isShowBirthday',
            setter: 'BoolSetter',
            defaultValue: true,
          },
          {
            title: '显示地址',
            name: 'isShowAddress',
            setter: 'BoolSetter',
            defaultValue: true,
          },
        ],
      },
      {
        title: '显示空状态描述',
        name: 'isShowEmptyDescription',
        setter: 'BoolSetter',
        defaultValue: true,
      },
      {
        name: 'extraFields',
        title: { label: '额外字段', tip: '传入类型为Array<string>' },
        setter: {
          componentName: 'ArraySetter',
          props: {
            itemSetter: {
              componentName: 'ObjectSetter',
              props: {
                config: {
                  items: [
                    {
                      name: 'label',
                      title: '标题',
                      setter: 'PisellI18nSetter',
                      important: true,
                    },
                    {
                      name: 'value',
                      title: '值',
                      setter: 'PisellI18nSetter',
                      important: true,
                    },
                    {
                      name: 'isShowLabel',
                      title: '显示标题',
                      setter: 'BoolSetter',
                    },
                    {
                      name: 'isShowValue',
                      title: '显示值',
                      setter: 'BoolSetter',
                    },
                    {
                      name: 'icon',
                      title: 'icon选择',
                      setter: AntdIconSetter,
                    },
                    {
                      name: 'iconSize',
                      title: 'icon大小',
                      setter: ['NumberSetter'],
                    },
                    {
                      name: 'iconColor',
                      title: 'icon颜色',
                      setter: 'ColorSetter',
                    },
                  ],
                  columns: 2,
                },
              },
              initialValue: {
                isShowLabel: false,
                isShowValue: true,
              },
            },
          },
        },
      },
      {
        name: 'fieldNames',
        title: { label: '字段映射', tip: '将非标准字段映射为标准字段' },
        setter: 'JsonSetter',
      },
      {
        type: 'group',
        display: 'block',
        title: '插槽',
        items: [
          {
            title: '顶部插槽',
            name: 'slots.top',
            setter: {
              componentName: 'SlotSetter',
            },
          },
          {
            title: '底部插槽',
            name: 'slots.bottom',
            setter: {
              componentName: 'SlotSetter',
            },
          },
          {
            title: '左侧插槽',
            name: 'slots.left',
            setter: {
              componentName: 'SlotSetter',
            },
          },
          {
            title: '右侧插槽',
            name: 'slots.right',
            setter: {
              componentName: 'SlotSetter',
            },
          },
        ],
      },
    ],
    supports: {
      events: [
        {
          name: 'onAddClient',
        },
        {
          name: 'onChangeClient',
        },
        {
          name: 'onRemoveClient',
        },
        {
          name: 'onViewClient',
        },
      ],
      style: true,
    },
  },
};

const snippets = [
  {
    title: '客户卡片',
    screenshot: '',
    schema: {
      componentName: 'ClientCard',
      props: {
        type: 'b2',
      },
    },
  },
];

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