import * as React from 'react';
import { observer } from 'mobx-react-lite';
import { observable, autorun, reaction, runInAction } from 'mobx';
import { AppRender } from '/src/handlers/RenderWrapper';
import {
  createWidgets,
  retryDataBinds,
  WidgetsContext,
  bindFuncObj,
  createComputed,
  resolveComponentProps,
} from '/src/utils/index';
import getStateFn from './lowcode/state.js';
import computed from './lowcode/computed.js';
import lifecycle from './lowcode/lifecycle.js';
// import i18n from '@tcwd/weapps-sdk/lib/i18n'

import componentAPI from './lowcode/index';
import { get } from 'lodash-es';

import handler$onClick from './lowcode/handler/onClick.js';

// Import Components outof sandbox

import gsdH5React from '/src/libraries/gsd-h5-react@0.0.70/web/index.js';
const { Text: GsdH5ReactText } = gsdH5React.components;

const { Container: GsdH5ReactContainer } = gsdH5React.components;

import CLOUDBASESTANDARDIcon from '/src/libraries/CLOUDBASE_STANDARD@1634202837896/components/Icon';

import CLOUDBASESTANDARDDivider from '/src/libraries/CLOUDBASE_STANDARD@1634202837896/components/Divider';

import * as constObj from '../../libCommonRes/const';
import * as toolsObj from '../../libCommonRes/tools';

import './lowcode/style.css';

const libCode = 'CLOUDBASE_STANDARD';

class CompositeCompWrapper extends React.Component {
  $WEAPPS_COMP = {};

  componentDidUpdate() {
    runInAction(() => {
      const { data } = this.props;
      for (let prop in data) {
        // 更新 propsData
        if (typeof data[prop] !== 'function') {
          this.propsData[prop] = data[prop];
        }
      }
    });
  }

