import { IApp } from '@cloudbase/cals';

export const textBinding: IApp = {
  name: 'demo_app',
  description: '测试应用',
  main: 'index',
  items: [
    {
      type: 'PAGE',
      id: 'index',
      component: 'page',
      items: [
        {
          component: 'Container',
          id: '0',
          module: 'gsd-h5-react',
          items: [
            {
              id: '1',
              component: 'Text',
              module: 'gsd-h5-react',
              attributes: {
                level: '1',
                ':text': '$page.dataset.state.binding.text',
              },
            },
          ],
        },
      ],
      dataset: {
        state: {
          binding: {
            label: 'binding',
            varType: 'state',
            dataType: 'object',
            initialValue: {
              text: '绑定的文本数据',
            },
          },
        },
      },
    },
  ],
};

export const classBinding: IApp = {
  name: 'demo_app',
  description: '测试应用',
  main: 'index',
  items: [
    {
      type: 'PAGE',
      id: 'index',
      component: 'page',
      items: [
        {
          id: '0',
          component: 'Text',
          module: 'gsd-h5-react',
          attributes: {
            level: '1',
            text: 'class属性',
          },
          directives: { ':if': true },
        },
        {
          id: '1',
          component: 'Text',
          module: 'gsd-h5-react',
          attributes: {
            level: '1',
            text: 'static multiStatic',
            class: 'static multiStatic',
          },
        },
        {
          id: '2',
          component: 'Text',
          module: 'gsd-h5-react',
          attributes: {
            level: '1',
            text: 'dynamic',
          },
          ':class': '$page.dataset.state.class',
        },
        {
          id: '3',
          component: 'Text',
          module: 'gsd-h5-react',
          attributes: {
            level: '1',
            text: 'static with multi dynamic',
            class: 'withStatic',
          },
          ':class': '["multiDynamic","withDynamic"]',
        },
      ],
      dataset: {
        state: {
          class: {
            label: 'class',
            varType: 'state',
            dataType: 'string',
            initialValue: 'dynamic',
          },
        },
      },
    },
  ],
};

export const styleBinding: IApp = {
  name: 'demo_app',
  description: '测试应用',
  main: 'index',
  items: [
    {
      type: 'PAGE',
      id: 'index',
      component: 'page',
      items: [
        {
          id: '0',
          component: 'Text',
          module: 'gsd-h5-react',
          attributes: {
            level: '1',
            text: 'style属性',
          },
          directives: { ':if': true },
        },
        {
          id: '1',
          component: 'Container',
          module: 'gsd-h5-react',
          attributes: {
            title: 'static',
            style: {
              background: 'red',
            },
          },
          extra: {
            commonStyle: {
              background: {
                bgType: 'color',
                color: 'blue',
              },
            },
          },
        },
        {
          id: '1.5',
          component: 'Container',
          module: 'gsd-h5-react',
          attributes: {
            title: 'static commonStyle',
          },
          extra: {
            commonStyle: {
              background: {
                bgType: 'color',
                color: 'red',
              },
            },
          },
        },
        {
          id: '2',
          component: 'Container',
          module: 'gsd-h5-react',
          attributes: {
            title: 'dynamic',
          },
          ':style': '{background: "red"}',
        },
        {
          id: '3',
          component: 'Container',
          module: 'gsd-h5-react',
          attributes: {
            title: 'static with multi dynamic',
            style: {
              background: 'blue',
              borderColor: 'red',
            },
          },
          ':style': '$page.dataset.state.style',
        },
      ],
      dataset: {
        state: {
          style: {
            label: 'style',
            varType: 'state',
            dataType: 'object',
            initialValue: {
              position: 'absolute',
              background: 'red',
            },
          },
        },
      },
    },
  ],
};

export const ifBinding: IApp = {
  name: 'demo_app',
  description: '测试应用',
  main: 'index',
  items: [
    {
      type: 'PAGE',
      id: 'index',
      component: 'page',
      items: [
        {
          id: '0',
          component: 'Text',
          module: 'gsd-h5-react',
          attributes: {
            level: '1',
            text: '基础条件绑定',
          },
          directives: { ':if': true },
        },
        {
          id: '1',
          component: 'Text',
          module: 'gsd-h5-react',
          attributes: {
            level: '1',
            text: '动态不显示',
          },
          directives: {
            ':if': '$page.dataset.state.visible',
          },
        },
        {
          id: '2',
          component: 'Text',
          module: 'gsd-h5-react',
          attributes: {
            level: '1',
            text: '动态显示',
          },
          directives: {
            ':if': '!$page.dataset.state.visible',
          },
        },
        {
          id: '3',
          component: 'Text',
          module: 'gsd-h5-react',
          attributes: {
            level: '1',
            text: '静态显示',
          },
          directives: {
            ':if': true,
          },
        },
        {
          id: '4',
          component: 'Text',
          module: 'gsd-h5-react',
          attributes: {
            level: '1',
            text: '静态不显示',
          },
          directives: {
            ':if': false,
          },
        },
      ],
      dataset: {
        state: {
          visible: {
            label: 'visible',
            varType: 'state',
            dataType: 'boolean',
            initialValue: false,
          },
        },
      },
    },
  ],
};

