import {
    WeaDialog,
    WeaFormItem,
    WeaNewScroll,
    WeaMoreButton,
    WeaLocaleProvider,
} from 'ecCom'

import {
    Spin,
    Modal,
    Button,
} from 'antd'

import {
    WeaSwitch
} from 'comsMobx'

import {
    getUserName,
    bindTokenKey
} from '../../util/pulic-func'

import {
    i18n
} from '../../public/i18n';

import * as mobx from 'mobx'
import {addContentPath} from '../../util/index.js'
const toJS = mobx.toJS;
const getLabel = WeaLocaleProvider.getLabel;
const confirm = Modal.confirm;

export default class SecuritySet extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: 700,
            height: 430,
        }
    }

    getButtons = () => {
        const {
            loading,
            save
        } = this.props;

        let buttons = [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ycr9v9`} type="primary" onClick={() => save()} disabled={loading}>{i18n.button.save()}</Button>),
            (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@y553yc`} />)
        ];

        return buttons;
    }

    getForm = () => {
        const {
            form,
            condition,
            isFormInit,
            verifyTypeSelectedValue,
            useTypeSelectedValue,
            checkboxValue,
        } = this.props;

        const {userUsbType,usbstate,needauto} = form.getFormParams();

        let arr = [];
        isFormInit && condition.map(c => {
            c.items.map((field, index) => {
                let key = field.domkey[0];

                
                if (userUsbType == '6' && !['userUsbType','usbstate'].includes(key)) {
                    return
                }

                if (userUsbType == '901' && usbstate=='0' &&['selectdateselect' ].includes(key)) return;

                if (needauto=='0' &&['selectdateselect' ].includes(key)) return;


                if (userUsbType == '901' && [ 'enableDate', 'enableUsbType', 'mobile', 'tokenKey', 'serial'].includes(key)) return;


                if(userUsbType === '7' && [ 'enableDate', 'enableUsbType', 'mobile', 'tokenKey', 'serial'].includes(key)) return;

                if(userUsbType === '7' && [ 'enableDate', 'enableUsbType', 'mobile', 'tokenKey', 'serial'].includes(key)) return;


                if (!verifyTypeSelectedValue && key !== 'userUsbType') {
                    return;
                }
                if (verifyTypeSelectedValue == '4' && (useTypeSelectedValue == '0' || useTypeSelectedValue == '2') && (key !== 'userUsbType' && key !== 'usbstate' && key !== 'mobile')) {
                    return;
                }
                if (verifyTypeSelectedValue == '4' && useTypeSelectedValue == '1' && checkboxValue == '0' && (key !== 'userUsbType' && key !== 'usbstate' && key !== 'mobile' && key !== 'needauto')) {
                    return;
                }
                if (verifyTypeSelectedValue == '4' && useTypeSelectedValue == '1' && checkboxValue == '1' && (key !== 'userUsbType' && key !== 'usbstate' && key !== 'mobile' && key !== 'needauto' && key !== 'selectdate' && key !== 'enableUsbType')) {
                    return;
                }
                if (verifyTypeSelectedValue == '2' && (useTypeSelectedValue == '0' || useTypeSelectedValue == '2') && (key !== 'userUsbType' && key !== 'usbstate' && key !== 'serial')) {
                    return;
                }
                if (verifyTypeSelectedValue == '2' && useTypeSelectedValue == '1' && checkboxValue == '0' && (key !== 'userUsbType' && key !== 'usbstate' && key !== 'serial' && key !== 'needauto')) {
                    return;
                }
                if (verifyTypeSelectedValue == '2' && useTypeSelectedValue == '1' && checkboxValue == '1' && (key !== 'userUsbType' && key !== 'usbstate' && key !== 'serial' && key !== 'needauto' && key !== 'selectdate' && key !== 'enableUsbType')) {
                    return;
                }
                if (verifyTypeSelectedValue == '3' && (useTypeSelectedValue == '0' || useTypeSelectedValue == '2') && (key !== 'userUsbType' && key !== 'usbstate' && key !== 'tokenKey')) {
                    return;
                }
                if (verifyTypeSelectedValue == '3' && useTypeSelectedValue == '1' && checkboxValue == '0' && (key !== 'userUsbType' && key !== 'usbstate' && key !== 'tokenKey' && key !== 'needauto')) {
                    return;
                }
                if (verifyTypeSelectedValue == '3' && useTypeSelectedValue == '1' && checkboxValue == '1' && (key !== 'userUsbType' && key !== 'usbstate' && key !== 'tokenKey' && key !== 'needauto' && key !== 'selectdate' && key !== 'enableUsbType')) {
                    return;
                }
                if (verifyTypeSelectedValue == '901'  && checkboxValue == '0' && (key !== 'userUsbType' && key !== 'usbstate'  && key !== 'needauto' && key !== 'enableUsbType')) {
                    return;
                }
                if (verifyTypeSelectedValue == '901' && useTypeSelectedValue == '0' &&key == 'needauto' ) {
                    return;
                }
                if (verifyTypeSelectedValue == '901'&& useTypeSelectedValue == '0' && key=='selectdate' && (key !== 'userUsbType' && key !== 'usbstate'  && key !== 'needauto' && key !== 'enableUsbType')) {
                    return;
                }
                if(key == 'usbstate'){
                    if(verifyTypeSelectedValue=='901'){
                        field.options.splice(2,1)
                }}     

                arr.push(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@faj67m@${index}`}
                            label={key !== 'usbstate' ? `${field.label}` : ''}
                            labelCol={{span : key !== 'usbstate' ? 9 : 0 }}
                            colon={key !== 'usbstate' ? true : false}
                            error={form.getError(field)}
                            tipPosition="bottom"
                            className={key}
                            wrapperCol={{span: key == 'userUsbType' ? 9 : key == 'usbstate' ? 6 : 15}}
                            style={{width: '80%', marginLeft: '8%',marginTop: 8}}
                        >
                                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@uxm2gc@${index}`} fieldConfig={field} form={form} formParams={form.getFormParams()} onChange={(e) => this.handleChange(e)}/>
                        </WeaFormItem>)
            })
        })

        return <div className='hrm-security-set-form' style={!verifyTypeSelectedValue ? {marginTop: 0,marginLeft: 0} : {}}>{arr}</div>
    }

    showConfirm = () => {
        const {
            saveSecondaryPasswordSetting
        } = this.props;

        confirm({
            title: getLabel(131329, '信息确认'),
            content: (<div>
                        <span>{i18n.label['530915']()}</span><br />
                        <span>{i18n.label['530916']()}</span>
                     </div>),
            okText: getLabel(33703, '确定'),
            cancelText: getLabel(32694, '取消'),
            onOk() {
                saveSecondaryPasswordSetting(false);
            },
            onCancel() {
                return false
            },
        });
    }

    handleChange = (e) => {
        const {
            setVerifyTypeSelectedValue,
            setUseTypeSelectedValue,
            setCheckboxValue,
            handleCondition,
        } = this.props;

        let key = Object.keys(e)[0],
            val = e[key].value;

        switch (key) {
            case 'userUsbType':
                setVerifyTypeSelectedValue(key, val);
                if (val == '2') this.updateKey(val);
                handleCondition();
                break;
            case 'usbstate':
                setUseTypeSelectedValue(val, key);
                break;
            case 'needauto':
                setCheckboxValue(val, key);
                break;
        }
    }

    handleClick = () => {
        const {
            verifyTypeSelectedValue,
        } = this.props;

        this.updateKey(verifyTypeSelectedValue)
    }

    updateKey = (needusb) => {
        const {
            setLoginId,
            hrmId
        } = this.props;

        if (needusb == "2") {
            let returnstr = getUserName() || '';
            returnstr && setLoginId(returnstr);
        } else if (needusb == "3") {
            bindTokenKey(hrmId);
        }
    }

    render() {
        const {
            title,
            visible,
            loading,
            onCancel,
            verifyTypeSelectedValue,
            useTypeSelectedValue,
            checkboxValue,
        } = this.props, {
            width,
            height,
        } = this.state;

        const {
            isSecondaryVerifySetted,
            isSecondaryVerifyUsed,
            saveSecondaryPasswordSetting,
            hasValidateType,
        } = this.props;

        return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@2fqede`}
                title={title}
                icon="icon-coms-hrm"
                iconBgcolor="#217346"
                visible={visible}
                closable={true}
                onCancel={() => onCancel() }
                buttons={this.getButtons()}
                style={{width: width, height: height}}
                onChangeHeight={(h) => this.setState({height: h})}
            >
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@hj26kx`} spinning={loading}>
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@yp8t6e`} height={height}>
                        <div className='hrm-dialog-form'>
                            { (verifyTypeSelectedValue == '2' || verifyTypeSelectedValue == '3') && 
                                <div style={{position: 'relative'}}>
                                     <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@elrcax`} onClick={() => this.handleClick()} className='hrm-security-set-btn'>{i18n.button.bind()}</Button>
                                </div>
                            }
                            {this.getForm()}
                            { !loading && !hasValidateType && <div style={{marginLeft: '38%',marginTop: 5}}><span style={{color:'#666'}}>{i18n.message.noVerifyMethod()}</span><a href={addContentPath('/spa/hrm/engine.html#/hrmengine/securitySetting')} target='_blank'>{i18n.button.clickToSet()}</a></div>}

                        </div>
                        <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@rm1cvo`}
                            label={getLabel('501204',"二次验证密码")}
                            labelCol={{span: 8}}
                            wrapperCol={{span:16}}
                            style={{margin: !verifyTypeSelectedValue ? '0px 11% 0px 15%' : '0px 11%', marginTop: -10}}>
                                <div style={{marginTop: !isSecondaryVerifySetted ? 7 : 0}}>
                                      <span>
                                        {isSecondaryVerifySetted ? getLabel('514132',"已设置") :i18n.label['514133']()}
                                      </span>
                                      { isSecondaryVerifySetted &&
                                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@oxvg28`} type='primary' style={{marginLeft: 83}} onClick={() => this.showConfirm()}>
                                          {getLabel('26471',"停用")}
                                        </Button>
                                      }
                                </div>
                        </WeaFormItem>
                    </WeaNewScroll>
                </Spin>
            </WeaDialog>
        )
    }
}