import {
  inject,
  observer,
} from 'mobx-react';

import {
  Row,
  Col,
  Icon,
  Modal,
  Button,
} from 'antd'

import {
  WeaFormItem,
  WeaSearchGroup,
} from 'ecCom'

import React from 'react'
import * as mobx from 'mobx'
import {
  WeaSwitch
} from 'comsMobx';

import '../../style/addgroup.css'

import {
  i18n
} from '../../public/i18n';
import {addContentPath} from '../../util/index.js'

const toJS = mobx.toJS;
const confirm = Modal.confirm;

@inject('hrmAddGroup')

@observer
class AddGroup extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const {
      hrmAddGroup
    } = this.props;
    const hrmId = this.props.params.hrmId || '';

    hrmAddGroup.setHrmId(hrmId);
    hrmAddGroup.getForm();
    hrmAddGroup.getTableInfo();
  }

  getComponents(condition, form, isLinkage) {
    let arr = [];
    let formParams = form.getFormParams();

    const {
      isFormInit
    } = form;

    isFormInit && condition.map(c => {
      let items = c.items;
      for (let i = 0; i < items.length; i++) {
        let field = items[i];

        arr.push(
          <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@dgv15i@${i}`}
                labelCol={{span: 0}}
            >
                {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@giie2t@${i}`} fieldConfig={field} form={form} formParams={formParams} />}
            </WeaFormItem>
        )
      }
    })

    return arr;
  }

  getGroup(columns, dataSource, arg) {
    const {
      hrmAddGroup
    } = this.props;
    const {
      key,
      authority
    } = hrmAddGroup;

    let arr = [];
    if (columns && columns.length > 0) {
      arr.push(<li style={arg == '2' ? {backgroundColor: '#68A0F5', color: '#fff'} : {backgroundColor: '#75D6E7', color: '#fff'} } className='hrm-group-li'>{columns[0].title}</li>);
    }
    if (dataSource && dataSource.length > 0) {
      for (let i = 0; i < dataSource.length; i++) {
        arr.push(<li style={{position: 'relative'}} className='hrm-group-li' onMouseEnter={() => this.handleMouseOver(dataSource[i].key)} onMouseLeave={() => this.handleMouseLeave()}>
      							{dataSource[i].groupname}
      							{ ( (arg == '1' && key == dataSource[i].key) || (arg == '2' && authority && key == dataSource[i].key) ) && dataSource[i].canedit ? <span style={{position: 'absolute', left: 190, top: 7}}><a onClick={() => this.del(dataSource[i].key, dataSource, arg)} className='icon-coms-delete'></a></span> : ''}
  						   </li>);
      }
    }
    if (!dataSource || dataSource.length == 0) {
      arr.push(<li style={{height: 158, paddingTop:50 }} className='hrm-group-li'>
  						      <div style={{width: '100%', fontSize: 30}}><i className='icon-coms-NoData'></i></div>
  						      <div>{i18n.label.dataNone()}</div>
  				       </li>)
    }

    return <ul className='hrm-group-ul'>{arr}</ul>
  }

  handleMouseOver(key) {
    const {
      hrmAddGroup
    } = this.props;
    hrmAddGroup.setKey(key);
  }

  handleMouseLeave() {
    const {
      hrmAddGroup
    } = this.props;
    hrmAddGroup.setKey('');
  }

  del(groupid, dataSource, arg) {
    const {
      hrmAddGroup
    } = this.props;

    hrmAddGroup.setGroupId(groupid);
    this.showConfirm(groupid, dataSource, arg, hrmAddGroup);
  }

  getIndex(key, dataSource) {
    let arr = [];
    if (dataSource instanceof Array) {
      for (let i = 0; i < dataSource.length; i++) {
        arr.push(dataSource[i].key);
      }
    }
    return arr.indexOf(key);
  }

  showConfirm(groupid, dataSource, arg, hrmAddGroup) {
    let _this = this;
    confirm({
      title: i18n.confirm.defaultTitle(),
      content: i18n.confirm.deleteSelected(),
      okText: i18n.button.ok(),
      cancelText: i18n.button.cancel(),
      onOk() {
        dataSource.splice(_this.getIndex(groupid, dataSource), 1);
        if (arg == '1') hrmAddGroup.setDataSource('1', dataSource);
        if (arg == '2') hrmAddGroup.setDataSource('2', dataSource);
        hrmAddGroup.delete();
      },
      onCancel() {
        return false;
      },
    });
  }

  render() {
    const {
      hrmAddGroup
    } = this.props;
    const {
      condition,
      form,
      btnName1,
      btnName2,
      title
    } = hrmAddGroup;
    const {
      columns1,
      dataSource1,
      columns2,
      dataSource2
    } = hrmAddGroup;

    return (
      <div className='hrm-group-title'>
  				<div style={{paddingLeft: 25, paddingBottom: 45, paddingTop: 20}}>
    					<div style={{width: 582, float: 'left'}}>
    						{this.getComponents(condition, form, false)}
    					</div>
    					<div style={{float: 'left', marginLeft: 16}}>
    						<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rpbr7h`} type="primary" onClick={() => hrmAddGroup.add()}>{btnName1}</Button>
    					</div>
    					<div style={{float: 'left', marginLeft: 16}}>
    						<a href={addContentPath('/spa/customSetting/index.html#/customsetting?tabKey=2')} target='_blank'><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@upsk93`}>{btnName2}</Button></a>
    					</div>
  				</div>
  				<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ixuhzu`} needTigger={true} title={title} showGroup={true}>
    					<div>
      						<div style={{float: 'left'}}>
      							{this.getGroup(toJS(columns2), toJS(dataSource2), '2')}
      						</div>
      						<div style={{float: 'left', marginLeft: 16}}>
      							{this.getGroup(toJS(columns1), toJS(dataSource1), '1')}
      						</div>
    					</div>
  				</WeaSearchGroup>
  			</div>
    )

  }
}

export default AddGroup