export const swiperForBinding: IApp = {
  name: 'demo_app',
  description: '测试应用',
  main: 'index',
  items: [
    {
      type: 'PAGE',
      id: 'index',
      component: 'page',
      items: [
        {
          id: '0',
          component: 'Text',
          module: 'gsd-h5-react',
          attributes: {
            level: '1',
            text: 'swiper测试',
          },
          directives: { ':if': true },
        },
        {
          id: 'id1',
          module: 'gsd-h5-react',
          component: 'Swiper',
          attributes: {
            autoplay: true,
            circular: true,
            current: 0,
            duration: 500,
            indicatorActiveColor: 'rgba(0, 0, 0, 0.9)',
            indicatorColor: 'rgba(200, 200, 200, 0.9)',
            indicatorDots: true,
            interval: 5000,
            vertical: false,
          },
          items: [
            {
              id: 'id2',
              module: 'gsd-h5-react',
              component: 'Image',
              attributes: {
                ':alt': '$for.id2',
                fit: 'cover',
                imgPreview: '',
                lazyLoad: false,
                maskClosable: true,
                mode: 'heightFix',
                showMenuByLongpress: '',
                ':src': '$for.id2',
              },
              directives: {
                ':for':
                  "id2 in ['https://main.qcloudimg.com/raw/828ee6644f137d166b063ad7f5dda842.png','https://main.qcloudimg.com/raw/880b5277dc7d8f62fd6b5f964bee3af4.png','https://main.qcloudimg.com/raw/af8d7dff73fea17aa099876bc3a811fa.png']",
              },
              extra: {
                commonStyle: {
                  size: { width: '100%', height: '320' },
                },
                xIndex: 0,
              },
            },
          ],
          directives: { ':if': true },
          extra: { xIndex: 0 },
        },
      ],
      dataset: {
        state: {},
      },
    },
  ],
};

