import {
  WeaTab,
  WeaDialog,
  WeaFormItem,
  WeaPopoverHrm
} from 'ecCom'

import {
  Row,
  Col,
  Spin,
  Button,
} from 'antd'

import {
  WeaSwitch
} from 'comsMobx'
import {
  WeaTableNew
} from 'comsMobx';
import React from 'react';
import {i18n} from '../../public/i18n';

const WeaTable = WeaTableNew.WeaTable;

class MoreWithAdSearch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      width: 1100,
      height: 510,
      isPanelShow: false,
      conditionNumber: 4,
    }
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.condition && nextProps.condition && (this.props.condition !== nextProps.condition) && nextProps.condition[0] && nextProps.condition[0].items) {
      this.setConditionNumber(nextProps.condition[0].items.length);
      this.setDialogWidth(nextProps.condition);
    }
  }

  getPanelComponents() {
    const {
      condition,
      form,
      style
    } = this.props;
    let arr = [];
    let formParams = form.getFormParams();
    const {
      isFormInit
    } = form;

    isFormInit && condition.map(c => {
      c.items.map((field, index) => {
        arr.push(
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@m9rmo3@${index}`} span={11} offset={(index%2 == 0) ? 1 : 0}>
                  		<div style={{marginTop: 20}}>
                  		  <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@38mkpn@${index}`}
                  		        label={`${field.label}`}
                  		        labelCol={{span: 6}}
                  		        wrapperCol={{span: (index%2 == 0) ? 17 : 18}}>
                  		          {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@ucqh5m@${index}`} fieldConfig={field} form={form} formParams={formParams} />}
                  		  </WeaFormItem>
                  		</div>
            		</Col>
        )
      })
    })
    if (style) {
      return <div className={style}><Row ecId={`${this && this.props && this.props.ecId || ''}_Row@jlnmjb`}
            onKeyDown={(e) =>{
              if ( e.keyCode == 13 && e.target.tagName === "INPUT") {
                this.props.search();
                this.setPanelStatus(false) 
              }
            }
          }
      >{arr}</Row></div>
    } else {
      return <div><Row ecId={`${this && this.props && this.props.ecId || ''}_Row@l2i12v`}
        onKeyDown={(e) =>{
              if ( e.keyCode == 13 && e.target.tagName === "INPUT") {
                this.props.search();
                this.setPanelStatus(false) 
              }
            }
          }
      >{arr}</Row></div>
    }
  }

  setPanelStatus(bool) {
    this.setState({
      isPanelShow: bool
    });
  }

  setConditionNumber(num) {
    this.setState({
      conditionNumber: num
    });
  }

  setDialogWidth(condition) {
    if (this.isConditionHasDate(condition)) {
      this.setState({
        width: 990
      });
    }
  }

  isConditionHasDate(condition) {
    if (this.isArray(condition) && condition[0].items) {
      let items = condition[0].items;
      for (let i = 0; i < items.length; i++) {
        if ((items[i].conditionType && items[i].conditionType == 'DATE') && (items[i].domkey && this.isArray(items[i].domkey) && items[i].domkey.length == 3)) {
          return true;
        }
      }
    }
    return false;
  }

  isArray(obj) {
    return Object.prototype.toString.call(obj) == '[object Array]';
  }

  reRenderColumns(columns, isNeedReRender) {
    if (!isNeedReRender) {
      return;
    }
    const {
      dataIndex,
      colId,
      jumpToHrmCard,
      jumpToHrmDept,
      jumpToHrmSubCompany,
      jumpToHrmPost,
      jumpToHrmContract,
      isColIdUnusual
    } = this.props;
    let that = this;

    columns.forEach((c, index) => {
      if (c.dataIndex == dataIndex[0]) {
        c.render = function(text, record) {
          return <span><WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@g2iv4o@${index}`} /><a href={`javaScript:openhrm(${record[colId[0]]});`} onClick={e => window.pointerXY(e)} >{record[dataIndex[0]]}</a></span>
        }
      }
      if (c.dataIndex == dataIndex[1] && !isColIdUnusual) {
        c.render = function(text, record) {
          return <a onClick={() => jumpToHrmDept(record[colId[1]])}>{record[dataIndex[1]]}</a>
        }
      }
      if (c.dataIndex == dataIndex[1] && isColIdUnusual) { //transfer
        c.render = function(text, record) {
          return <a onClick={() => jumpToHrmDept(record[colId[6]])}>{record[dataIndex[1]]}</a>
        }
      }
      if (c.dataIndex == dataIndex[2]) {
        c.render = function(text, record) {
          return <a onClick={() => jumpToHrmSubCompany(record[colId[2]])}>{record[dataIndex[2]]}</a>
        }
      }
      if (c.dataIndex == dataIndex[3] && !isColIdUnusual) {
        c.render = function(text, record) {
          return <a onClick={() => jumpToHrmPost(record[colId[3]])}>{record[dataIndex[3]]}</a>
        }
      }
      if (c.dataIndex == dataIndex[3] && isColIdUnusual) { //transfer
        c.render = function(text, record) {
          return <a onClick={() => jumpToHrmPost(record[colId[7]])}>{record[dataIndex[3]]}</a>
        }
      }
      if (c.dataIndex == dataIndex[4]) {
        c.render = function(text, record) {
          return <a onClick={() => jumpToHrmDept(record[colId[4]])}>{record[dataIndex[4]]}</a>
        }
      }
      if (c.dataIndex == dataIndex[5]) {
        c.render = function(text, record) {
          return <a onClick={() => jumpToHrmPost(record[colId[5]])}>{record[dataIndex[5]]}</a>
        }
      }
      //Contract
      if (c.dataIndex == dataIndex[6]) {
        c.render = function(text, record) {
          return <span><WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@bk5in7@${index}`} /><a href={`javaScript:openhrm(${record[colId[8]]});`} onClick={e => window.pointerXY(e)}>{record[dataIndex[6]]}</a></span>
        }
      }
      if (c.dataIndex == dataIndex[7]) {
        c.render = function(text, record) {
          return <span title={ record[dataIndex[7]] }>{ record[dataIndex[7]] }</span>
          // return <a onClick={() => jumpToHrmContract(record[colId[9]])}>{record[dataIndex[7]]}</a>
        }
      }
      if (c.dataIndex == dataIndex[8]) {
        c.render = function(text, record) {
          return <a onClick={() => jumpToHrmDept(record[colId[10]])}>{record[dataIndex[8]]}</a>
        }
      }
      if (c.dataIndex == dataIndex[9]) {
        c.render = function(text, record) {
          return <a onClick={() => jumpToHrmPost(record[colId[3]])}>{record[dataIndex[9]]}</a>
        }
      }
    })
  }
  
  getRowKey = (record,index) => index

  render() {
    const {
      title,
      visible,
      onCancel,
      buttons,
      search,
      tableStore,
      form,
      searchsBaseValue,
      onSearchChange,
      isNeedReRender
    } = this.props;
    const {
      width,
      height,
      isPanelShow,
      conditionNumber
    } = this.state;

    const btn = [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@50pu5v@1`} type="primary" onClick={() => {search(); this.setPanelStatus(false)}}>{i18n.button.search()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@9oz158@2`} onClick={() => form.reset()}>{i18n.button.reset()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j9revk@3`} onClick={() => this.setPanelStatus(false)}>{i18n.button.cancel()}</Button>),
    ];

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ojrp3w`}
  				title={title}
  				icon="icon-coms-hrm"
            	iconBgcolor="#217346"
            	visible={visible}
            	closable={true}
            	onCancel={() => { onCancel(); this.setPanelStatus(false) } }
            	buttons={buttons}
            	style={{width: width, height: 510}}
            	onChangeHeight={(h) => this.setState({height: h})}
  			>
  				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@z8h6ca`}>
  					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@g33vj0`} span={24}>
  						<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@bt167j`}
                		  	searchType={['base','advanced']}
                		  	showSearchAd={isPanelShow}
                		  	searchsBaseValue={searchsBaseValue}
                		  	setShowSearchAd={ bool => this.setPanelStatus(bool) } 
                		  	hideSearchAd={ () => this.setPanelStatus(false) }
                		  	searchsAd= {this.getPanelComponents()}
                		  	advanceHeight={ Math.ceil(conditionNumber / 2) * 58.5}
                        hasMask={false}
                		  	buttonsAd={btn}
                		  	onSearch={() => search()}
                		  	onSearchChange={ (val) => onSearchChange(val)}
                		/>
                	</Col>
  				</Row>
  				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@4uq0l7`}>
  					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8pj7cz`} span={24}>
  							<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@5tqz8l`} 
                  comsWeaTableStore={tableStore}
                  hasOrder={true}
                  scroll={{y: height-125}}
                  rowKey={this.getRowKey}
                  getColumns={c => this.reRenderColumns(c, isNeedReRender)}
                />
  					</Col>
  				</Row>
  			</WeaDialog>
    )
  }
}

export default MoreWithAdSearch