  constructor(props) {
    super(props);

    this.compConfig = {};

    // Import Components in sandbox

    this.virtualFields = Object.assign({}, props.pageVirtualFields || {}, {
      'gsd-h5-react:Text': (props) => (
        <GsdH5ReactText {...resolveComponentProps(props, 1)} />
      ),

      'gsd-h5-react:Container': (props) => (
        <GsdH5ReactContainer {...resolveComponentProps(props, 1)} />
      ),

      'CLOUDBASE_STANDARD:Icon': (props) => (
        <CLOUDBASESTANDARDIcon {...resolveComponentProps(props, 0)} />
      ),

      'CLOUDBASE_STANDARD:Divider': (props) => (
        <CLOUDBASESTANDARDDivider {...resolveComponentProps(props, 0)} />
      ),
    });

    // 挂载给到 $comp.props.events 使用
    this.events = ['onClick'].reduce((obj, trigger) => {
      obj[trigger] = (eventData, domEvent) => {
        this.props.emit(trigger, eventData, domEvent);
        this.node._listeners &&
          this.node._listeners.emit(trigger, eventData, domEvent);
      };
      return obj;
    }, {});
    this.handler = this.$WEAPPS_COMP.handler = {
      onClick: handler$onClick.bind(this),
    };
    const widgetContext = {
      id16: {
        space: false,
        maxLines: 10,
        userSelect: true,
        _visible: true,
        style: {},
        classList: ['gsd-h5-react-busi-point-title-text'],
        widgetType: 'gsd-h5-react:Text',
        _parentId: 'id17',
      },
      id17: {
        title: '',
        _visible: true,
        style: {},
        classList: ['gsd-h5-react-busi-text-content-crosswise'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id5',
      },
      id13: {
        space: false,
        maxLines: 10,
        userSelect: true,
        _visible: true,
        style: {
          whiteSpace: 'pre-line',
        },
        classList: ['gsd-h5-react-busi-point-des-text'],
        widgetType: 'gsd-h5-react:Text',
        _parentId: 'id18',
      },
      id18: {
        title: '',
        _visible: true,
        style: {},
        classList: ['gsd-h5-react-busi-text-content-crosswise'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id5',
      },
      id15: {
        space: false,
        maxLines: 20,
        userSelect: true,
        _visible: true,
        style: {
          whiteSpace: 'pre-line',
        },
        classList: ['gsd-h5-react-busi-point-remark-text'],
        widgetType: 'gsd-h5-react:Text',
        _parentId: 'id20',
      },
      id20: {
        title: '',
        style: {},
        classList: ['gsd-h5-react-busi-text-content-crosswise'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id5',
      },
      id5: {
        title: '',
        _visible: true,
        style: {},
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id12',
      },
      id11: {
        title: '',
        style: {
          width: '100%',
        },
        classList: ['gsd-h5-react-busi-point-devider-crosswise'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id19',
      },
      id4: {
        name: 'success',
        size: 48,
        color: '',
        style: {},
        classList: [],
        widgetType: 'CLOUDBASE_STANDARD:Icon',
        _parentId: 'id21',
      },
      id70: {
        title: '',
        style: {},
        classList: ['gsd-h5-react-busi-point-solid-content'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id21',
      },
      id21: {
        title: '',
        _visible: true,
        style: {},
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id19',
      },
      id19: {
        title: '',
        style: {},
        classList: ['gsd-h5-react-busi-point-unit-content-crosswise'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id12',
      },
      id31: {
        name: 'success',
        size: 48,
        color: '',
        style: {},
        classList: [],
        widgetType: 'CLOUDBASE_STANDARD:Icon',
        _parentId: 'id29',
      },
      id63: {
        title: '',
        style: {},
        classList: ['gsd-h5-react-busi-point-solid-content'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id29',
      },
      id29: {
        title: '',
        _visible: true,
        style: {},
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id28',
      },
      id30: {
        title: '',
        style: {
          width: '100%',
        },
        classList: ['gsd-h5-react-busi-point-devider-crosswise'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id28',
      },
      id28: {
        title: '',
        style: {
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          flexDirection: 'row',
        },
        classList: ['gsd-h5-react-busi-point-unit-content-crosswise'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id12',
      },
      id60: {
        space: false,
        maxLines: 10,
        userSelect: true,
        _visible: true,
        style: {
          bottom: '0',
          whiteSpace: 'pre-line',
        },
        classList: ['gsd-h5-react-busi-point-remark-text'],
        widgetType: 'gsd-h5-react:Text',
        _parentId: 'id59',
      },
      id59: {
        title: '',
        style: {
          height: '2.4286rem',
          marginLeft: '0.2857rem',
          display: 'flex',
          alignItems: 'flex-end',
          flexWrap: 'nowrap',
        },
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id12',
      },
      id12: {
        title: '',
        _visible: true,
        style: {
          width: '100%',
        },
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id10',
      },
      id10: {
        title: '',
        style: {
          width: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'column',
        },
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id33',
      },
      id33: {
        title: '',
        style: {},
        classList: ['gsd-h5-react-busi-com-content-crosswise'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id72',
      },
      id47: {
        name: 'success',
        size: 48,
        color: '',
        style: {},
        classList: [],
        widgetType: 'CLOUDBASE_STANDARD:Icon',
        _parentId: 'id45',
      },
      id69: {
        title: '',
        style: {},
        classList: ['gsd-h5-react-busi-point-solid-content'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id45',
      },
      id45: {
        title: '',
        _visible: true,
        style: {},
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id42',
      },
      id48: {
        _visible: true,
        style: {},
        classList: ['gsd-h5-react-busi-point-devider-lengthways'],
        widgetType: 'CLOUDBASE_STANDARD:Divider',
        _parentId: 'id46',
      },
      id46: {
        title: '',
        style: {
          height: '100%',
        },
        classList: ['.gsd-h5-react-busi-point-devider'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id42',
      },
      id42: {
        title: '',
        style: {
          marginTop: '0.3571rem',
        },
        classList: ['gsd-h5-react-busi-point-unit-content-lengthways'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id41',
      },
      id52: {
        space: false,
        maxLines: 10,
        userSelect: true,
        _visible: true,
        style: {
          whiteSpace: 'pre-line',
        },
        classList: ['gsd-h5-react-busi-point-title-text'],
        widgetType: 'gsd-h5-react:Text',
        _parentId: 'id49',
      },
      id49: {
        title: '',
        _visible: true,
        style: {},
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id43',
      },
      id53: {
        space: false,
        maxLines: 10,
        userSelect: true,
        _visible: true,
        style: {
          whiteSpace: 'pre-line',
        },
        classList: ['gsd-h5-react-busi-point-des-text'],
        widgetType: 'gsd-h5-react:Text',
        _parentId: 'id50',
      },
      id50: {
        title: '',
        _visible: true,
        style: {},
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id43',
      },
      id54: {
        space: false,
        maxLines: 10,
        userSelect: true,
        _visible: true,
        style: {
          whiteSpace: 'pre-line',
        },
        classList: ['gsd-h5-react-busi-point-remark-text'],
        widgetType: 'gsd-h5-react:Text',
        _parentId: 'id51',
      },
      id51: {
        title: '',
        style: {},
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id43',
      },
      id43: {
        title: '',
        _visible: true,
        style: {
          marginBottom: '1.4286rem',
        },
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id41',
      },
      id57: {
        name: 'success',
        size: 48,
        color: '',
        style: {},
        classList: [],
        widgetType: 'CLOUDBASE_STANDARD:Icon',
        _parentId: 'id55',
      },
      id71: {
        title: '',
        style: {},
        classList: ['gsd-h5-react-busi-point-solid-content'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id55',
      },
      id55: {
        title: '',
        _visible: true,
        style: {},
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id44',
      },
      id58: {
        _visible: true,
        style: {},
        classList: ['gsd-h5-react-busi-point-devider-lengthways'],
        widgetType: 'CLOUDBASE_STANDARD:Divider',
        _parentId: 'id56',
      },
      id56: {
        title: '',
        style: {
          height: '100%',
        },
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id44',
      },
      id44: {
        title: '',
        style: {},
        classList: ['gsd-h5-react-busi-point-unit-content-lengthways'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id41',
      },
      id62: {
        space: false,
        maxLines: 10,
        userSelect: true,
        _visible: true,
        style: {},
        classList: ['gsd-h5-react-busi-point-remark-text'],
        widgetType: 'gsd-h5-react:Text',
        _parentId: 'id61',
      },
      id61: {
        title: '',
        style: {},
        classList: ['gsd-h5-react-busi-lengthways-side-remark'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id41',
      },
      id41: {
        title: '',
        _visible: true,
        style: {
          display: 'flex',
        },
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id40',
      },
      id40: {
        title: '',
        style: {},
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id37',
      },
      id37: {
        title: '',
        style: {},
        classList: ['gsd-h5-react-busi-text-content'],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id72',
      },
      id72: {
        title: '',
        style: {},
        classList: [],
        widgetType: 'gsd-h5-react:Container',
        _parentId: 'id1',
      },
      id1: {
        title: '',
        _visible: true,
        style: {},
        classList: [],
        widgetType: 'gsd-h5-react:Container',
      },
    };
    const dataBinds = (this._dataBinds = {
      id16: {
        text: (forItems) => {
          const $for = forItems;
          return $for.id10[this.$WEAPPS_COMP.props.data.titleValue];
        },
        style: (forItems) => {
          const $for = forItems;
          return $for.id10.hightLight == true
            ? {
                color: this.$WEAPPS_COMP.props.data.titleFontColor,
                'font-size': this.$WEAPPS_COMP.props.data.titleFontSize,
              }
            : '';
        },
      },
      id13: {
        text: (forItems) => {
          const $for = forItems;
          return $for.id10[this.$WEAPPS_COMP.props.data.descriptionValue];
        },
        style: (forItems) => {
          const $for = forItems;
          return $for.id10.hightLight == true
            ? {
                color: this.$WEAPPS_COMP.props.data.descriptionFontColor,
                'font-size': this.$WEAPPS_COMP.props.data.descriptionFontSize,
              }
            : '';
        },
      },
      id15: {
        text: (forItems) => {
          const $for = forItems;
          return $for.id10[this.$WEAPPS_COMP.props.data.remarkValue];
        },
        style: (forItems) => {
          const $for = forItems;
          return $for.id10.hightLight == true
            ? {
                color: this.$WEAPPS_COMP.props.data.remarkFontColor,
                'font-size': this.$WEAPPS_COMP.props.data.remarkFontSize,
              }
            : '';
        },
      },
      id20: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.acceptTypes == 'crosswiseTextTop' ||
            this.$WEAPPS_COMP.props.data.acceptTypes == 'crosswiseTextDown'
          );
        },
      },
      id11: {
        _visible: (forItems) => {
          const $for = forItems;
          return !(
            $for.id10[this.$WEAPPS_COMP.props.data.pointIdValue] ==
            this.$WEAPPS_COMP.props.data.showList[
              this.$WEAPPS_COMP.props.data.showList.length - 1
            ][this.$WEAPPS_COMP.props.data.pointIdValue]
          );
        },
      },
      id4: {
        src: (forItems) => {
          const $for = forItems;
          return $for.id10[this.$WEAPPS_COMP.props.data.iconValue];
        },
        _visible: (forItems) => {
          const $for = forItems;
          return !(
            this.$WEAPPS_COMP.props.data.pointType == 'solidType' ||
            this.$WEAPPS_COMP.props.data.pointType == 'outlineType'
          );
        },
      },
      id70: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.pointType == 'solidType' ||
            this.$WEAPPS_COMP.props.data.pointType == 'outlineType'
          );
        },
        style: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.pointType == 'solidType'
            ? {
                background: $for.id10.pointColor
                  ? $for.id10.pointColor
                  : '#C5C5C5',
                'border-color': $for.id10.pointColor
                  ? $for.id10.pointColor
                  : '#C5C5C5',
              }
            : {
                'border-color': $for.id10.pointColor
                  ? $for.id10.pointColor
                  : '#C5C5C5',
              };
        },
      },
      id19: {
        _visible: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.acceptTypes == 'crosswiseTextTop';
        },
      },
      id31: {
        src: (forItems) => {
          const $for = forItems;
          return $for.id10[this.$WEAPPS_COMP.props.data.iconValue];
        },
        _visible: (forItems) => {
          const $for = forItems;
          return !(
            this.$WEAPPS_COMP.props.data.pointType == 'solidType' ||
            this.$WEAPPS_COMP.props.data.pointType == 'outlineType'
          );
        },
      },
      id63: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.pointType == 'solidType' ||
            this.$WEAPPS_COMP.props.data.pointType == 'outlineType'
          );
        },
        style: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.pointType == 'solidType'
            ? {
                background: $for.id10.pointColor
                  ? $for.id10.pointColor
                  : '#C5C5C5',
                'border-color': $for.id10.pointColor
                  ? $for.id10.pointColor
                  : '#C5C5C5',
              }
            : {
                'border-color': $for.id10.pointColor
                  ? $for.id10.pointColor
                  : '#C5C5C5',
              };
        },
      },
      id30: {
        _visible: (forItems) => {
          const $for = forItems;
          return !(
            $for.id10[this.$WEAPPS_COMP.props.data.pointIdValue] ==
            this.$WEAPPS_COMP.props.data.showList[
              this.$WEAPPS_COMP.props.data.showList.length - 1
            ][this.$WEAPPS_COMP.props.data.pointIdValue]
          );
        },
      },
      id28: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.acceptTypes == 'crosswiseTextDown' ||
            this.$WEAPPS_COMP.props.data.acceptTypes == 'crosswiseTextSide'
          );
        },
      },
      id60: {
        text: (forItems) => {
          const $for = forItems;
          return $for.id10[this.$WEAPPS_COMP.props.data.remarkValue];
        },
        style: (forItems) => {
          const $for = forItems;
          return $for.id10.hightLight == true
            ? {
                color: this.$WEAPPS_COMP.props.data.remarkFontColor,
                'font-size': this.$WEAPPS_COMP.props.data.remarkFontSize,
              }
            : '';
        },
      },
      id59: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.acceptTypes == 'crosswiseTextSide'
          );
        },
      },
      id10: {
        _waFor: () => this.$WEAPPS_COMP.props.data.showList,
      },
      id33: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.acceptTypes == 'crosswiseTextTop' ||
            this.$WEAPPS_COMP.props.data.acceptTypes == 'crosswiseTextDown' ||
            this.$WEAPPS_COMP.props.data.acceptTypes == 'crosswiseTextSide'
          );
        },
        style: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.acceptTypes == 'crosswiseTextTop'
            ? { 'align-items': 'flex-end' }
            : this.$WEAPPS_COMP.props.data.acceptTypes == 'crosswiseTextDown' ||
              this.$WEAPPS_COMP.props.data.acceptTypes == 'crosswiseTextSide'
            ? { 'align-items': 'flex-start' }
            : '';
        },
      },
      id47: {
        src: (forItems) => {
          const $for = forItems;
          return $for.id40[this.$WEAPPS_COMP.props.data.iconValue];
        },
        _visible: (forItems) => {
          const $for = forItems;
          return !(
            this.$WEAPPS_COMP.props.data.pointType == 'solidType' ||
            this.$WEAPPS_COMP.props.data.pointType == 'outlineType'
          );
        },
      },
      id69: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.pointType == 'solidType' ||
            this.$WEAPPS_COMP.props.data.pointType == 'outlineType'
          );
        },
        style: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.pointType == 'solidType'
            ? {
                background: $for.id40.pointColor
                  ? $for.id40.pointColor
                  : '#C5C5C5',
                'border-color': $for.id40.pointColor
                  ? $for.id40.pointColor
                  : '#C5C5C5',
              }
            : {
                'border-color': $for.id40.pointColor
                  ? $for.id40.pointColor
                  : '#C5C5C5',
              };
        },
      },
      id46: {
        _visible: (forItems) => {
          const $for = forItems;
          return !(
            $for.id40[this.$WEAPPS_COMP.props.data.pointIdValue] ==
            this.$WEAPPS_COMP.props.data.showList[
              this.$WEAPPS_COMP.props.data.showList.length - 1
            ][this.$WEAPPS_COMP.props.data.pointIdValue]
          );
        },
      },
      id42: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.acceptTypes == 'lengthwaysTextRight' ||
            this.$WEAPPS_COMP.props.data.acceptTypes == 'lengthwaysTextSide'
          );
        },
      },
      id52: {
        text: (forItems) => {
          const $for = forItems;
          return $for.id40[this.$WEAPPS_COMP.props.data.titleValue];
        },
        style: (forItems) => {
          const $for = forItems;
          return $for.id40.hightLight == true
            ? {
                color: this.$WEAPPS_COMP.props.data.titleFontColor,
                'font-size': this.$WEAPPS_COMP.props.data.titleFontSize,
              }
            : '';
        },
      },
      id49: {
        classList: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.acceptTypes ==
            'lengthwaysTextLeft' ||
            this.$WEAPPS_COMP.props.data.acceptTypesMP == 'lengthwaysTextLeft'
            ? 'gsd-h5-react-busi-lengthways-left-content-title'
            : ``;
        },
      },
      id53: {
        text: (forItems) => {
          const $for = forItems;
          return $for.id40[this.$WEAPPS_COMP.props.data.descriptionValue];
        },
        style: (forItems) => {
          const $for = forItems;
          return $for.id40.hightLight == true
            ? {
                color: this.$WEAPPS_COMP.props.data.descriptionFontColor,
                'font-size': this.$WEAPPS_COMP.props.data.descriptionFontSize,
              }
            : '';
        },
      },
      id50: {
        classList: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.acceptTypes ==
            'lengthwaysTextLeft' ||
            this.$WEAPPS_COMP.props.data.acceptTypesMP == 'lengthwaysTextLeft'
            ? 'gsd-h5-react-busi-lengthways-left-content-title'
            : ``;
        },
      },
      id54: {
        text: (forItems) => {
          const $for = forItems;
          return $for.id40[this.$WEAPPS_COMP.props.data.remarkValue];
        },
        style: (forItems) => {
          const $for = forItems;
          return $for.id40.hightLight == true
            ? {
                color: this.$WEAPPS_COMP.props.data.remarkFontColor,
                'font-size': this.$WEAPPS_COMP.props.data.remarkFontSize,
              }
            : '';
        },
      },
      id51: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.acceptTypes == 'lengthwaysTextRight' ||
            this.$WEAPPS_COMP.props.data.acceptTypes == 'lengthwaysTextLeft'
          );
        },
        classList: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.acceptTypes ==
            'lengthwaysTextLeft'
            ? 'gsd-h5-react-busi-lengthways-left-content-title'
            : ``;
        },
      },
      id43: {
        classList: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.acceptTypes ==
            'lengthwaysTextSide'
            ? `gsd-h5-react-busi-lengthways-side-content-show`
            : ``;
        },
      },
      id57: {
        src: (forItems) => {
          const $for = forItems;
          return $for.id40[this.$WEAPPS_COMP.props.data.iconValue];
        },
        _visible: (forItems) => {
          const $for = forItems;
          return !(
            this.$WEAPPS_COMP.props.data.pointType == 'solidType' ||
            this.$WEAPPS_COMP.props.data.pointType == 'outlineType'
          );
        },
      },
      id71: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.pointType == 'solidType' ||
            this.$WEAPPS_COMP.props.data.pointType == 'outlineType'
          );
        },
        style: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.pointType == 'solidType'
            ? {
                background: $for.id40.pointColor
                  ? $for.id40.pointColor
                  : '#C5C5C5',
                'border-color': $for.id40.pointColor
                  ? $for.id40.pointColor
                  : '#C5C5C5',
              }
            : {
                'border-color': $for.id40.pointColor
                  ? $for.id40.pointColor
                  : '#C5C5C5',
              };
        },
      },
      id56: {
        _visible: (forItems) => {
          const $for = forItems;
          return !(
            $for.id40[this.$WEAPPS_COMP.props.data.pointIdValue] ==
            this.$WEAPPS_COMP.props.data.showList[
              this.$WEAPPS_COMP.props.data.showList.length - 1
            ][this.$WEAPPS_COMP.props.data.pointIdValue]
          );
        },
      },
      id44: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.acceptTypes == 'lengthwaysTextLeft'
          );
        },
      },
      id62: {
        text: (forItems) => {
          const $for = forItems;
          return $for.id40[this.$WEAPPS_COMP.props.data.remarkValue];
        },
        style: (forItems) => {
          const $for = forItems;
          return $for.id40.hightLight == true
            ? {
                color: this.$WEAPPS_COMP.props.data.remarkFontColor,
                'font-size': this.$WEAPPS_COMP.props.data.remarkFontSize,
              }
            : '';
        },
      },
      id61: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.acceptTypes == 'lengthwaysTextSide'
          );
        },
        classList: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.acceptTypes ==
            'lengthwaysTextLeft' ||
            this.$WEAPPS_COMP.props.data.acceptTypesMP == 'lengthwaysTextLeft'
            ? `gsd-h5-react-busi-content-title`
            : ``;
        },
      },
      id41: {
        classList: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.acceptTypes ==
            'lengthwaysTextLeft'
            ? 'gsd-h5-react-busi-lengthways-left-content-show'
            : ``;
        },
      },
      id40: {
        _waFor: () => this.$WEAPPS_COMP.props.data.showList,
      },
      id37: {
        _visible: (forItems) => {
          const $for = forItems;
          return (
            this.$WEAPPS_COMP.props.data.acceptTypes == 'lengthwaysTextRight' ||
            this.$WEAPPS_COMP.props.data.acceptTypes == 'lengthwaysTextLeft' ||
            this.$WEAPPS_COMP.props.data.acceptTypes == 'lengthwaysTextSide'
          );
        },
      },
      id72: {
        _visible: (forItems) => {
          const $for = forItems;
          return this.$WEAPPS_COMP.props.data.showList != undefined;
        },
      },
    });
    this.componentSchema = {
      type: 'object',
      properties: {
        id1: {
          key: 'id1',
          'x-component': 'gsd-h5-react:container',
          'x-props': {
            sourceKey: 'gsd-h5-react:Container',
            customDataForm: {},
            staticResourceAttribute: [],
            classNameList: ['wa-comp-CLOUDBASE_STANDARD-Timeline'],
          },
          'x-index': 0,
          emitEvents: [
            'tap',
            'longpress',
            'touchstart',
            'touchmove',
            'touchcancel',
            'touchend',
          ],
          properties: {
            id72: {
              key: 'id72',
              'x-component': 'gsd-h5-react:container',
              'x-props': {
                sourceKey: 'gsd-h5-react:Container',
                customDataForm: {},
                staticResourceAttribute: [],
              },
              'x-index': 2,
              emitEvents: [
                'tap',
                'longpress',
                'touchstart',
                'touchmove',
                'touchcancel',
                'touchend',
              ],
              properties: {
                id33: {
                  key: 'id33',
                  'x-component': 'gsd-h5-react:container',
                  'x-props': {
                    sourceKey: 'gsd-h5-react:Container',
                    customDataForm: {},
                    staticResourceAttribute: [],
                    classNameList: ['gsd-h5-react-busi-com-content-crosswise'],
                  },
                  'x-index': 0,
                  emitEvents: [
                    'tap',
                    'longpress',
                    'touchstart',
                    'touchmove',
                    'touchcancel',
                    'touchend',
                  ],
                  properties: {
                    id10: {
                      key: 'id10',
                      'x-component': 'gsd-h5-react:container',
                      'x-props': {
                        sourceKey: 'gsd-h5-react:Container',
                        customDataForm: {},
                        commonStyle: {
                          width: '100%',
                          display: 'flex',
                          justifyContent: 'center',
                          alignItems: 'center',
                          flexDirection: 'column',
                        },
                        staticResourceAttribute: [],
                        listenerInstances: [
                          {
                            key: 'wafovn8gl8c',
                            trigger: 'tap',
                            instanceFunction: this.handler.onClick.bind(this),
                            dataBinds: {
                              target: (forItems) => forItems.id10,
                            },
                          },
                        ],
                      },
                      'x-index': 0,
                      emitEvents: [
                        'tap',
                        'longpress',
                        'touchstart',
                        'touchmove',
                        'touchcancel',
                        'touchend',
                      ],
                      properties: {
                        id12: {
                          key: 'id12',
                          'x-component': 'gsd-h5-react:container',
                          'x-props': {
                            sourceKey: 'gsd-h5-react:Container',
                            customDataForm: {},
                            commonStyle: {
                              width: '100%',
                            },
                            staticResourceAttribute: [],
                          },
                          'x-index': 1,
                          emitEvents: [
                            'tap',
                            'longpress',
                            'touchstart',
                            'touchmove',
                            'touchcancel',
                            'touchend',
                          ],
                          properties: {
                            id5: {
                              key: 'id5',
                              'x-component': 'gsd-h5-react:container',
                              'x-props': {
                                sourceKey: 'gsd-h5-react:Container',
                                customDataForm: {},
                                staticResourceAttribute: [],
                              },
                              'x-index': 2,
                              emitEvents: [
                                'tap',
                                'longpress',
                                'touchstart',
                                'touchmove',
                                'touchcancel',
                                'touchend',
                              ],
                              properties: {
                                id17: {
                                  key: 'id17',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    staticResourceAttribute: [],
                                    classNameList: [
                                      'gsd-h5-react-busi-text-content-crosswise',
                                    ],
                                  },
                                  'x-index': 0,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                  properties: {
                                    id16: {
                                      key: 'id16',
                                      'x-component': 'gsd-h5-react:text',
                                      'x-props': {
                                        sourceKey: 'gsd-h5-react:Text',
                                        customDataForm: {},
                                        staticResourceAttribute: [],
                                        classNameList: [
                                          'gsd-h5-react-busi-point-title-text',
                                        ],
                                      },
                                      'x-index': 1,
                                      emitEvents: ['tap'],
                                    },
                                  },
                                },
                                id18: {
                                  key: 'id18',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    staticResourceAttribute: [],
                                    classNameList: [
                                      'gsd-h5-react-busi-text-content-crosswise',
                                    ],
                                  },
                                  'x-index': 1,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                  properties: {
                                    id13: {
                                      key: 'id13',
                                      'x-component': 'gsd-h5-react:text',
                                      'x-props': {
                                        sourceKey: 'gsd-h5-react:Text',
                                        customDataForm: {},
                                        commonStyle: {
                                          whiteSpace: 'pre-line',
                                        },
                                        staticResourceAttribute: [],
                                        classNameList: [
                                          'gsd-h5-react-busi-point-des-text',
                                        ],
                                      },
                                      'x-index': 0,
                                      emitEvents: ['tap'],
                                    },
                                  },
                                },
                                id20: {
                                  key: 'id20',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    staticResourceAttribute: [],
                                    classNameList: [
                                      'gsd-h5-react-busi-text-content-crosswise',
                                    ],
                                  },
                                  'x-index': 3,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                  properties: {
                                    id15: {
                                      key: 'id15',
                                      'x-component': 'gsd-h5-react:text',
                                      'x-props': {
                                        sourceKey: 'gsd-h5-react:Text',
                                        customDataForm: {},
                                        commonStyle: {
                                          whiteSpace: 'pre-line',
                                        },
                                        staticResourceAttribute: [],
                                        classNameList: [
                                          'gsd-h5-react-busi-point-remark-text',
                                        ],
                                      },
                                      'x-index': 0,
                                      emitEvents: ['tap'],
                                    },
                                  },
                                },
                              },
                            },
                            id19: {
                              key: 'id19',
                              'x-component': 'gsd-h5-react:container',
                              'x-props': {
                                sourceKey: 'gsd-h5-react:Container',
                                customDataForm: {},
                                staticResourceAttribute: [],
                                classNameList: [
                                  'gsd-h5-react-busi-point-unit-content-crosswise',
                                ],
                              },
                              'x-index': 3,
                              emitEvents: [
                                'tap',
                                'longpress',
                                'touchstart',
                                'touchmove',
                                'touchcancel',
                                'touchend',
                              ],
                              properties: {
                                id11: {
                                  key: 'id11',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    commonStyle: {
                                      width: '100%',
                                    },
                                    staticResourceAttribute: [],
                                    classNameList: [
                                      'gsd-h5-react-busi-point-devider-crosswise',
                                    ],
                                  },
                                  'x-index': 1,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                },
                                id21: {
                                  key: 'id21',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    staticResourceAttribute: [],
                                  },
                                  'x-index': 0,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                  properties: {
                                    id4: {
                                      key: 'id4',
                                      'x-component': 'cloudbase_standard:icon',
                                      'x-props': {
                                        sourceKey: 'CLOUDBASE_STANDARD:Icon',
                                        customDataForm: {},
                                        staticResourceAttribute: ['src'],
                                      },
                                      'x-index': 0,
                                      emitEvents: [],
                                    },
                                    id70: {
                                      key: 'id70',
                                      'x-component': 'gsd-h5-react:container',
                                      'x-props': {
                                        sourceKey: 'gsd-h5-react:Container',
                                        customDataForm: {},
                                        staticResourceAttribute: [],
                                        classNameList: [
                                          'gsd-h5-react-busi-point-solid-content',
                                        ],
                                      },
                                      'x-index': 1,
                                      emitEvents: [
                                        'tap',
                                        'longpress',
                                        'touchstart',
                                        'touchmove',
                                        'touchcancel',
                                        'touchend',
                                      ],
                                    },
                                  },
                                },
                              },
                            },
                            id28: {
                              key: 'id28',
                              'x-component': 'gsd-h5-react:container',
                              'x-props': {
                                sourceKey: 'gsd-h5-react:Container',
                                customDataForm: {},
                                commonStyle: {
                                  width: '100%',
                                  display: 'flex',
                                  alignItems: 'center',
                                  flexDirection: 'row',
                                },
                                staticResourceAttribute: [],
                                classNameList: [
                                  'gsd-h5-react-busi-point-unit-content-crosswise',
                                ],
                              },
                              'x-index': 1,
                              emitEvents: [
                                'tap',
                                'longpress',
                                'touchstart',
                                'touchmove',
                                'touchcancel',
                                'touchend',
                              ],
                              properties: {
                                id29: {
                                  key: 'id29',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    staticResourceAttribute: [],
                                  },
                                  'x-index': 1,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                  properties: {
                                    id31: {
                                      key: 'id31',
                                      'x-component': 'cloudbase_standard:icon',
                                      'x-props': {
                                        sourceKey: 'CLOUDBASE_STANDARD:Icon',
                                        customDataForm: {},
                                        staticResourceAttribute: ['src'],
                                      },
                                      'x-index': 1,
                                      emitEvents: [],
                                    },
                                    id63: {
                                      key: 'id63',
                                      'x-component': 'gsd-h5-react:container',
                                      'x-props': {
                                        sourceKey: 'gsd-h5-react:Container',
                                        customDataForm: {},
                                        staticResourceAttribute: [],
                                        classNameList: [
                                          'gsd-h5-react-busi-point-solid-content',
                                        ],
                                      },
                                      'x-index': 0,
                                      emitEvents: [
                                        'tap',
                                        'longpress',
                                        'touchstart',
                                        'touchmove',
                                        'touchcancel',
                                        'touchend',
                                      ],
                                    },
                                  },
                                },
                                id30: {
                                  key: 'id30',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    commonStyle: {
                                      width: '100%',
                                    },
                                    staticResourceAttribute: [],
                                    classNameList: [
                                      'gsd-h5-react-busi-point-devider-crosswise',
                                    ],
                                  },
                                  'x-index': 2,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                },
                              },
                            },
                            id59: {
                              key: 'id59',
                              'x-component': 'gsd-h5-react:container',
                              'x-props': {
                                sourceKey: 'gsd-h5-react:Container',
                                customDataForm: {},
                                commonStyle: {
                                  height: '2.4286rem',
                                  marginLeft: '0.2857rem',
                                  display: 'flex',
                                  alignItems: 'flex-end',
                                  flexWrap: 'nowrap',
                                },
                                staticResourceAttribute: [],
                              },
                              'x-index': 0,
                              emitEvents: [
                                'tap',
                                'longpress',
                                'touchstart',
                                'touchmove',
                                'touchcancel',
                                'touchend',
                              ],
                              properties: {
                                id60: {
                                  key: 'id60',
                                  'x-component': 'gsd-h5-react:text',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Text',
                                    customDataForm: {},
                                    commonStyle: {
                                      bottom: '0',
                                      whiteSpace: 'pre-line',
                                    },
                                    staticResourceAttribute: [],
                                    classNameList: [
                                      'gsd-h5-react-busi-point-remark-text',
                                    ],
                                  },
                                  'x-index': 0,
                                  emitEvents: ['tap'],
                                },
                              },
                            },
                          },
                        },
                      },
                    },
                  },
                },
                id37: {
                  key: 'id37',
                  'x-component': 'gsd-h5-react:container',
                  'x-props': {
                    sourceKey: 'gsd-h5-react:Container',
                    customDataForm: {},
                    staticResourceAttribute: [],
                    classNameList: ['gsd-h5-react-busi-text-content'],
                  },
                  'x-index': 1,
                  emitEvents: [
                    'tap',
                    'longpress',
                    'touchstart',
                    'touchmove',
                    'touchcancel',
                    'touchend',
                  ],
                  properties: {
                    id40: {
                      key: 'id40',
                      'x-component': 'gsd-h5-react:container',
                      'x-props': {
                        sourceKey: 'gsd-h5-react:Container',
                        customDataForm: {},
                        staticResourceAttribute: [],
                        listenerInstances: [
                          {
                            key: 'wa4bf5c7emmg',
                            trigger: 'tap',
                            instanceFunction: this.handler.onClick.bind(this),
                            dataBinds: {
                              target: (forItems) => forItems.id40,
                            },
                          },
                        ],
                      },
                      'x-index': 0,
                      emitEvents: [
                        'tap',
                        'longpress',
                        'touchstart',
                        'touchmove',
                        'touchcancel',
                        'touchend',
                      ],
                      properties: {
                        id41: {
                          key: 'id41',
                          'x-component': 'gsd-h5-react:container',
                          'x-props': {
                            sourceKey: 'gsd-h5-react:Container',
                            customDataForm: {},
                            commonStyle: {
                              display: 'flex',
                            },
                            staticResourceAttribute: [],
                          },
                          'x-index': 0,
                          emitEvents: [
                            'tap',
                            'longpress',
                            'touchstart',
                            'touchmove',
                            'touchcancel',
                            'touchend',
                          ],
                          properties: {
                            id42: {
                              key: 'id42',
                              'x-component': 'gsd-h5-react:container',
                              'x-props': {
                                sourceKey: 'gsd-h5-react:Container',
                                customDataForm: {},
                                commonStyle: {
                                  marginTop: '0.3571rem',
                                },
                                staticResourceAttribute: [],
                                classNameList: [
                                  'gsd-h5-react-busi-point-unit-content-lengthways',
                                ],
                              },
                              'x-index': 1,
                              emitEvents: [
                                'tap',
                                'longpress',
                                'touchstart',
                                'touchmove',
                                'touchcancel',
                                'touchend',
                              ],
                              properties: {
                                id45: {
                                  key: 'id45',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    staticResourceAttribute: [],
                                  },
                                  'x-index': 0,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                  properties: {
                                    id47: {
                                      key: 'id47',
                                      'x-component': 'cloudbase_standard:icon',
                                      'x-props': {
                                        sourceKey: 'CLOUDBASE_STANDARD:Icon',
                                        customDataForm: {},
                                        staticResourceAttribute: ['src'],
                                      },
                                      'x-index': 0,
                                      emitEvents: [],
                                    },
                                    id69: {
                                      key: 'id69',
                                      'x-component': 'gsd-h5-react:container',
                                      'x-props': {
                                        sourceKey: 'gsd-h5-react:Container',
                                        customDataForm: {},
                                        staticResourceAttribute: [],
                                        classNameList: [
                                          'gsd-h5-react-busi-point-solid-content',
                                        ],
                                      },
                                      'x-index': 1,
                                      emitEvents: [
                                        'tap',
                                        'longpress',
                                        'touchstart',
                                        'touchmove',
                                        'touchcancel',
                                        'touchend',
                                      ],
                                    },
                                  },
                                },
                                id46: {
                                  key: 'id46',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    commonStyle: {
                                      height: '100%',
                                    },
                                    staticResourceAttribute: [],
                                    classNameList: [
                                      '.gsd-h5-react-busi-point-devider',
                                    ],
                                  },
                                  'x-index': 1,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                  properties: {
                                    id48: {
                                      key: 'id48',
                                      'x-component':
                                        'cloudbase_standard:divider',
                                      'x-props': {
                                        sourceKey: 'CLOUDBASE_STANDARD:Divider',
                                        customDataForm: {},
                                        staticResourceAttribute: [],
                                        classNameList: [
                                          'gsd-h5-react-busi-point-devider-lengthways',
                                        ],
                                      },
                                      emitEvents: [],
                                    },
                                  },
                                },
                              },
                            },
                            id43: {
                              key: 'id43',
                              'x-component': 'gsd-h5-react:container',
                              'x-props': {
                                sourceKey: 'gsd-h5-react:Container',
                                customDataForm: {},
                                commonStyle: {
                                  marginBottom: '1.4286rem',
                                },
                                staticResourceAttribute: [],
                              },
                              'x-index': 2,
                              emitEvents: [
                                'tap',
                                'longpress',
                                'touchstart',
                                'touchmove',
                                'touchcancel',
                                'touchend',
                              ],
                              properties: {
                                id49: {
                                  key: 'id49',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    staticResourceAttribute: [],
                                  },
                                  'x-index': 0,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                  properties: {
                                    id52: {
                                      key: 'id52',
                                      'x-component': 'gsd-h5-react:text',
                                      'x-props': {
                                        sourceKey: 'gsd-h5-react:Text',
                                        customDataForm: {},
                                        commonStyle: {
                                          whiteSpace: 'pre-line',
                                        },
                                        staticResourceAttribute: [],
                                        classNameList: [
                                          'gsd-h5-react-busi-point-title-text',
                                        ],
                                      },
                                      emitEvents: ['tap'],
                                    },
                                  },
                                },
                                id50: {
                                  key: 'id50',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    staticResourceAttribute: [],
                                  },
                                  'x-index': 1,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                  properties: {
                                    id53: {
                                      key: 'id53',
                                      'x-component': 'gsd-h5-react:text',
                                      'x-props': {
                                        sourceKey: 'gsd-h5-react:Text',
                                        customDataForm: {},
                                        commonStyle: {
                                          whiteSpace: 'pre-line',
                                        },
                                        staticResourceAttribute: [],
                                        classNameList: [
                                          'gsd-h5-react-busi-point-des-text',
                                        ],
                                      },
                                      emitEvents: ['tap'],
                                    },
                                  },
                                },
                                id51: {
                                  key: 'id51',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    staticResourceAttribute: [],
                                  },
                                  'x-index': 2,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                  properties: {
                                    id54: {
                                      key: 'id54',
                                      'x-component': 'gsd-h5-react:text',
                                      'x-props': {
                                        sourceKey: 'gsd-h5-react:Text',
                                        customDataForm: {},
                                        commonStyle: {
                                          whiteSpace: 'pre-line',
                                        },
                                        staticResourceAttribute: [],
                                        classNameList: [
                                          'gsd-h5-react-busi-point-remark-text',
                                        ],
                                      },
                                      emitEvents: ['tap'],
                                    },
                                  },
                                },
                              },
                            },
                            id44: {
                              key: 'id44',
                              'x-component': 'gsd-h5-react:container',
                              'x-props': {
                                sourceKey: 'gsd-h5-react:Container',
                                customDataForm: {},
                                staticResourceAttribute: [],
                                classNameList: [
                                  'gsd-h5-react-busi-point-unit-content-lengthways',
                                ],
                              },
                              'x-index': 3,
                              emitEvents: [
                                'tap',
                                'longpress',
                                'touchstart',
                                'touchmove',
                                'touchcancel',
                                'touchend',
                              ],
                              properties: {
                                id55: {
                                  key: 'id55',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    staticResourceAttribute: [],
                                  },
                                  'x-index': 0,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                  properties: {
                                    id57: {
                                      key: 'id57',
                                      'x-component': 'cloudbase_standard:icon',
                                      'x-props': {
                                        sourceKey: 'CLOUDBASE_STANDARD:Icon',
                                        customDataForm: {},
                                        staticResourceAttribute: ['src'],
                                      },
                                      'x-index': 0,
                                      emitEvents: [],
                                    },
                                    id71: {
                                      key: 'id71',
                                      'x-component': 'gsd-h5-react:container',
                                      'x-props': {
                                        sourceKey: 'gsd-h5-react:Container',
                                        customDataForm: {},
                                        staticResourceAttribute: [],
                                        classNameList: [
                                          'gsd-h5-react-busi-point-solid-content',
                                        ],
                                      },
                                      'x-index': 1,
                                      emitEvents: [
                                        'tap',
                                        'longpress',
                                        'touchstart',
                                        'touchmove',
                                        'touchcancel',
                                        'touchend',
                                      ],
                                    },
                                  },
                                },
                                id56: {
                                  key: 'id56',
                                  'x-component': 'gsd-h5-react:container',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Container',
                                    customDataForm: {},
                                    commonStyle: {
                                      height: '100%',
                                    },
                                    staticResourceAttribute: [],
                                  },
                                  'x-index': 1,
                                  emitEvents: [
                                    'tap',
                                    'longpress',
                                    'touchstart',
                                    'touchmove',
                                    'touchcancel',
                                    'touchend',
                                  ],
                                  properties: {
                                    id58: {
                                      key: 'id58',
                                      'x-component':
                                        'cloudbase_standard:divider',
                                      'x-props': {
                                        sourceKey: 'CLOUDBASE_STANDARD:Divider',
                                        customDataForm: {},
                                        staticResourceAttribute: [],
                                        classNameList: [
                                          'gsd-h5-react-busi-point-devider-lengthways',
                                        ],
                                      },
                                      emitEvents: [],
                                    },
                                  },
                                },
                              },
                            },
                            id61: {
                              key: 'id61',
                              'x-component': 'gsd-h5-react:container',
                              'x-props': {
                                sourceKey: 'gsd-h5-react:Container',
                                customDataForm: {},
                                staticResourceAttribute: [],
                                classNameList: [
                                  'gsd-h5-react-busi-lengthways-side-remark',
                                ],
                              },
                              'x-index': 0,
                              emitEvents: [
                                'tap',
                                'longpress',
                                'touchstart',
                                'touchmove',
                                'touchcancel',
                                'touchend',
                              ],
                              properties: {
                                id62: {
                                  key: 'id62',
                                  'x-component': 'gsd-h5-react:text',
                                  'x-props': {
                                    sourceKey: 'gsd-h5-react:Text',
                                    customDataForm: {},
                                    staticResourceAttribute: [],
                                    classNameList: [
                                      'gsd-h5-react-busi-point-remark-text',
                                    ],
                                  },
                                  emitEvents: ['tap'],
                                },
                              },
                            },
                          },
                        },
                      },
                    },
                  },
                },
              },
            },
          },
        },
      },
    };

    const defaultProps = {
      showList: [
        {
          _id: '1',
          icon: 'https://main.qcloudimg.com/raw/b3e6c13b81d2844571973efa44233ba6.png',
          title: '已签收',
          remark: '2021/09/07  12:23:45',
          hightLight: false,
          description: '已签收，欢迎再次选购',
        },
        {
          _id: '2',
          icon: 'https://main.qcloudimg.com/raw/b3e6c13b81d2844571973efa44233ba6.png',
          title: '运输中',
          remark: '2021/09/07  12:23:45',
          hightLight: false,
          description: '快件已到达深圳中转站',
        },
        {
          _id: '3',
          icon: 'https://main.qcloudimg.com/raw/b3e6c13b81d2844571973efa44233ba6.png',
          title: '已发货',
          remark: '2021/09/07  12:23:45',
          hightLight: false,
          description: '商家已发货，物流承运商：顺丰速运',
        },
        {
          _id: '4',
          icon: 'https://main.qcloudimg.com/raw/32ed1a4f7c5987f49ae8271c2dc38ed3.png',
          title: '订单已付款',
          remark: '2021/09/07  12:23:45',
          hightLight: true,
          pointColor: '#0052D9',
          description: '订单已付款，支付方式：微信支付',
        },
      ],
      iconValue: 'icon',
      pointType: 'solidType',
      titleValue: 'title',
      acceptTypes: 'lengthwaysTextLeft',
      remarkValue: 'remark',
      pointIdValue: '_id',
      titleFontSize: 28,
      remarkFontSize: 24,
      titleFontColor: '#0052D9',
      remarkFontColor: 'rgba(0,0,0,0.4)',
      descriptionValue: 'description',
      descriptionFontSize: 24,
      descriptionFontColor: 'rgba(0,0,0,0.6)',
    };
    this.propsData = observable(
      Object.assign({}, defaultProps, this.props.data || {})
    );
    this.$WEAPPS_COMP.lib = { const: constObj, tools: toolsObj };
    /*
    this.i18n = this.$WEAPPS_COMP.i18n = {
      ...i18n,
      t (key, data) {
        return i18n.t(libCode + ':' + key, data)
      },
    }
    */
    this.$WEAPPS_COMP.props = {
      ...this.props,
      events: this.events,
      data: this.propsData,
    };

    this.state = this.$WEAPPS_COMP.state = observable(getStateFn.bind(this)());
    this.computed = this.$WEAPPS_COMP.computed = createComputed(computed, this);
    this.node = this.$WEAPPS_COMP.node = this.createWidgetNode(this) || {};
    this.initPublicMethods();

    this.widgets = this.$WEAPPS_COMP.widgets = createWidgets(
      widgetContext,
      dataBinds
    );
    // widgets 内的 dataBinds 可能需要关联 widgets，需要重新执行 dataBinds
    retryDataBinds();
    Object.keys(this.widgets || {}).forEach((widgetId) => {
      // 将实例 ownerWidget 挂到内部组件上。内部组件就可以通过 $comp.node.ownerWidget 获取到所在的组件实例
      const node = this.widgets[widgetId];
      if (Array.isArray(node)) {
        node.forEach((item) => {
          item.ownerWidget = this.node;
          item.getOwnerWidget = () => this.node;
        });
      } else {
        node.ownerWidget = this.node;
        node.getOwnerWidget = () => this.node;
      }
      // this.widgets[widgetId].ownerWidget = this.node
      // this.widgets[widgetId].getOwnerWidget = () => this.node
    });

    this.pageListenerInstances = [];
    this.createCompAPI(this);
  }

  // publicMthods 挂载内部，使用 $comp.api。挂载到外部使用 $comp.node.api
  initPublicMethods() {
    const publicMethods = componentAPI.publicMethods || {};
    Object.keys(publicMethods).map((fnName) => {
      const bindFunc = publicMethods[fnName].bind(this);
      this[fnName] = bindFunc;
      this.$WEAPPS_COMP[fnName] = bindFunc;
      if (this.node) this.node[fnName] = bindFunc;
    });
  }

  // 创建自身节点
  createWidgetNode(compThis) {
    // 当为数组时，需要判断自己属于 widgets 的哪一项
    const { compositeParent, forIndexes, id } = compThis.props;
    let widgetData = compositeParent.$WEAPPS_COMP
      ? compositeParent.$WEAPPS_COMP.widgets[id]
      : compositeParent.$page.widgets[id];
    if (Array.isArray(widgetData)) {
      widgetData = widgetData.length > 0 ? get(widgetData, forIndexes) : {};
    }
    widgetData = widgetData || {};
    Object.assign(
      widgetData,
      {
        getConfig: () => compThis.compConfig,
      },
      bindFuncObj(componentAPI.publicMethods || {}, compThis)
    );

    return widgetData;
  }

  createCompAPI(compThis) {
    compThis.$WEAPPS_COMP = {
      _dataBinds: compThis._dataBinds,
      compConfig: compThis.compConfig,
      widgets: compThis.widgets,
      node: compThis.node,
      handler: compThis.handler,
      lib: { const: constObj, tools: toolsObj },
      // i18n: compThis.i18n,
      get props() {
        return {
          ...compThis.props,
          events: compThis.events,
          data: compThis.propsData,
        };
      },
      get state() {
        return compThis.state;
      },
      get computed() {
        return compThis.computed;
      },
    };
  }

  initWatchMethods() {
    const {
      watch = {},
      watchState = {},
      watchWidget = {},
      watchEffects = {},
    } = componentAPI;
    const _this = this;
    const weappInst = _this.$WEAPPS_COMP;

    // # watch effect
    this.watchEffectDisposers = Object.keys(watchEffects).map((fnName) => {
      return autorun(watchEffects[fnName].bind(this));
    });
    const disposers = this.watchEffectDisposers;

    // # watch props
    Object.keys(watch).map((key) =>
      runWatcher(parseWatcher(watch[key]), weappInst.props.data, key, 'watch')
    );

    // # watch state
    Object.keys(watchState).map((key) =>
      runWatcher(
        parseWatcher(watchState[key]),
        weappInst.state,
        key,
        'watchState'
      )
    );

    // # watch widgets
    Object.keys(watchWidget).map((key) =>
      runWatcher(
        parseWatcher(watchWidget[key]),
        weappInst.widgets,
        key,
        'watchWidgets'
      )
    );

    function runWatcher({ handler, immediate } = {}, target, key, label) {
      if (!handler) {
        console.error(
          `Invalid ${label}(${key}) of ${weappInst.node.widgetType}, watch must a function or {handler: function}`
        );
        return;
      }
      const disposer = reaction(() => get(target, key), handler.bind(_this), {
        fireImmediately: immediate,
      });
      disposers.push(disposer);
    }
  }

  componentDidMount() {
    this.initPublicMethods();
    this.initWatchMethods();

    lifecycle.onAttached && lifecycle.onAttached.bind(this)();
    lifecycle.onReady && lifecycle.onReady.bind(this)();
  }

  componentWillUnmount() {
    if (this.watchEffectDisposers) {
      this.watchEffectDisposers.forEach((disposer) => disposer());
      this.watchEffectDisposers = null;
    }
    this.node._listeners && this.node._listeners.clear();
    lifecycle.onDetached && lifecycle.onDetached.bind(this)();
  }

  render() {
    return (
      <WidgetsContext.Provider value={{ parent: this }}>
        <AppRender
          className={this.props.className}
          virtualFields={this.virtualFields}
          componentSchema={this.componentSchema}
          codeContext={this}
        />
      </WidgetsContext.Provider>
    );
  }
}

CompositeCompWrapper.contextType = WidgetsContext;

export default observer((props) => (
  <CompositeCompWrapper {...props}></CompositeCompWrapper>
));

function parseWatcher(watcher) {
  if (!watcher) return;
  if (watcher instanceof Function) {
    return { handler: watcher, immediate: false };
  }
  const { handler, immediate = false } = watcher;
  if (!(handler instanceof Function)) return;
  return { handler, immediate };
}