export const forBinding: IApp = {
  name: 'demo_app',
  description: '测试应用',
  main: 'index',
  items: [
    {
      type: 'PAGE',
      id: 'index',
      component: 'page',
      items: [
        {
          id: '0',
          component: 'Text',
          module: 'gsd-h5-react',
          attributes: {
            level: '1',
            text: '基础绑定测试',
          },
          directives: { ':if': true },
        },
        {
          id: 'id9',
          module: 'gsd-h5-react',
          component: 'Container',
          attributes: { title: 'card-containe', class: 'card-container' },
          items: [
            {
              id: 'id11',
              module: 'gsd-h5-react',
              component: 'Image',
              attributes: {
                alt: '[图片]',
                fit: 'cover',
                imgPreview: false,
                lazyLoad: false,
                maskClosable: true,
                mode: 'scaleToFill',
                showMenuByLongpress: '',
                ':src': '$for.id9.imageUrl',
              },
              directives: { ':if': true },
              extra: {
                commonStyle: {
                  size: { width: '100%', height: '360' },
                  custom: [],
                },
                xIndex: 0,
                staticResourceAttribute: ['src'],
              },
            },
            {
              id: 'id12',
              module: 'gsd-h5-react',
              component: 'Container',
              attributes: { title: '' },
              items: [
                {
                  id: 'id14',
                  module: 'gsd-h5-react',
                  component: 'Container',
                  attributes: { title: '' },
                  items: [
                    {
                      id: 'id16',
                      module: 'gsd-h5-react',
                      component: 'Image',
                      attributes: {
                        alt: '[图片]',
                        fit: 'cover',
                        imgPreview: false,
                        lazyLoad: false,
                        maskClosable: true,
                        mode: 'scaleToFill',
                        ':src': '$for.id9.avatar',
                      },
                      directives: { ':if': true },
                      extra: {
                        commonStyle: {
                          self: { width: '60', height: '60' },
                          size: { width: '60', height: '60' },
                        },
                        xIndex: 0,
                        staticResourceAttribute: ['src'],
                      },
                    },
                    {
                      id: 'id17',
                      module: 'gsd-h5-react',
                      component: 'Text',
                      attributes: {
                        maxLines: 1,
                        space: false,
                        ':text': '$for.id9.userName',
                        userSelect: true,
                      },
                      directives: { ':if': true },
                      extra: {
                        commonStyle: {
                          self: {
                            maxWidth: '280px',
                            fontFamily: '"PingFang SC"',
                            whiteSpace: 'pre-line',
                          },
                          text: {
                            color: 'rgb(0, 0, 0)',
                            weight: '400',
                            opacity: 60.00000238418579,
                            fontSize: '24',
                          },
                          custom: [],
                          margin: { left: '24' },
                          maxWidth: '280',
                          fontFamily: '"PingFang SC"',
                          whiteSpace: 'pre-line',
                        },
                        xIndex: 1,
                      },
                    },
                  ],
                  directives: { ':if': true },
                  extra: {
                    commonStyle: {
                      custom: [],
                      display: 'flex',
                      flexConfig: { alignItems: 'center' },
                    },
                    xIndex: 0,
                  },
                },
                {
                  id: 'id15',
                  module: 'gsd-h5-react',
                  component: 'Container',
                  attributes: { title: '' },
                  items: [
                    {
                      id: 'id19',
                      module: 'gsd-h5-react',
                      component: 'Text',
                      attributes: {
                        maxLines: 1,
                        space: false,
                        ':text': '$for.id9.like',
                        userSelect: true,
                      },
                      directives: { ':if': true },
                      extra: {
                        commonStyle: {
                          self: {
                            maxWidth: '180px',
                            fontFamily: '"PingFang SC"',
                            whiteSpace: 'pre-line',
                          },
                          text: {
                            color: 'rgb(0, 0, 0)',
                            weight: '400',
                            opacity: 60.00000238418579,
                            fontSize: '24',
                          },
                          custom: [],
                          maxWidth: '180',
                          position: {
                            bottom: '6',
                            position: 'relative',
                          },
                          fontFamily: '"PingFang SC"',
                          whiteSpace: 'pre-line',
                        },
                        xIndex: 1,
                      },
                    },
                  ],
                  directives: { ':if': true },
                  extra: {
                    commonStyle: {
                      custom: [],
                      display: 'flex',
                      flexConfig: { alignItems: 'center' },
                    },
                    xIndex: 1,
                  },
                },
              ],
              directives: { ':if': true },
              extra: {
                commonStyle: {
                  custom: [],
                  margin: {
                    top: '0',
                    left: '16',
                    right: '16',
                    bottom: '24',
                  },
                  display: 'flex',
                  flexConfig: { justifyContent: 'space-between' },
                },
                xIndex: 2,
              },
            },
            {
              id: 'id13',
              module: 'gsd-h5-react',
              component: 'Text',
              attributes: {
                maxLines: 1,
                space: false,
                ':text': '$for.id9.title',
                userSelect: true,
              },
              directives: { ':if': true },
              extra: {
                commonStyle: {
                  self: { fontFamily: '"PingFang SC"' },
                  text: {
                    color: 'rgba(0, 0, 0, 0.9)',
                    weight: '500',
                    opacity: 100,
                    fontSize: '32',
                  },
                  custom: [],
                  margin: {
                    top: '24',
                    left: '16',
                    right: '16',
                    bottom: '24',
                  },
                  fontFamily: '"PingFang SC"',
                },
                xIndex: 1,
              },
            },
          ],
          directives: {
            ':for': 'id9 in $page.dataset.state.cardList',
          },
          extra: {
            commonStyle: {
              self: { flexGrow: '1' },
              size: { width: '656', height: '540' },
              custom: [],
              flexGrow: '1',
            },
            xIndex: 0,
          },
        },
      ],
      dataset: {
        state: {
          cardList: {
            label: 'cardList',
            varType: 'state',
            dataType: 'array',
            initialValue: [
              {
                like: '456',
                title: '北京向南·河南向北·假期自驾北京·保定',
                avatar:
                  'https://main.qcloudimg.com/raw/47084d09196fcbb8570a45ad73d0cfc3.png',
                imageUrl:
                  'https://main.qcloudimg.com/raw/73515abe0ba6ced28d3045cc77414895.png',
                userName: '甜甜圈',
              },
              {
                like: '1136',
                title: '北京周边的打卡地～太舞小镇',
                avatar:
                  'https://main.qcloudimg.com/raw/eb9ba2e28859b087ad5e1a71b5743d75.png',
                imageUrl:
                  'https://main.qcloudimg.com/raw/178c359c5788447ec13c4420ed1e6439.png',
                userName: '山今宿',
              },
            ],
          },
        },
      },
    },
  ],
};

