
import React from "react";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import { Modal } from "antd";
import { WeaTableEditable, WeaLocaleProvider, WeaTab, WeaButtonIcon} from "ecCom";

const { confirm } = Modal;
const getLabel = WeaLocaleProvider.getLabel;

// 为了排序 所以写死， 因为是字段名，变了也要改代码，所以无妨
const syncFileds = ['sub', 'dept', 'job', 'hrm'];

@inject("hrSyncStore")
@observer
class SyncSetFields extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "0",
      selectedRowDatas:[],
      selectedRowKeys: []
    }
  }

  getSyncTableEdit = () => {
    const { hrSyncStore } = this.props;
    const { newForm, SyncSetTable, setSyncSetTable } = hrSyncStore;
    const
      { WeaTableEdit_subSyncFieldSet,
        WeaTableEdit_subSyncFieldData,
        WeaTableEdit_hrmSyncFieldSet,
        WeaTableEdit_hrmSyncFieldData,
        WeaTableEdit_deptSyncFieldSet,
        WeaTableEdit_deptSyncFieldData,
        WeaTableEdit_jobSyncFieldSet,
        WeaTableEdit_jobSyncFieldData, } = toJS(SyncSetTable);
    const whichFields = [WeaTableEdit_subSyncFieldSet, WeaTableEdit_deptSyncFieldSet, WeaTableEdit_jobSyncFieldSet, WeaTableEdit_hrmSyncFieldSet];
    const whichDatas = [WeaTableEdit_subSyncFieldData, WeaTableEdit_deptSyncFieldData, WeaTableEdit_jobSyncFieldData, WeaTableEdit_hrmSyncFieldData];
    const params = newForm.getFormParams();
    const whichFather = [params.subcomtable, params.depttable, params.jobtable, params.hrmtable];
    if (whichFields[this.state.selectedKey] && whichFields[this.state.selectedKey][1]) {
      if (newForm.getFormParams().intetype === "1") {
        whichFields[this.state.selectedKey][1].com[0].browserConditionParam.dataParams = {
          datasourceid: params.dbsource,
          dmltablename: whichFather[this.state.selectedKey]
        }
      } else {
        whichFields[this.state.selectedKey][1].com[0].type = "INPUT";
      }
    }
    return (
      <div>
        <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@080bmt`}
          ref={el => { hrSyncStore.syncSetField.table = el }}
          rowKey="id"
          tableProps={{ 
            showEmptyText: false,
            scroll: {x: "100%"} 
          }}
          showTitle={false}
          // showCopy={false}
          showAdd={false}
          showDelete={false}
          showCopy={false}
          willDelete={this.willDelete}
          selectedRowKeys={this.state.selectedRowKeys}
          datas={whichDatas[this.state.selectedKey]}
          columns={whichFields[this.state.selectedKey]}
          onChange={(datas) => {
            setSyncSetTable(this.state.selectedKey, datas)
          }}
          onRowSelect={v => {
             this.setState({selectedRowDatas:v, selectedRowKeys: v})
          }}
          validator={{
            rules: {
              oafield: 'required',
              outfield: 'required',
            }
          }}
        />
      </div>
    )
  }

  willDelete = (datas, keys) => new Promise((resolve, reject) => {
    confirm({
      content: `${getLabel(385625, '确定要删除选择的记录吗？')}`,
      onOk: () => resolve(true),
      onCancel: () => resolve(false)
    })
  })

  getBtn = () => {
    const { hrSyncStore } = this.props;
    let btnArr = [];

    btnArr.push(
      <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@7ofv26@integrationHrsyncSetFieldButtonAdd`} onClick={() => {hrSyncStore.syncSetField.table.doAdd();}} buttonType='add' type="primary" />,
    );

    if(this.state.selectedKey == 0) {
      btnArr.push([
        <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@cdmauo@integrationHrsyncSetFieldButtonDel`} onClick={() => {hrSyncStore.syncSetField.table.doDelete();}} buttonType='del' type="primary" disabled={this.state.selectedRowDatas.length == 0 ? true : false} />
      ]);
    }else if(this.state.selectedKey == 1) {
      btnArr.push([
        <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@3h0biq@integrationHrsyncSetFieldButtonDel`} onClick={() => {hrSyncStore.syncSetField.table.doDelete();}} buttonType='del' type="primary" disabled={this.state.selectedRowDatas.length == 0 ? true : false} />
      ]);
    }else if(this.state.selectedKey == 2) {
      btnArr.push([
        <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@dpkm6w@integrationHrsyncSetFieldButtonDel`} onClick={() => {hrSyncStore.syncSetField.table.doDelete();}} buttonType='del' type="primary" disabled={this.state.selectedRowDatas.length == 0 ? true : false} />
      ]);
    }else if(this.state.selectedKey == 3) {
      btnArr.push([
        <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@00hmki@integrationHrsyncSetFieldButtonDel`} onClick={() => {hrSyncStore.syncSetField.table.doDelete();}} buttonType='del' type="primary" disabled={this.state.selectedRowDatas.length == 0 ? true : false} />
      ]);
    }

    return btnArr;
  }

  render() {
    const { hrSyncStore } = this.props;
    const { status } = hrSyncStore;
    const {
      showSearchAd,
      newFormFields,
      dataSyncFormFields,
      selectedKey,
      syncFieldSettingsGroupLabel
    } = toJS(status);
    const tabs = []
    for (let i = 0; i < syncFileds.length; i++) {
      tabs.push({
        color: "#000000",
        groupid: "flowAll",
        showcount: true,
        title: syncFieldSettingsGroupLabel && syncFieldSettingsGroupLabel[syncFileds[i]],
        viewcondition: i
      })
    }
    return (
      <div>
        {/* 同步关系设置说明  hrm deptjob*/}
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@fryb14`}
          type="card"
          datas={tabs}
          keyParam="viewcondition" //主键
          countParam="groupid" //数量
          selectedKey={this.state.selectedKey}
          onChange={v => {
            this.setState({ selectedKey: v, selectedRowDatas: [], selectedRowKeys: [] });
          }}
          className="no-bg"
          buttons={this.getBtn()}
        />
        {this.getSyncTableEdit()}
      </div>
    )
  }
}
export default SyncSetFields;
