import snippets from './snippets';
import { actionsMeta } from '../pisell-wallet-pass-card/actionsMeta';
import { IPublicModelSettingField } from '@alilc/lowcode-types';

export default {
  snippets,
  componentName: 'PisellCardList',
  title: 'PisellCardList',
  category: '数据展示',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: '@pisell/materials',
    version: '1.0.1',
    exportName: 'PisellCardList',
    main: 'src/index.tsx',
    destructuring: true,
    subName: '',
  },
  props: [
    {
      type: 'group',
      title: { label: '外观' },
      display: 'block',
      items: [
        {
          name: 'platform',
          title: {
            label: '平台',
          },
          propType: { type: 'oneOf', value: ['h5', 'pc', 'ipad'] },
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: 'h5',
                    value: 'h5',
                  },
                  {
                    title: 'pc',
                    value: 'pc',
                  },
                  {
                    title: 'ipad',
                    value: 'ipad',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          defaultValue: 'pc',
        },
        {
          name: 'mode',
          title: {
            label: '选择类型',
          },
          propType: { type: 'oneOf', value: ['multiple', 'single', null] },
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '不选',
                    value: null,
                  },
                  {
                    title: '单选',
                    value: 'single',
                  },
                  {
                    title: '多选',
                    value: 'multiple',
                  },
                ],
              },
            },
            'VariableSetter',
          ],
          defaultValue: 'single',
        },
        {
          name: 'direction',
          title: { label: '方向' },
          propType: { type: 'oneOf', value: ['horizontal', 'vertical'] },
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: '水平',
                    value: 'horizontal',
                  },
                  {
                    title: '垂直',
                    value: 'vertical',
                  },
                ],
              },
            },
            'VariableSetter'
          ],
          defaultValue: 'vertical'
        },
        {
          name: 'fullWidth',
          condition: (target: IPublicModelSettingField) => {
            return target.parent.getPropValue('direction') === 'horizontal';
          },
          title: { label: '卡片宽度跟随父级' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'type',
          title: { label: '卡片样式' },
          propType: { type: 'oneOf', value: ['mini', 'default'] },
          setter: [
            {
              componentName: 'RadioGroupSetter',
              props: {
                options: [
                  {
                    title: 'Mini',
                    value: 'mini',
                  },
                  {
                    title: '默认',
                    value: 'default',
                  },
                ],
              },
            },
          ],
          defaultValue: 'default',
        },
      ]
    },
    {
      type: 'group',
      title: { label: '卡片信息展示' },
      display: 'block',
      items: [
        {
          name: 'data',
          title: { label: '当前list数据', tip: '当前list数据' },
          setter: ['JsonSetter', 'VariableSetter'],
        },
        {
          name: 'hasMore',
          title: { label: '是否有更多数据', tip: '是否有更多数据' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: false,
        },
        {
          name: 'showName',
          title: { label: '显示商品名称', tip: '显示商品名称' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          type: 'group',
          title: '商品名称样式',
          display: 'entry',
          condition: (target: IPublicModelSettingField) => {
            return target.parent.getPropValue('showName') === true;
          },
          items: [
            {
              name: 'nameTitleStyle.fontSize',
              title: {
                type: 'i18n',
                'en-US': 'Font Size',
                'zh-CN': '字号',
              },
              setter: 'NumberSetter'
            },
            {
              name: 'nameTitleStyle.fontWeight',
              title: {
                type: 'i18n',
                'en-US': 'Font Weight',
                'zh-CN': '字重',
              },
              setter: 'NumberSetter'
            },
            {
              name: 'nameTitleStyle.color',
              title: {
                type: 'i18n',
                'en-US': 'Color',
                'zh-CN': '颜色',
              },
              setter: 'ColorSetter'
            },
          ]
        },
        {
          name: 'showStatus',
          title: { label: '显示状态标识', tip: '显示状态标识' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showStoreName',
          title: { label: '显示共享店铺名称', tip: '显示共享店铺名称' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showRedeem',
          title: { label: '显示使用金额', tip: '显示使用金额' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showBalance',
          title: { label: '显示余额', tip: '显示余额' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showCode',
          title: { label: '显示识别码编号', tip: '显示识别码编号' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showValidDate',
          title: { label: '显示有效期', tip: '显示有效期' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showDetail',
          title: { label: '显示查看详情按钮', tip: '显示查看详情按钮' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showQrCode',
          title: { label: '显示识别码二维码', tip: '显示识别码二维码' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showCover',
          title: { label: '显示识别码卡封面', tip: '显示识别码卡封面' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: true,
        },
        {
          name: 'showEmpty',
          title: { label: '是否展示空占位', tip: '是否展示空占位' },
          propType: 'bool',
          setter: 'BoolSetter',
          defaultValue: false,
        },
        {
          name: 'value',
          title: { label: '当前选中值', tip: '当前选中值' },
          propType: 'number',
          setter: 'NumberSetter',
        },
      ]
    },
    {
      ...actionsMeta
    }
  ],
  configure: {
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template:
            "onChange(event,${extParams}){\n// 选择变化时的回调\nconsole.log('onChange',event);}",
        },
         {
          name: 'beforeEdit',
          template:
            "beforeEdit(value, index){\n// 点击编辑按钮后，弹窗展示前\nconsole.log('beforeEdit');}",
        },
        {
          name: 'onConfirmEdit',
          template:
            "onConfirmEdit(value, index){\n// 编辑弹窗点击确认\nconsole.log('onConfirmEdit');}",
        },
        {
          name: 'onConfirmEditAmount',
          template:
            "onConfirmEditAmount(value, index){\n// 编辑金额点击确认\nconsole.log('onConfirmEditAmount');}",
        },
      ],
    },
  },
};