import {inject, observer} from "mobx-react";
import {toJS} from "mobx";
import {
  WeaTab,
  WeaDialog,
  WeaRightMenu, 
  WeaButtonIcon,
  WeaLocaleProvider, 
} from "ecCom";
import {
  WeaTableNew,
} from "comsMobx";
import {
  onCheck,
  doConfirm
} from "../../util/IntegrationUtil";
import NewShare from './NewShare';

const getLabel = WeaLocaleProvider.getLabel;
const { WeaTable } = WeaTableNew;

@inject("ExchangeStore")
@observer
class SyncDataRange extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      buttonLoading: false
    };
  }

  componentDidMount() {
    const { ExchangeStore } = this.props;
    ExchangeStore.doLoginURLInit();
    this.setState({
      buttonLoading: false
    });
  }

  componentWillReceiveProps(nextProps) {
    const { ExchangeStore } = this.props;
    if (this.props.location && nextProps.location && this.props.location.key !== nextProps.location.key) {
      ExchangeStore.doLoginURLInit();
      this.setState({
        buttonLoading: false
      });
    }
  }

  /**
   * 关闭弹窗
   */
  handleCancle = () => {
    const {
      ExchangeStore
    } = this.props;

    ExchangeStore.setState({
      showSyncDataRange: false
    });
  }

  /**
   * 按钮的显示和事件
   */
  onMenuClick = (type) => {
    const { 
      ExchangeStore 
    } = this.props, { 
      loginURLForm,
      doOperationlimit, 
    } = ExchangeStore;
    if(type && "BTN_SAVE" === type.toLocaleUpperCase()) {
      onCheck(loginURLForm, () => {
        this.setState({buttonLoading: true});
        doOperationlimit({...loginURLForm.getFormParams(), operate: "SaveUserAndPwd"}, (result) => {
          this.setState({buttonLoading: false});
        });
      });
    }
  };

  getBtns = (datas=[], disabled) => {
    const {
      ExchangeStore
    } = this.props;

    return [
      <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@hh8o31@integrationExchangeSyncDataRangeButtonSHARE_ADD`} 
        disabled={disabled}
        onClick={() => this.onMenuClick("SHARE_ADD")}
        buttonType='add' type="primary" />,
      <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@yhqyou@integrationExchangeSyncDataRangeButtonSHARE_DELETE`} 
        disabled={disabled || toJS(ExchangeStore.authStore.selectedRowKeys).length === 0} 
        onClick={() => this.onMenuClick("SHARE_DELETE")} 
        buttonType='del' type="primary" />
    ]
  };

  getRightMenu = (datas=[], disabled) => {
    const {
      ExchangeStore
    } = this.props;
    return datas && datas.map(data => {
      return {
        ...data,
        icon: <i className={data.icon} />,
        disabled: data.key === "SHARE_ADD" ? disabled : (disabled || toJS(ExchangeStore.authStore.selectedRowKeys).length === 0),
        onClick: () => this.onMenuClick(data.key)
      }
    })
  }

  onMenuClick = (type) => {
    const {
      ExchangeStore
    } = this.props, {
      doOperationlimit,
      authStore
    } = ExchangeStore, {
      selectedRowKeys
    } = toJS(authStore);
    
    if("SHARE_DELETE" === type) {
      doConfirm(getLabel(385625, '确定要删除选择的记录吗？'), () => {
        doOperationlimit({operate: "delShare", id: selectedRowKeys});
      })
    }else if("SHARE_ADD" === type) {
      ExchangeStore.setState({showShareForm: true});
      doOperationlimit({operate: "getAddShareForm"});
    }
  }

  render() {
    const { 
      ExchangeStore 
    } = this.props, {
      status,
      authStore,
    } = ExchangeStore, {
      dataRangeMenus,
      authLoading, 
      collectParams,
      showSyncDataRange
    } = toJS(status);
    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@nxumrx`}
        title={getLabel('517147','同步数据范围') }
        moduleName="integration"
        visible={showSyncDataRange}
        hasScroll={true}
        loading={authLoading}
        style={{width: 800, height: 600}}
        onCancel={this.handleCancle}
      >
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@2nxl3i`}
          datas={this.getRightMenu(dataRangeMenus, authLoading)}
          collectParams={collectParams}
        >
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@8xosff`}
            keyParams="viewcondition"
            datas={[]}
            buttons={this.getBtns(dataRangeMenus, authLoading)}
          />
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@y1lyup`}
            comsWeaTableStore={authStore}
            hasOrder={true}
            needScroll={true}
          />
          <NewShare ecId={`${this && this.props && this.props.ecId || ''}_NewShare@faxuda`} />
        </WeaRightMenu>
      </WeaDialog>
    );
  }
}

export default SyncDataRange;
