import React from "react";
import { inject, observer } from "mobx-react";
import { Button, Spin } from "antd";
import { toJS } from "mobx";
import { WeaDialog, WeaLocaleProvider, WeaRightMenu, WeaTab, WeaFormItem, WeaSearchGroup } from "ecCom";
import { WeaTableNew, WeaSwitch } from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;
import { checkUnique } from '../../util/IntegrationUtil.js';
import AddObjectDialog from './addObjectDialog'

const getLabel = WeaLocaleProvider.getLabel;
const store = ["todoCenterStore"];

@inject(...store)
@observer
export default class OfsInfoEditWorkflowTypeDialog extends React.Component {
  closeDialog () {
    const { todoCenterStore } = this.props;
    const { Tabkey, Notab } = toJS(todoCenterStore.status);
    todoCenterStore.setState({ ofsInfoEditWorkflowTypeDialogVisible: false, Tabkey: '0', Notab: false, onlyview: 0 })
  }

  componentDidMount () {
    this.props.onRef(this)
  }


  getRightMenu () {
    const { todoCenterStore } = this.props;
    let onlyview = todoCenterStore.status.ofsInfoWorkflowTypeEditFormHiddenFields.onlyview;
    const { Tabkey } = todoCenterStore.status;
    let btnArr = [];
    if (onlyview) {
      btnArr = [
        {
          key: 'BTN_SAVE',
          icon: <i className='icon-coms-go-back' />,
          content: `${getLabel(309, '关闭')}`,
          onClick: () => this.closeDialog()
        },
      ]
    } else {
      if (Tabkey == 1) {
        btnArr = []
      } else {
        btnArr = [
          {
            key: 'BTN_SAVE',
            icon: <i className='icon-coms-Preservation' />,
            content: `${getLabel(86, '保存')}`,
            onClick: () => todoCenterStore.onRightMenuClick('BTN_SAVE')
          },
        ]
      }

    }

    return btnArr;
  }

  onChangeHendle = (v) => {
    const { status, setState, getEditWorkflowTypeList } = this.props.todoCenterStore;
    const { Tabkey, editwftype, Btn } = status;
    setState({ Tabkey: v });
    if (editwftype == 0) {
      setState({ onlyview: 1 })
    }
    getEditWorkflowTypeList(v);
  }

  render () {
    const { todoCenterStore } = this.props;
    const status = toJS(todoCenterStore.status);
    const { ofsInfoWorkflowTypeEditFormHiddenFields, changeButton, topTab, Tabkey, Notab, Btn, OfsInfoEditWorkflowTypeSpin } = status;
    let onlyview = ofsInfoWorkflowTypeEditFormHiddenFields.onlyview;
    let buttonLabel = onlyview ? getLabel('309', '关闭') : getLabel('86', '保存');
    let title = status.operateIndex == '' ? getLabel('524656', '注册流程类型') : onlyview ? getLabel('524657', '查看流程类型') : getLabel('125043', '编辑流程类型');
    return <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@67gh0f`}
      title={title}
      onCancel={() => this.closeDialog()}
      visible={status.ofsInfoEditWorkflowTypeDialogVisible}
      style={{ width: 600, height: 300 }}
      hasScroll
      moduleName="integration"
      buttons={Tabkey == 1 ? [] : [
        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ko0wok@integrationTodoCenterEditDetailButtonSave`} type="primary" onClick={() => todoCenterStore.onRightMenuClick('BTN_SAVE')}>{buttonLabel}</Button>,
        changeButton
      ]}
      moreBtn={{
        datas: this.getRightMenu(),
        collectParams: []
      }}
    >
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@he1cwy`} spining={OfsInfoEditWorkflowTypeSpin}>
        {OfsInfoEditWorkflowTypeSpin == false ?
          < WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@p0lrve`}
            datas={this.getRightMenu()}
            collectParams={[]}>

            <div style={{ height: '300px', width: '100%' }}>
              {!Notab &&
                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@c3uroc`}
                  datas={topTab}
                  keyParam="viewcondition" //主键
                  selectedKey={Tabkey}
                  buttons={Btn}
                  onChange={this.onChangeHendle}
                />}
              {Tabkey == '0' ? todoCenterStore.ofsInfoWorkflowTypeEditForm.render({ col: 1, center: true }, {},
                true,
                (c, idx) => {
                  let group = [];
                  let items = [];
                  c.items.map((field, idx) => {
                    items.push(
                      {
                        com: (
                          <WeaFormItem
                            label={`${field.label}`}
                            labelCol={{ span: `${field.labelcol}` }}
                            ratio1to2
                            error={todoCenterStore.ofsInfoWorkflowTypeEditForm.getError(field)}
                            tipPosition="bottom"
                            wrapperCol={{ span: `${field.fieldcol}` }}
                          >
                            <WeaSwitch
                              fieldConfig={field}
                              form={todoCenterStore.ofsInfoWorkflowTypeEditForm}
                              onChange={(v) => {
                                if (v.workflowname && v.workflowname.value && v.workflowname.value.trim() && (v.workflowname.value.trim() != todoCenterStore.ofsInfoWorkflowTypeEditFormOrg.getFormParams().workflowname.trim())) {
                                  let checkParams = {
                                    tableName: 'Ofs_workflow',
                                    fieldName: 'workflowname',
                                    fieldValue: todoCenterStore.ofsInfoWorkflowTypeEditForm.getFormParams().workflowname.replace(/^(\s*)|(\s*)$/g, ''),
                                    idName: 'workflowid',
                                    idValue: status.operateIndex,
                                    sysid: ofsInfoWorkflowTypeEditFormHiddenFields.sysid || ""
                                  };
                                  checkUnique(checkParams, todoCenterStore.ofsInfoWorkflowTypeEditForm, "workflowname", "7");
                                }
                              }}
                            />
                          </WeaFormItem>
                        ),
                        col: '1',
                      }
                    );
                  });
                  group.push(
                    <WeaSearchGroup
                      needTigger={false}
                      center={true}
                      showGroup={c.defaultshow}
                      items={items}
                    />
                  );
                  return group;
                }
              )
                : <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@o824g2`}
                  comsWeaTableStore={todoCenterStore.tableStore4}
                  rowSelection={this.rowSelection()}
                  onOperatesClick={this.onOperatesClick}
                />}
            </div>

            <AddObjectDialog ecId={`${this && this.props && this.props.ecId || ''}_AddObjectDialog@oc738a`} />
          </WeaRightMenu> : <div style={{ height: '350px' }}></div>}
      </Spin>
    </WeaDialog >
  }

  onOperatesClick = (record) => {
    const { todoCenterStore } = this.props;
    const { openDelObjectDialog } = todoCenterStore;
    const { tableCheck } = toJS(todoCenterStore.status);
    todoCenterStore.setState({ tableCheck: record.randomField0 });
    openDelObjectDialog()
  }

  rowSelection = () => {
    const { todoCenterStore } = this.props;
    const { tableCheck } = toJS(todoCenterStore.status);
    return {
      onChange: v => {
        todoCenterStore.setState({ tableCheck: v });
        todoCenterStore.getRightButton(toJS(v));
      }
    }
  }
}
