import React, { PureComponent, Fragment } from 'react';
import { connect } from 'react-redux';
import { Input, Cascader, message } from 'antd';
import { actionCreators } from './store';

import options from '../popups/districtOptions.json';



class company extends PureComponent {

    render() {
        const { companyDetail, natureOptions, handleModifyCompany } = this.props;
        let companyDetail2 = companyDetail.toJS();
        let natureOptions2 = natureOptions.toJS();
        console.log('ddd');
        return (
            <Fragment>


                {/* <div className="save-tips">
                    <div className="alert bg-warning-700 text-white p-2 m-1" role="alert">
                        <div className="d-flex align-items-center">
                            <div className="alert-icon">
                                <i className="fal fa-info-circle"></i>
                            </div>
                            <div className="flex-1">
                                <span className="h5">内容已经修改</span>
                            </div>
                            <a href="#" className="btn btn-sm text-white width-8">取消</a>
                            <a href="#" className="btn btn-light btn-sm width-8">保存</a>
                        </div>
                    </div>
                </div> */}
                <div className="sheet-panel-header d-flex justify-content-between mx-4">
                    <div>
                        <a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="新页面打开"><i className="fal fa-external-link"></i></a>
                    </div>
                    <div>
                    </div>
                </div>
                <div className="sheet-panel-content">
                    <div className="sheet-panel-form slimScroll1 mx-4">
                        <div className="form-header mt-3">
                            <div className="d-flex justify-content-between">
                                <span className="text-muted">公司</span>
                                <span className="text-muted">{companyDetail2.staffDetial.username} 创建于 {companyDetail2.create_time}</span>
                            </div>
                            <legend>{companyDetail2.companyname}</legend>
                        </div>
                        <div className="cldform clearfix">
                            <div className="cldform-line"></div>
                            <div className="cldform-item">
                                <div className="cldform-label">公司全称</div>
                                <div className="cldform-control">

                                    {/* {false ?(<Input id="2"
                                        value={companyDetail2.companyname}
                                        onClick={() => console.log('false')}
                                        onChange={() => console.log('sdf')}
                                    />):(<div onClick={() => console.log('false')} className="cldform-contarl-box cldform-contarl-textareabox"><span>张三</span></div>)} */}

                                    <Input id="2"
                                        value={companyDetail2.companyname}
                                        onChange={(e) => handleModifyCompany({
                                            'field': 'companyname', 'value': e.target.value
                                            , 'key': companyDetail2.key, 'title': '公司全称'
                                        })}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item cldform-item-wauto">
                                <div className="cldform-label">公司地区</div>
                                <div className="cldform-control">
                                    {/* {["19","292","3066"]} */}
                                    <Cascader options={options} value={companyDetail2.district} style={{ width: '100%' }} placeholder="公司地区"
                                        onChange={(e, selectedOptions) => handleModifyCompany({
                                            'field': 'district', 'value': e
                                            , 'key': companyDetail2.key, 'title': '公司地区', 'lable': selectedOptions
                                        })}
                                    />

                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item cldform-item-wauto">
                                <div className="cldform-label">公司性质</div>
                                <div className="cldform-control">
                                    <Cascader options={natureOptions2} value={[companyDetail2.nature]} placeholder="公司性质" style={{ width: '100%' }}
                                        onChange={(e, selectedOptions) => handleModifyCompany({
                                            'field': 'nature', 'value': e
                                            , 'key': companyDetail2.key, 'title': '公司性质', 'lable': selectedOptions
                                        })}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item">
                                <div className="cldform-label">公司地址</div>
                                <div className="cldform-control">
                                    <Input id="2" value={companyDetail2.address}
                                    onChange={(e) => handleModifyCompany({ 'field': 'address', 'value': e.target.value
                                    , 'key': companyDetail2.key, 'title': '公司地址' })}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item cldform-item-half pr-3">
                                <div className="cldform-label">公司传真</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.fax}
                                        onChange={(e) => handleModifyCompany({ 'field': 'fax', 'value': e.target.value
                                    , 'key': companyDetail2.key, 'title': '公司传真' })}
                                    />
                                </div>
                            </div>
                            <div className="cldform-item cldform-item-half pl-3">
                                <div className="cldform-label">网址</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.webservice}
                                        onChange={(e) => handleModifyCompany({ 'field': 'webservice', 'value': e.target.value
                                    , 'key': companyDetail2.key, 'title': '网址' })}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item">
                                <div className="cldform-label">乘车路线</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.ride}

                                        onChange={(e) => handleModifyCompany({ 'field': 'ride', 'value': e.target.value
                                    , 'key': companyDetail2.key, 'title': '乘车路线' })}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item">
                                <div className="cldform-label">地标建筑</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.landmarks}
                                        onChange={(e) => handleModifyCompany({ 'field': 'landmarks', 'value': e.target.value
                                    , 'key': companyDetail2.key, 'title': '地标建筑' })}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item">
                                <div className="cldform-label">参考住宿</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.stay}
                                        onChange={(e) => handleModifyCompany({ 'field': 'stay', 'value': e.target.value
                                    , 'key': companyDetail2.key, 'title': '参考住宿' })}
                                    />
                                </div>
                            </div>
                            <div className="cldform-line"></div>
                            <div className="cldform-item">
                                <div className="cldform-label">备注</div>
                                <div className="cldform-control">
                                    <Input id="2"
                                        value={companyDetail2.remarks}
                                        onChange={(e) => handleModifyCompany({ 'field': 'remarks', 'value': e.target.value
                                    , 'key': companyDetail2.key, 'title': '备注' })}
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </Fragment>

        );
    }
}

let delaySwitch = null;//延迟检索开关

const mapStateToProps = (state) => {
    return {
        companyDetail: state.getIn(['companyPopups', 'companyDetail']),
        natureOptions: state.getIn(['companyPopups', 'natureOptions']),
    }
}

const mapDispathToProps = (dispatch) => {
    return {
        handleModifyCompany(parameter) {
            
            dispatch(actionCreators.changeInputValue(parameter));
            if (delaySwitch != null) {
                clearTimeout(delaySwitch);
            }
            delaySwitch = setTimeout(() => {
                
                dispatch(actionCreators.modifyCompany(parameter));
            }, 800);
        },
    }
}

export default connect(mapStateToProps, mapDispathToProps)(company);