export const dataContainerBinding: IApp = {
  name: 'demo_app',
  description: '测试应用',
  main: 'index',
  items: [
    {
      type: 'PAGE',
      id: 'index',
      component: 'page',
      items: [
        {
          id: 'id56',
          component: 'ListView',
          module: 'gsd-h5-react',
          attributes: {
            datasource: {
              name: 'customer',
              type: 'datamodal',
              extra: {
                params: {},
                viewId: 'view-2oameaoqk0',
                methodName: 'wedaGetRecords',
              },
            },
            orderType: 'asc',
            where: [{}],
          },
          items: [
            {
              id: 'id58',
              component: 'Container',
              module: 'gsd-h5-react',
              attributes: {},
              items: [
                {
                  id: 'id59',
                  component: 'Container',
                  attributes: {},
                  module: 'gsd-h5-react',
                  items: [
                    {
                      id: 'id60',
                      component: 'Container',
                      module: 'gsd-h5-react',
                      attributes: {},
                      items: [
                        {
                          id: 'id61',
                          component: 'Text',
                          module: 'gsd-h5-react',
                          attributes: {
                            maxLines: 1,
                            ':text': '$for.id58.updatedAt',
                          },
                          extra: {
                            commonStyle: {
                              self: {
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                WebkitBoxOrient: 'vertical',
                                WebkitLineClamp: '1',
                              },
                              size: {
                                width: 'auto',
                              },
                              text: {
                                color: 'rgba(0, 0, 0, 0.9)',
                                weight: '600',
                                lineHeight: '20PX',
                              },
                              custom: [],
                              display: '-webkit-box',
                              overflow: 'hidden',
                              textOverflow: 'ellipsis',
                              WebkitBoxOrient: 'vertical',
                              WebkitLineClamp: '1',
                            },
                            xIndex: 0,
                          },
                        },
                        {
                          id: 'id62',
                          component: 'Text',
                          module: 'gsd-h5-react',
                          attributes: {
                            maxLines: 1,
                            text: '这是简单列表内容。',
                            textColor: 'rgb(0, 0,0)',
                          },
                          extra: {
                            commonStyle: {
                              self: {
                                overflow: 'hidden',
                                textOverflow: 'ellipsis',
                                WebkitBoxOrient: 'vertical',
                                WebkitLineClamp: '2',
                              },
                              size: {
                                width: 'auto',
                              },
                              text: {
                                color: 'rgba(0, 0, 0, 0.4)',
                                opacity: 40,
                                fontSize: '12PX',
                                lineHeight: '20PX',
                              },
                              custom: [],
                              margin: {
                                top: '12PX',
                              },
                              display: '-webkit-box',
                              overflow: 'hidden',
                              textOverflow: 'ellipsis',
                              WebkitBoxOrient: 'vertical',
                              WebkitLineClamp: '2',
                            },
                            xIndex: 1,
                          },
                        },
                      ],
                      extra: {
                        commonStyle: {
                          flex: '1',
                          self: {
                            flex: '1',
                            wordBreak: 'break-all',
                          },
                          text: {
                            fontSize: '16PX',
                          },
                          custom: [],
                          wordBreak: 'break-all',
                        },
                        xIndex: 0,
                      },
                    },
                  ],
                  extra: {
                    commonStyle: {
                      self: {
                        boxSizing: 'border-box',
                      },
                      size: {
                        width: '100%',
                      },
                      custom: [],
                      display: 'flex',
                      position: {
                        position: 'relative',
                      },
                      boxSizing: 'border-box',
                      flexConfig: {
                        alignItems: 'center',
                      },
                    },
                    xIndex: 0,
                  },
                },
              ],
              directives: {
                ':for': 'id58 in $context.id56.data',
              },
              extra: {
                commonStyle: {
                  self: {
                    boxSizing: 'border-box',
                    borderBottom: '1px dashed #acacac',
                  },
                  size: {
                    width: '100%',
                  },
                  custom: [],
                  padding: {
                    top: '15PX',
                    left: '19PX',
                    right: '18PX',
                    bottom: '14PX',
                  },
                  position: {
                    position: 'relative',
                  },
                  boxSizing: 'border-box',
                  background: {
                    color: 'rgb(255, 255, 255)',
                    bgType: 'color',
                  },
                  borderBottom: '1px dashed #acacac',
                },
                xIndex: 1,
              },
            },
          ],
        },
      ],
    },
  ],
};

