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

export const lowCodeCals: IApp = {
  label: 'test-render-lowcode1',
  main: 'index',
  items: [
    {
      id: 'index',
      type: EComponentType.PAGE,
      component: 'Page',
      attributes: {
        navigationBarTitleText: '空白页',
        title: '空白页',
      },
      items: [
        {
          id: 'id3',
          module: 'gsd-h5-react',
          component: 'Container',
          attributes: {
            class: 'text-container',
          },
          items: [
            {
              id: 'id1',
              module: 'gsd-h5-react',
              component: 'Text',
              attributes: {
                ':text': '$for.id1',
                userSelect: true,
                class: 'my-text',
              },
              directives: {
                ':for': 'id1 in $page.dataset.state.list',
              },
            },
          ],
        },
        {
          id: 'id4',
          module: 'gsd-h5-react',
          component: 'Button',
          attributes: {
            text: '正序',
          },
          listeners: [
            {
              eventName: 'tap',
              type: 'rematch',
              handler: {
                name: 'clickHandler',
                module: 'index',
                params: {
                  target: 'esc',
                },
              },
              isCapturePhase: false,
            },
          ],
        },
        {
          id: 'id5',
          module: 'gsd-h5-react',
          component: 'Button',
          attributes: {
            text: '倒序',
          },
          listeners: [
            {
              eventName: 'tap',
              type: 'rematch',
              handler: {
                name: 'clickHandler',
                module: 'index',
                params: {
                  target: 'desc',
                },
              },
              isCapturePhase: false,
            },
          ],
        },
      ],
      resources: [
        {
          code: `

    /**
     * 可以使用theme中定义的 mixin 和 定义变量
     **/


.text-container{
  .my-text{
    background:blue;
  }
}
`,
          name: 'style',
          path: 'index/style',
          type: 'CODE',
          codeType: 'style',
        },
        {
          code: `
export default {
  onPageLoad(query) {
    $page.dataset.state.list = ['1','2','3'];
    // console.log('---------> LifeCycle onPageLoad', query)
  },
  onPageShow() {
    //console.log('---------> LifeCycle onPageShow')
  },
  onPageReady() {
    //console.log('---------> LifeCycle onPageReady')
  },
  onPageHide() {
    //console.log('---------> LifeCycle onPageHide')
  },
  onPageUnload() {
    //console.log('---------> LifeCycle onPageUnload')
  },
}`,
          name: 'lifecycle',
          path: 'index/lifecycle',
          type: 'CODE',
          codeType: 'lifecycle',
        },
        {
          code: `
/*
* 可通过 $page.handler.xxx 访问这里定义的方法
* 注意：该方法仅在所属的页面有效
* 如果需要 async-await，请修改成 export default async function() {}
*/

export default function({event, data}) {
    // console.log('data.target', data.target);
    switch(data.target){
        case 'esc':
            $page.dataset.state.list = ['1','2','3'];
        break;
        case 'desc':
            $page.dataset.state.list = ['3','2','1'];
        break;
    }
}`,
          name: 'clickHandler',
          path: 'index/handler/clickHandler',
          type: 'CODE',
          codeType: 'handler-fn',
        },
      ],
      dataset: {
        state: {
          list: {
            label: 'list',
            varType: 'state',
            dataType: 'array',
            initialValue: [],
          },
        },
      },
      extra: {},
    },
  ],
  resources: [],
  dataSources: [],
  extra: {
    npmDependencies: {},
    plugins: [],
    rootPath: '',
    miniprogramPlugins: [],
    domain: 'lowcode-9gp4s7rgac0cab5b-1300023789.tcloudbaseapp.com',
  },
};
