import {
  WeaDialog,
  WeaProgress,
  WeaInputSearch,
} from 'ecCom'

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

import {
  WeaTableNew
} from 'comsMobx';
import React from 'react'
import {
  jumpToHrmDept,
  jumpToHrmPost,
  jumpToHrmJob,
} from '../../util/pulic-func'

const WeaTable = WeaTableNew.WeaTable;

class More extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: '',
      height: 510,
    }
  }

  reRenderColumns(columns, strokeColor) {
    columns.forEach((c, index) => {
      if (c.dataIndex == 'percent') {
        c.render = function(text, record) {
          let result = parseInt(record.result),
            max = parseInt(record.total);
          return <div>
  							      <WeaProgress ecId={`${this && this.props && this.props.ecId || ''}_WeaProgress@3a5l03@${index}`} 
  							      	percent={result/max*100} 
  							      	format={() => result}
  							      	strokeColor={strokeColor}
  							      />
  						    </div>
        }
      }
      if (c.dataIndex == 'departmentid') {
        c.render = (text, record) => {
          return <a onClick={() => jumpToHrmDept(record.departmentid)}>{record.departmentname}</a>
        }
      }
      if (c.dataIndex == 'title') {
        c.render = (text, record) => {
          // return <a onClick={() => jumpToHrmPost()}>{record.name}</a>
          return <span>{record.name}</span>
        }
      }
      if (c.dataIndex == 'mark') {
        c.render = (text, record) => {
          // return <a onClick={() => jumpToHrmJob()}>{record.mark}</a>
          return <span>{record.mark}</span>
        }
      }
    })
  }

  render() {
    const {
      title,
      visible,
      onCancel,
      buttons,
      search,
      tableStore,
      strokeColor,
    } = this.props;
    const {
      value,
      height
    } = this.state;

    return (
      <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@2nuudh`}
  				title={title}
  				icon="icon-coms-hrm"
            	iconBgcolor="#217346"
            	visible={visible}
            	closable={true}
            	onCancel={() => { onCancel(); this.setState({value: ''}) } }
            	buttons={buttons}
            	style={{width: 870, height: 510}}
            	onChangeHeight={(h) => this.setState({height: h})}
  			>
  				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@plnsyi`}>
  					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@y9ahls`} span={10} offset={14}>
  						<div style={{textAlign: 'right', paddingTop: 10, paddingRight: 20}}>
  							<WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@gibbyq`} 
  								value={value}
  								onSearch={(v) => search(v)}
  								onSearchChange={(v) => this.setState({value: v}) }
  							/>
  						</div>
  					</Col>
  				</Row>
  				<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@oqcc2k`}>
  					<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@q51ufs`} span={24}>
  						<div style={{padding: '10px 0'}}>
                <div style={{borderTop: '1px solid #E9E9E9'}}>
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@n32tr0`} 
                      comsWeaTableStore={tableStore}
                      hasOrder={true}
                      scroll={{y: height-135}}
                      getColumns={c => {this.reRenderColumns(c, strokeColor);return c}}
                    />
                </div>
  						</div>
  					</Col>
  				</Row>
  			</WeaDialog>
    )
  }
}

export default More