export const selectableBlock: IApp = {
  name: 'demo_app',
  description: '测试应用',
  main: 'index',
  items: [
    {
      type: 'PAGE',
      id: 'index',
      component: 'page',
      items: [
        {
          id: 'id14',
          component: 'ModelTable',
          module: 'CLOUDBASE_BUSSINESS',
          attributes: {
            bindMetadata: {
              t: 1645522775672,
              datasource: {
                id: 'data-1PtJ1mwmK',
                name: 'zachsjmxcs_p81v4ay',
                title: 'zach数据模型测试',
              },
              enabledFieldNames: [
                'owner',
                'createdAt',
                'createBy',
                'updateBy',
                '_departmentList',
                '_id',
                'bm',
                'type',
                'updatedAt',
              ],
              disabledFieldNames: [],
            },
            buttons: [
              {
                show: true,
                text: '新建',
                type: 'primary',
                action: 'create',
                loading: false,
                tooltip: '',
                disabled: false,
                htmlType: 'button',
              },
              {
                show: true,
                text: '删除',
                type: 'weak',
                action: 'del',
                loading: false,
                tooltip: '',
                disabled: false,
                htmlType: 'button',
              },
              {
                show: true,
                text: '导出',
                type: 'weak',
                action: 'export',
                loading: false,
                tooltip: '',
                disabled: false,
                htmlType: 'button',
                selectableBlock: {
                  id: 2,
                  component: 'modeltable',
                  module: 'cloudbase_bussiness',
                  attributes: {},
                  extra: {},
                },
              },
              {
                show: true,
                text: '按钮标题',
                type: 'primary',
                action: 'custom',
                loading: false,
                tooltip: '',
                disabled: false,
                htmlType: 'button',
                selectableBlock: {
                  id: 3,
                  component: 'modeltable',
                  module: 'cloudbase_bussiness',
                  attributes: {},
                  listeners: [
                    {
                      id: 'wag0h3qlt07g',
                      eventName: 'tap',
                      type: 'platform',
                      handler: {
                        name: 'showModal',
                        module: 'platform',
                        params: {
                          cancelColor: '#000000',
                          cancelText: '取消',
                          confirmColor: '#576B95',
                          confirmText: '确认',
                          content: '请输入弹窗内容',
                          showCancel: true,
                          title: '弹窗标题',
                        },
                      },
                      isCapturePhase: false,
                    },
                  ],
                  extra: {},
                },
              },
            ],
            settings: [
              {
                show: true,
                text: '查看',
                type: 'link',
                action: 'retrieve',
                loading: false,
                tooltip: '',
                disabled: false,
                htmlType: 'button',
              },
              {
                show: true,
                text: '编辑',
                type: 'link',
                action: 'edit',
                loading: false,
                tooltip: '',
                disabled: false,
                htmlType: 'button',
                selectableBlock: {
                  id: 1,
                  component: 'modeltable',
                  module: 'cloudbase_bussiness',
                  attributes: {},
                  extra: {},
                },
              },
              {
                show: true,
                text: '删除',
                type: 'link',
                action: 'del',
                loading: false,
                tooltip: '',
                disabled: false,
                htmlType: 'button',
              },
              {
                show: true,
                text: '按钮标题',
                type: 'link',
                action: 'custom',
                loading: false,
                tooltip: '',
                disabled: false,
                htmlType: 'button',
                selectableBlock: {
                  id: 3,
                  component: 'modeltable',
                  module: 'cloudbase_bussiness5',
                  attributes: {},
                  listeners: [
                    {
                      id: 'waf4lfuu17bg',
                      eventName: 'tap',
                      type: 'platform',
                      handler: {
                        name: 'showModal',
                        module: 'platform',
                        params: {
                          cancelColor: '#000000',
                          cancelText: '取消',
                          confirmColor: '#576B95',
                          confirmText: '确认',
                          content: '请输入弹窗内容',
                          showCancel: true,
                          title: '弹窗标题',
                        },
                      },
                      isCapturePhase: false,
                    },
                  ],
                  extra: {},
                },
              },
            ],
          },
          extra: {
            xIndex: 0,
            attributeExtraData: {},
          },
        },
      ],
    },
  ],
};
