import React from 'react';
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { WeaDialog, WeaProgress, WeaLocaleProvider } from "ecCom";

const {getLabel} = WeaLocaleProvider;

@inject("imrtx")
@observer
export default class Main extends React.Component {
  render() {
    const { imrtx } = this.props;
    const { status } = imrtx;
    const { initializeVisible, initializeResult } = toJS(status);
    return <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@stmwen`}
        title={getLabel("386731", "IM初始化进度")}
        onCancel={()=> imrtx.closeInitialize()}
        visible={initializeVisible}
        style={{width: 500, height: 300}}
        moduleName="integration"
    >
        <div style={{padding: '30px 30px'}}>
          <h4 style={{marginBottom: 6}}>
            {getLabel('31151', "组织结构同步")}
          </h4>
          {
            initializeResult.flag == 'error'?
            <div className="align-center">{initializeResult.errorMessage}</div>:
            <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@pq6gxn`} percent={initializeResult.company || 0} strokeColor="#B37BFA"/>
          }
          <br/><br/><br/>
          <h4 style={{marginBottom: 6}}>
            {getLabel('386890',"人员同步")}
          </h4>
          {
            initializeResult.flag == 'error'?
            <div className="align-center">{initializeResult.errorMessage}</div>:
            <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@squhi1`} percent={initializeResult.hrm || 0} strokeColor="#B37BFA"/>
          }
        </div>
    </WeaDialog>
  }
}