import React from 'react'
import * as mobx from 'mobx'
import {
    inject,
    observer
} from 'mobx-react'
import {
    WeaTop,
    WeaTab
} from 'ecCom'
import {
    Table
} from 'antd'
import {
    WeaSwitch,
    WeaTableNew
} from 'comsMobx'
import {
    i18n
} from '../../public/i18n';

import './index.less';

const toJS = mobx.toJS;

export default class StaffWorkflowSet extends React.Component {
    constructor(props) {
        super(props);
        this.state = {

        }
    }

    componentWillMount() {
    }

    componentDidMount() {

    }

    componentWillReceiveProps(nextProps) {

    }


    render() {

        const columns = [{
            title: '动作名称',
            dataIndex: 'name',
          }, {
            title: '动作标识',
            dataIndex: 'id',
          }, {
            title: '动作类文件',
            dataIndex: 'url',
          }, {
            title: '参数',
            dataIndex: 'param',
          }];

        const data = [{
            key: '1',
            name: '冻结',
            id: 'staffDeduction',
            url: 'weaver.interfaces.organization.action.StaffChangeAction',
            param:'changeType=3'
          }, {
            key: '2',
            name: '扣减',
            id: 'staffDeduction',
            url: 'weaver.interfaces.organization.action.StaffChangeAction',
            param:'changeType=5'
          }, {
            key: '3',
            name: '释放',
            id: 'staffDeduction',
            url: 'weaver.interfaces.organization.action.StaffChangeAction',
            param:'changeType=6'
          }];



        return (
            <div className='staff-workdlow-set'>
                <WeaTop
                    title={<span>编制流程设置说明</span>}
                    icon={<i className="icon-portal-workflow" />}
                    iconBgcolor="#55D2D4"
                />
                <div className='content'>
                    <p>
                        <strong>1、概述</strong>
                        <div>客户可自行通过编制流程配置Action接口完成编制方案数据的更新操作;</div>
                    </p>
                    <p>
                        <strong>2、编制流程字段说明</strong>
                        <div>数据库字段名称需保持一致;</div>
                        <img src={require('../../images/workflow.jpg')} />
                    </p>
                    <p>
                        <strong>3、Action配置示例</strong>
                        <div>编制控制接口(冻结接口,扣减接口,释放接口);</div>
                        <img className='action' src={require('../../images/action.jpg')} />
                    </p>
                    <p>
                        <strong>4、接口配置详细</strong>
                        <Table className='action-table'
                            columns={columns}
                            dataSource={data}
                            bordered
                            pagination={false}
                        />
                    </p>

                </div>
            </div>

        )
    }
}