import React from 'react'
import * as mobx from 'mobx'
import {
    inject,
    observer,
} from 'mobx-react'
import {
    WeaTop,
    WeaTab,
    WeaFormItem,
    WeaRightMenu,
    WeaLeftRightLayout,
    WeaOrgTree,
    WeaLocaleProvider
} from 'ecCom'
import {
    Row,
    Col,
    Spin,
    Modal,
    Button,
    message,
    Switch,
    Menu, Dropdown, Icon, Select,Progress
} from 'antd'
import {
    WeaSwitch,
    WeaTableNew
} from 'comsMobx'
import {
    i18n
} from '../../public/i18n';

import '../../style/resume.less';
import SearchPanelDialog from '../SearchPanelDialog';

import { renderNoright } from '../../util';
import { exportWord } from '../mhtmlToWord'
const Option = Select.Option;



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

@inject('personnelResume')
@observer
export default class PersonnelResume extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
    }

    componentDidMount() {
        this.init();
    }

    componentWillReceiveProps(nextProps) {
        const {
            personnelResume
        } = this.props;

        if (this.props.location.key !== nextProps.location.key) {
            this.init();
        }
    }

    init() {
        const {
            personnelResume
        } = this.props;
        let { hash } = window.location;
        hash = hash.split("?")[0];
        let id = hash.match("[^/]+(?=/$|$)")[0];
        personnelResume.resourceId = id;;
        personnelResume.getHasRight();
    }

    onSelect = (e) => {
        const {
            personnelResume
        } = this.props,{
            form,
            show
        } = personnelResume;

        personnelResume.show = ! show;
        personnelResume.params = {
            ...form.getFormParams()
        }
    }

   

    //左侧树
    getTree = () => {
        const {
            personnelResume
        } = this.props;
        const {
            companysId,
            params
        } = personnelResume;


        let tree = (
            <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@dhi1ro`}
                ref='WeaOrgTree'
                dataUrl={"/api/bs/hrmorganization/personnelresume/getSearchTree"}
                loading
                needSearch
                noCache={true}
                params={params}
                onSelect={this.onSelect}
                needDropMenu={false}
                isLoadSubDepartment={true}
                topPrefix={'hrmSearch'}
                companysId={companysId}
                inputLeftDom={`<b>${i18n.label.organization()}</b>`}
                treeNodeClick={this.treeNodeClick}
                expandAllChildrenOnSearch={true}
                renderNode={item => this.renderNode(item)}
            />
        )
        return tree;
    }

    renderNode(item) {
        return <div className='text-elli' title={item.name}>
            <i className={item.icon} style={{ marginRight: '5px' }}></i>
            {item.name}
            {item.canceled && <span style={{ color: 'red' }}>({i18n.label.forbidden()})</span>}
        </div>
    }

    treeNodeClick = (event, ids, nodeids, nodes) => {
        const {
            personnelResume
        } = this.props;
        const {
            companysId
        } = personnelResume;
        const type = event.node.props.type || '0';
        const id = event.node.props.id || '';
        personnelResume.nodeType = type;
        if (type == '4') {
            personnelResume.resourceId = id;
            setTimeout(function() {
                personnelResume.getPersonnelResume();
            },1000)
            
        }
    }

    getTopMenuBtns() {
        const {
            personnelResume
        } = this.props;
        const {
            topMenu,
            tableStore
        } = personnelResume;

        let btns = [];

        btns.push(<Select showSearch
            style={{ width: 115 }}
            placeholder={getLabel(547660,'请选择模板')}
            defaultValue={getLabel(547252,'人员简历模板')}
            optionFilterProp="children"
            notFoundContent="无法找到"
            size="large"
            onChange={this.handleChange()}
        >
            <Option value="1">{getLabel(547252,'人员简历模板')}</Option>
            <Option value="2">{getLabel(547253,'人员晋升模板')}</Option>
        </Select>)

        topMenu.map((item, i) => {
            if (item.menuFun === 'screening') {
                btns.push(<Button id="top-screening" type='primary' onClick={() => this.handleClick(item)}>{item.menuName}</Button>);
            }else {
                btns.push(<Button type='primary' onClick={() => this.handleClick(item)}>{item.menuName}</Button>);
            }
        });



        return btns;
    }

    handleClick(item) {
        this[item.menuFun] && this[item.menuFun]();
    }

    //模板修改
    handleChange(value) {

    }

    // log = () => {
    //     window.setLogViewProp({
    //         logMoudleType: 11,
    //         keys: new Date().getTime(),
    //     });
    // }


    getDropMenuDatas() {
        const {
            personnelResume
        } = this.props;
        const {
            rightMenu
        } = personnelResume;

        let menus = [];
        toJS(rightMenu).map((item, index) => {
            let obj = {
                key: item.menuFun,
                icon: <i className={`${item.menuIcon}`} />,
                content: item.menuName,
            }
            if (item.menuFun == 'collection' || item.menuFun == 'help' || item.menuFun == 'pageAddress') {
                obj.disabled = true;
            }
            menus.push(obj);
        })
        return menus;
    }

    handleMenuClick(key) {
        this[key] && this[key]();
    }

    //人员筛选
    screening() {
        const {
            personnelResume
        } = this.props,{
            show,form
        } = personnelResume;
        form.reset();
        personnelResume.show = ! show;
        personnelResume.getSearchCondition();

    }

    //导出当前
    currentExport() {
        const {
            personnelResume
        } = this.props;
        const {
            resumeList
        } = personnelResume;
        exportWord({
            filename:`${getLabel(547238,'人员简历')}-${resumeList.lastName}`,
            selector:"#personnel-resume",
            style:`.title {
                font-size: 18px;
                font-weight: 900;
                text-align: center;
            }
            .photos{
                width: 100px;
                height: 120px;
            }`
        })
    }

    //合并导出
    mergeExport() {
        const {
            personnelResume
        } = this.props;
        personnelResume.downloadPerResume(0);
    }

    //全部导出
    allExport() {
        const {
            personnelResume
        } = this.props;
        personnelResume.downloadPerResume(1);
    }

    isEmptyObject(obj) {
        for (let key in obj) {
            return false;
        }
        return true;
    }


    render() {

        const {
            personnelResume
        } = this.props;
        const {
            hasRight, defaultShowLeft, resumeList,percent,show,form,condition,dialogLoading
        } = personnelResume;

        if (hasRight === false) {
            return renderNoright();
        }


        return (
            hasRight && <div ref='page' style={{ height: '100%' }}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@k6oc4u`}
                    datas={this.getDropMenuDatas()}
                    onClick={key => this.handleMenuClick(key)}
                >
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bj98s7`}
                        title={i18n.label.personnelResume()}
                        icon={<i className='icon-coms-hrm' />}
                        iconBgcolor='#217346'
                        loading={true}
                        buttons={this.getTopMenuBtns()}
                        showDropIcon={true}
                        dropMenuDatas={this.getDropMenuDatas()}
                        onDropMenuClick={(e) => this.handleMenuClick(e)}
                    >
                        <WeaLeftRightLayout className='org-personnel-resume' ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@7muhhb`} isNew={true} showLeft={defaultShowLeft} leftCom={this.getTree()}>
                            {
                               !this.isEmptyObject(resumeList) ?  <div id='personnel-resume'>
                               <div className='content'>
                                   <p className='title'>人员简历信息</p>
                                   <table border="1" align="center" width="750" cellspacing='0' className='resume-table'>
                                       <tr align="center" height='50'>
                                           <td colspan="7">一、基本信息</td>
                                       </tr>
                                       <tr align="center" height='50'>
                                           <td width="100" >姓名</td>
                                           <td width="100">{resumeList.lastName}</td>
                                           <td width="100">性别</td>
                                           <td width="100">{resumeList.sex}</td>
                                           <td width="100">出生年月</td>
                                           <td width="100">{resumeList.birthday}</td>
                                           <td rowspan="3"><img className='photos' src={resumeList.image} /></td>
                                       </tr>
                                       <tr align="center" height='50'>
                                           <td width="100" >籍贯</td>
                                           <td width="100">{resumeList.native}</td>
                                           <td width="100">政治面貌</td>
                                           <td width="100">{resumeList.politics}</td>
                                           <td width="100">部门</td>
                                           <td width="100">{resumeList.department}</td>
                                       </tr>
                                       <tr align="center" height='50'>
                                           <td width="100">婚姻状况</td>
                                           <td width="100">{resumeList.marriage}</td>
                                           <td width="100">岗位</td>
                                           <td width="100">{resumeList.jobtitle}</td>
                                           <td width="100">入职时间</td>
                                           <td width="100">{resumeList.companystartdate}</td>
                                       </tr>
                                       <tr align="center" height='50'>
                                           <td width="100">参加工作时间</td>
                                           <td width="100" colspan="2">{resumeList.workstartdate}</td>
                                           <td width="100" colspan="2">身份证号</td>
                                           <td width="100" colspan="2">{resumeList.idCard}</td>
                                       </tr>
                                       <tr align="center" height='50'>
                                           <td width="100" rowspan="2">家庭地址</td>
                                           <td width="100" rowspan="2" colspan="2">{resumeList.address}</td>
                                           <td width="100" colspan="2">联系电话</td>
                                           <td width="100" colspan="2">{resumeList.telephone}</td>
                                       </tr>
                                       <tr align="center" height='50'>
                                           <td width="100" colspan="2">E-mail</td>
                                           <td width="100" colspan="2">{resumeList.email}</td>
                                       </tr>

                                       {
                                           resumeList.tables.map((item, index) => {
                                               return (
                                                   <React.Fragment key={index}>
                                                       <tr align="center" height='50'>
                                                           <td colspan="7">{item.title}</td>
                                                       </tr>
                                                       <tr align="center" height='50'>
                                                           {
                                                               item.columns.map(column => {
                                                                   return (
                                                                       <td width="100" rowspan={column.rowspans} colspan={column.colspans}>{column.name}</td>
                                                                   )
                                                               })
                                                           }
                                                       </tr>

                                                       {
                                                           item.datas.map(data => {
                                                               return (
                                                                   <tr align="center" height='50'>
                                                                       {
                                                                           data.map((row, index) => {
                                                                               return (
                                                                                   <td width="100" rowspan={row.rowspans} colspan={row.colspans}>{row.value}</td>
                                                                               )
                                                                           })
                                                                       }
                                                                   </tr>
                                                               )
                                                           })
                                                       }

                                                   </React.Fragment>
                                               )
                                           })
                                       }
                                       <tr align="center" height='200'>
                                           <td width="100">个人自述</td>
                                           <td width="100" colspan="6">{resumeList.selfStatement}</td>
                                       </tr>

                                   </table>
                               </div>
                           </div>
                            : <Progress  percent={percent} strokeWidth={10}  />}
                        </WeaLeftRightLayout>
                    </WeaTop>
                </WeaRightMenu>
                <SearchPanelDialog ecId={`${this && this.props && this.props.ecId || ''}_SearchPanelDialog@q4rrwm`}
                    title={"人员筛选"}
                    visible={show}
                    condition={toJS(condition)}
                    form={form}
                    isFormInit={form.isFormInit}
                    loading={dialogLoading}
                    height={120}
                    conditionLen={1}
                    search={() => this.onSelect()}
                    onCancel={() => personnelResume.show = ! show}
                />
            </div>
        )
    }
}