import React from "react";
import { inject, observer } from "mobx-react";
import { Button } from "antd";
import { WeaAutograph } from "comsMobx";
const WeaAutographComp = WeaAutograph.Component;

// 顶部，底部工具栏扩展
const bottomBarConfig = [
  {
    name: "Browser", // 浏览按钮组件
    show: (
      <span style={{ fontSize: 12 }}>
        <i className="icon-coms-Journal" title="文档" /> 文档
      </span>
    ), // 使用组件库图标
    type: "37", // 浏览按钮类型 文档
    title: "文档" // 浏览按钮标题
  },
  {
    name: "Browser", // 浏览按钮组件
    show: (
      <span style={{ fontSize: 12 }}>
        <i className="icon-coms-Workflow-o" title="流程" /> 流程
      </span>
    ),
    type: "152", // 浏览按钮类型
    title: "流程" // 浏览按钮标题
  }
];
@inject("autographDemoStore")
@observer
class Main extends React.Component {
  render() {
    const { autographDemoStore } = this.props;
    const {
      autographStore,
      autographStore: { saveAutograph }
    } = autographDemoStore;
    return (
      <div>
        <div style={{ marginBottom: 10 }}>
          <Button
            onClick={() => {
              const id = saveAutograph();
              console.log("id", id);
            }}
          >
            获取数据
          </Button>
        </div>
        <WeaAutographComp
          weaworkflow_autograph_store={autographStore}
          isMustInput={true}
          params={{ workflowId: 1420, nodeId: 5995 }}
          bottomBarConfig={bottomBarConfig}
        />
      </div>
    );
  }
}

export default Main;

// component
import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Tools } from 'weaver-mobile';
import { BrowserHrmCondition } from 'weaver-mobile-page';

const getLabel = Tools.getLabel;
@inject('browserHrmConditionBasicStore')
@withRouter
@observer
class Demo extends React.Component {
  render() {
    const { browserHrmConditionDemo0, browserValue, setState } = this.props.browserHrmConditionBasicStore;
    return (
      <div>
        <BrowserHrmCondition
          label={getLabel(19303, '人力资源条件')}
          isSingle={false}
          store={browserHrmConditionDemo0}
          onChange={(...arg) => {
            console.log('Browser onchange: ', ...arg);
            setState({ browserValue: arg[1] });
          }}
          valueArray={browserValue}
        />
      </div>
    );
  }
}

export default Demo;





// BrowserBasicStore
import { observable, action } from 'mobx';
import { BrowserHrmCondition } from 'weaver-mobile-page';

export default class BrowserHrmConditionBasicStore {
  @observable browserHrmConditionDemo0 = new BrowserHrmCondition.Store({ route: '/browser-hrm-condition/demo-0' });
  @observable browserValue = [];

  @action
  setState = (params = {}) => {
    Object.keys(params).forEach((key) => {
      this[key] = params[key];
    });
  }
}

// component

import React from 'react';
import { observer, inject } from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Signature } from 'weaver-mobile-page';
import { Button } from 'weaver-mobile';

@inject('signatureBasicStore')
@withRouter
@observer
class Basic extends React.Component {
  render() {
    const { signatureBasicStore, signatureBasicStore: { signatureRoute, value } } = this.props;

    return (
      <div>
        <Signature store={signatureRoute}
          value={value}
          onChange={(v) => {
            signatureBasicStore.setState({ value: v });
          }}
        >
          <Button>打开手写签批</Button>
        </Signature>
      </div>
    );
  }
}

export default Basic;

// SignatureBasicStore

import { observable, action } from 'mobx';
import { Signature } from 'weaver-mobile-page';

export default class SignatureBasicStore {
  @observable signatureRoute = new Signature.Store({ route: '/signature/demo-0/signature', id: 'sign' });
  @observable value = {};
  @action
  setState = (params = {}) => {
    Object.keys(params).forEach((key) => {
      this[key] = params[key];
    });
  }
}